How to use Google Fonts
With just a very small knowledge of HTML and CSS you can now use beautiful fonts on your site without resorting to images. Go to Google Fonts web site and choose the font you would like to use out the list of “Grumpy wizards”. You can add a font to your collection, see a list of all styles (some fonts), get information about the font in a pop-up or click on the “quick-use” button to get the code you need to add the font to your site. You will come to the page pictured below by either clicking on the the quick-use button or by clicking on the use button in collections.
At the top right hand side of the page is a gage that indicates the effect the font will have on the speed of page download. Choose a font with a low number, preferably in the green so that it will not have a significant effect on page loading.
Next, choose the weight of the font. If you are going to use the font only for heading you can choose a bold version of the font.
Then choose the character sets you want to use. This will usually be “Latin”
In section 3 there is a piece of code. Copy this piece of code and place it in the head of your page.
If you are using WordPress, open the dashboard and choose Appearance and then choose Editor at the bottom of the drop-down menu. Choose the Header file from the list of files on the right hand side of the page. Place the code above the closing </head> tag.
The last bit of code illustrates how to add the font to the css selector.
If you want your chosen font to apply to all second level headers, open your css file (in WordPress it is usually called style.css) find your h2 selector and add the code to it. For example
h2 {
fond-family: 'Merriweather', serif;
}
Now whenever you use a second level header it will display in your choose Google Font.