How to use fonts

Posted by nguyen nhung on May 29, 2014 in Plazart Framework

Navigate to “Extensions / Template Manager / Select a current style of your template
Go to the tab “Font”
You can see the following table:

 

Font.general

 

You can see there are four main font types in the picture above. They are Standard, Google Fonts, Adobe Edge Fonts and Squirrel.

1.  The font type: Standard

It is simple to use this font type. You only select “Standard” and continue to select available fonts of this type on the right side.
Font.standard

 

After selecting the font which you want, you should determine which parts this font is used for.

You will have to find the “HTML, ID, and CLASS” of these parts and then copy and paste those into “the selectors” below the font type which you select above.

Note:

If it is an ID, there is “#” before the ID.

If it is a CLASS, there is “.” before the Class.

If it is a HTML, there is nothing.

 

font.standard.1

 

2. The font type: Google Font

After selecting “Google Font”, you can see two boxes: “Font URL” and “Font Family” below.

font.googlefont.genenal

 

To find “Font URL” and “Font Family”, do like the following instructions
Guide to use Google Fonts
Step1: Click “Google Font Directory” to go to https://www.google.com/fonts

font.googlefont.1

 

Step 2:

 

font.googlefont.3

 

font.google.4

 

In the Part of “Selector”, you can see how to make it above.

 

3. The font type: Adobe Edge Fonts

After selecting “Adobe Edge Font”, you can see two boxes: “Font URL” and “Font Family” below.

font.adobe edge.font.general

 

To find “Font URL” and “Font Family”, do like the following instructions
Guide to use Adobe Edge Fonts
Step1: Click “Adobe Edge Font Directory” to go to: http://html.adobe.com/edge/webfonts/

font.adobe edge.font.1

 

Step 2:

 

font.adobe edge.font.2

 

font.adobe edge. font3

 

font.adobe edge.font4

 

In the Part of “Selector”, you can see how to make it above.

4. The font type: Squirrel

After selecting “Squirrel”, you can see that there are some fonts on the right hand. They are not available but they can be downloaded from here: http://www.fontsquirrel.com/fonts/list/find_fonts.

font.squirrel1

 

Guide to download Squirrel’s fonts
Step 1: Go to here: http://www.fontsquirrel.com/fonts/list/find_fonts
Step 2:  Go to the tab: “FIND FONTS”

font.squirrel2.

 

Step 3: After downloading the font, you extract it and then go to the tab “Webfont generator”

 

font.squirrel3.

 

font.squirrel4.

 

Step 4: After downloading your kit, you open it and copy like the following picture

 

font.squirrel5.

 

Step 5: You go to the the folder containing your template
Eg: Your template is Plazart. You put this template in “Xampp/htdocs/Plazart”
(Path: You go to “Xampp/htdocs/Plazart/templates/plazart_blank/fonts)
Step 6: You create a new folder and paste (the things which you copy in step 4) into the new folder.
Step 7: You open the file “stylesheet.css” with notepad++”

font.squirrel6

 

Step 8: You go to back to the new folder and rename it by pasting the thing you copy in the step 7. As a result, you have a new folder named “20_dbregular”

 

font.squirrel7

 

Step 9: You go to the tab “Font” in the template manager; you can see the new font appear there

 

font.squirrel8.

 

In the Part of “Selector”, you can see how to make it above.

 

Features

25 5