Softpress KnowledgeBase

KnowledgeBase Home > Site Planning and Design > Working with Text

Using Google Web Fonts

The days of having to use basic fonts like Times New Roman, Helvetica and Arial or sacrificing accessibility and load times for graphic text with special fonts are nearing their end due to new advances in web technology, and there are a number of ways to add visual interest to your text by using non-standard fonts. One of the easiest ways to do this is to use Google Web Fonts. Using a Google font only requires a few steps in Freeway, and you do not have to worry about uploading any extra resources.

Using a single Google Web Font

Go to Google Web Fonts and select the font you want to use. Once you've selected your font, click the "Quick-use" option on the lower menu.

On the Quick Use page, follow steps 1 and 2 to select the styles and character sets you want to use. In Step 3, copy the entire line of code from the "Standard" tab.

In Freeway, select Page > HTML Markup. Make sure the selection menu on the bottom of the dialog box is set to "Before </head>" and paste the line of code into the dialog box, pressing OK when you're done.

Back on the Google Web Font Quick Use page, copy the font list after the "Font-family:" text; you only need the part after the colon. You will then make a Font Set in Freeway using that list. You are also able to add more fonts to that list to have more control over the font-degradation for older browsers that do not support Google fonts. Specific directions on creating a Font Set can be found in the Getting the Most out of your Fonts article.

Name your Font Set after the font you selected in Google Fonts, and select the most similar "Screen Font" as possible. If the closest you can get is matching serif or non-serif, that will still be beneficial, as the Screen Font is what you will see in the editing mode of Freeway; the Google font will not appear until you preview the site, and you may need to upload and view the site online before it shows up.

Once your Font Set is set up, you can create styles and use this new font set for your text to your hearts desire.

Using Multiple Google Web Fonts

Using multiple fonts is set up very similarly. First, you will select the fonts you want to use and click the "Add to Collection" button next to each font. When you are finished, click the Use button.

Steps 1 through 3 on this page will be done exactly the same as steps 1 through 3 on the Quick Use page outlined above, and the code from Step 3 will still be pasted into the Page > HTML Markup dialog, in the Before </head> section.

The only difference is that you will need to create multiple Font Stacks; one for each font that you selected. The process is exactly the same, simply repeat it for each font, making sure to use the correct name and a similar screen font for each font that you set up.

No related articles were found.