You want to use @font-face with Google's Blogger? I'll cover two different ways to do it; the easy way, with limited font choices, and (coming soon) the not as easy way, but you can use any font you have rights to.
The easier solution is to find a font you like at Google Web Fonts. It's easier because Google generates the different types of font files needed for browser compatibility and more importantly hosts the font files for you. All you need to do is find a font you want to use and get the link to its stylesheet that will make the font available to other CSS. The link looks like this:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Now that you have a link to the CSS file it needs to be included in the blog's template HTML. In the Blogger dashboard choose "Template" from the menu on the left and then click the "Edit HTML" button. A warning message will be displayed, click on "Proceed." Now is probably a good time to copy all of the HTML into a text editor and save it as a backup so it can be restored later if something goes horribly wrong. Now find the <head> element and add the link element right after it so that the HTML looks like this:
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Now the font files will be downloaded to the viewer's browser but how do you use them with CSS? Google Web Fonts also shows the contents of the linked CSS file so you can see the properties needed to set it as a style. Styles can be added using Blogger's "Add CSS" feature under "Template" - "Customize" - "Advanced" - "Add CSS". For this example we can create a CSS class like
p.lobster {font-family: 'Lobster', cursive;font-style: normal;font-weight: 400;font-size: 18pt;color: #BF1A2B;}
and you can have text that looks like this (though I don't recommend it) by setting a class of "lobster" on the paragraph:
The lobsters are loose! Run for your lives! Cover yourselves in butter!
Part two of this soon to be two part series will cover the "Not so easy way of using @font-face with Blogger" which involves serving font files using Google's App Engine.
No comments:
Post a Comment