[Pro] Web Fonts with Blogger Actions

Because the Blogger actions add their CSS to the when you upload a Freeway website, and they only offer the few web safe fonts in the action interface, it isn’t very intuitive to apply web fonts to the blogger items. However, it can be done!

Note: I’m using Open Sans from Google Web Fonts.

  1. Choose the web font from Google Web Fonts.

  2. Google Web Fonts will supply you two small snippets of code, one which they say to place in your website before , and the other showing how to add the font to your CSS. The first bit of code should look something like this:

  3. In Freeway, go to the page menu, then to HTML markup. Paste that snippet in the box, and select "Before " in the drop down. IMPORTANT! See that “>” at the end? Place a “/” right before that. The result should be: Without doing this, Blogger will reject your template, saying that there was a XML error and the element “link” needs to be closed.

  4. Click on the blogger posts item on the page, and pull up the action palette. There will be a font drop down for every item. Chose “New…”. A small window will pop up, allowing you to create a new font set. The screen font is unimportant, as it just chooses which font will show up in the preview, and has nothing to do with the end result.

  5. In the empty text area, copy and paste the second snippet of code from Google Web Fonts, sans the font-family: and the ; parts. The result will look like this: ‘Open Sans’, sans-serif. If you so choose, you can add fall-back fonts for browsers that don’t support web fonts, by placing them after the ‘Open Sans’,. For example, if you wanted Tahoma to be used if the viewers browser doesn’t support web fonts, simply use ‘Open Sans’, Tahoma, sans-serif.

tutorials mailing list
Update your subscriptions at: