Google recently put out 18 free fonts online on their Google Font Directory. Google put out an API with detailed instructions on how to embed any of those fonts in your website (more info here). Most of the fonts are pretty bland, and intended for body copy, but I hope to see Google expand on these fonts in the future.
I wanted to test drive the fonts on my blog. Here’s what I did:
1) Go to the editor.
Log in to the backend, and from the dashboard go to Appearances>Editor. You should be able to see the code of the theme you currently have active. Look on the right sidebar for “header.php”. Click on it.
2) Edit the header.
Open up a new tab and navigate over to Google’s Font Directory, and click on the font you want to use. Select the tab that says “Get the code”. It should look something like this:
You’ll find two boxes — one containing the code to insert into the HTML, and the other one contains the CSS rules. Copy the text from the first box.
Switch back over to the header.php editor, and paste your code right before the closing </head> tag. This is because certain themes might have conditional statements, and if you happen to put in the CSS inside one of those statements, you run the risk of not having it load.
Notice that I have multiple font names there. If you want to add more than one font, add a pipe character | , and then type out the font of the second font, using plus symbols (+) instead of spaces. Do this for each new font you want to add.
3) Edit the CSS
Go back to the Google Font Directory tab, and copy the code from the second box. These are the CSS rules.
Open up your theme’s CSS in another tab (so far you’ve got three tabs open). Note that the styles might not be kept in “style.php”. For example, with the theme I’m using, the styles are kept in “css.php”.
Since all the fonts were previously loaded in the header, you only have to plug in the font that you want for that particular CSS class or id. Don’t worry about using plus signs (+) here, just use spaces like normal when declaring the fonts.
And that’s it!
[...] attention I research about it. I also like to learn how to work with new software. There are tutorials across the web and in magazines and books that help me to do this, it takes my mind on a simple [...]