There are two ways of adding Google Web Fonts to your WordPress site. One of them is using plugins like WP Google Fonts or Easy Google Fonts, but that comes with some limitations. Even if they simplify the integration part, which might give headaches for novices, you won’t be able to use a specific font for just a part of your text without you knowing how to modify the HTML code a bit further. The second option includes modifying some code, but it is easier and also the “right” way and optimized for your site.
First you have to choose what fonts you want for your site by going to the Google Fonts Library. Here you have no less than 422 font families to choose from, which include: Serif, Sans Serif, Display, Handwriting and Monospace fonts. [ADD IMAGE OR LIVE FONTS]
Choose your fonts and add them to “Collection”, then click “Show Collection Only”. This will display your collection, which it’s advised to limit at no more than three fonts. Even if you can install as many fonts as you like to your site, installing more than three might affect the speed of your website.
Once you have them in your collection, click the “Quick Use” button. This will display a code at the bottom of your page. Here is an example for two codes:
Scroll down, copy that code and repeat the process for every font that you desire, then save the codes in a blank document to use for the next step of the installation in WordPress.
Next, go back to your site and open it in an editor to be able to access the code of your theme. Google offers three ways for you to add Google Web Fonts to your website: “Standard”, “@import” and “Javascript”. However, the best way to add your fonts in a performance optimized way is to choose the Standard method. This uses the link method instead of the import method. For this, you have to copy the link of the code that you saved. If you have more than one font, you have to combine them in the same line of the code with the help of “|” character:
You have to add the code as close as possible to the beginning of your theme, for the font file to download faster and this way, for the Internet Explorer to render the page faster. Then, save the file you modified and get back to the main stylesheet CSS file, where you can modify the typography and include your Google Web Fonts. Here, you need to add your font family in a code that looks like this:
h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }}
If you choose this method and you have multiple fonts, it will allow parallel downloads – which means that all the fonts that you added will be downloaded at once – unlike the @import method which a lot of people tend to use. The @import method might seem easier to use, but it is not the right way of doing it because it may cause your site to load more slowly.