STEP 4: Select A Font

From Frontal Wiki

Now that you’ve learned the basics for changing color properties, you may want to select a new font that will better suit your site.

Selecting Fonts:

The first step is to figure out which fonts you want to include in your site. For a complete list of all the font classes that are already embedded with Frontal, you can check out the font samples or see the list below. In the list, you will see each font labeled by the name of its font class. These are the names that you will be using in your Frontal document, so make note of which ones you think you would like to use.

Including Fonts:

The next step is to include these font classes into your Frontal document. Locate the following lines in your document:

<!-- INCLUDE FONTS -->
<include rel="assets" type="application/x-shockwave-flash" src="assets/swfs/fonts.swf" fontClasses="Futura" blocking="true"/>

These are the lines of code that tell the Frontal document to include external font classes. Focus on the part of the code that reads "fontClasses=". This is where you will use the specific font names that you've selected from the font samples. In this case, the font class "Futura" is being included. If, for example, you wished to include the Helvetica font, you could replace "Futura" with "Helvetica, HelveticaItalic, HelveticaBold", and you would thus be able to access all the font classes for the Helvetica font. For a better understanding of this, you can view the font samples code.

It is also possible to include your own fonts, apart from the ones that are already offered. For more information on creating and including your own font library, see Embedding Fonts.

Using Fonts:

To quickly change the font throughout your site, locate the following lines of code in your document:

// SET FONT FAMILY: //
font-family: Swift LT Std;

Simply replace "Swift LT Std" with the font class name of your choosing.

It is also possible for you to change the font each time text is used in your site, allowing you to use different font classes for different sections. To do this, you will have to set the style for your text within the text tag itself. Below is an example of a text tag that is setting the font class to "Futura":

<text style="font=family: Futura"><![CDATA[Sample Text]]></text>

Bold & Italics:

You will probably want to use bold and italics in certain cases throughout your site. To do this, you can use the bold and italic tags within each text instance. Below is an example of a line of text that is using both bold and italics:

<text><![CDATA[This sentence uses <b>BOLD</b> and <i>ITALICS</i>.]]></text>

It is important to note the both bold and italic will only work if your text is within the <[!CDATA[ ]]> tag. It is also important to note that bold and italics can only be used if those font classes have been included. Therefore, if you would like to use "Futura" in bold and italics, you would have to include the fonts classes "Futura, FuturaBold, FuturaItalic".

Review:

Fonts are a very useful tool in designing your site, so it is important that you have a good understanding of how to include them and how to implement them. Once you're confident that you can properly use fonts in your document, you can move on to the next step and begin altering the layout of your site.

</br> </br>