How to add beautiful free Google Web Fonts to a WordPress theme

Even though content is always kind, it isn’t just about writing anymore. We’re in time of responsive design, HTML5 and CSS3 are a big part of the user experience and making those reader comeback. Besides chances are that your content can also be found elsewhere on the web.

So with this new the new overload information age, how can someone standout from the crow? Like I said at the beginning content is king and that won’t change. But certainly there are a few things you can do to improve your site to keep you readers coming. Adding new free and beautiful web fonts definitely one thing you can do.

There are many services that offers web fonts, but the majority are paid services, a few others are free and Google Web Fonts is one them.

Google Web fonts offer hundreds of font families you can choose from and they are really easy to implement.

To integrate Google Web Fonts to your WordPres site do the following:

1. Visit the Google’s font service here and choose any font you like by clicking the Add to collection button.

2. Click the USE button to access.

3. In the next page, make sure to consider the page load meter, because fonts can really slow down your site, which will translate into a bad experience for the user. Green is good, red I would recommend, you to skip it.

4. Next, scroll down and from the section Add this code to your website, copy the code.

google-web-fonts-wordpress

5. Now the fun part begins:  FTP your site and look for the header.php file from the currently active WordPress theme, download the file and open it with your favorite code editor.

6. Look for <head> tag and right after, paste the font code you grabbed from Google Web Fonts.

google web fonts

7. Upload the header.php file back to your site.

Finally, you need to apply the new font to your content. If you recalled Google also gave you a CSS code (e.g., font-family: ‘Tauri’, sans-serif;). Well, now you have to apply this code to the content you want, for example: on headlines, text, subtitle, quotations, etc.

Because there are many places where you can apply the new fonts, I’ll only be covering how change the font of headlines in a WordPress theme.

1. Once again, FTP your site and look for the Style.css file from the currently active WordPress theme, download the file and open it with your favorite code editor.

2. Do a search for class .post-title and replace the line that starts with font-family and replace it with the line of code from Google Web Fonts (e.g., font-family: ‘Tauri’, sans-serif;). If your theme doesn’t have the class .post-title, look for the class .entry-header or .entry-title.

It should look something like this:

.post-title {
 font-size: 26px;
 margin: 0 0 5px;
 padding: 0;
 font-weight: 100;
 font-family: 'Tauri', sans-serif;
 }

3. Now simply save the file and upload it back to your site and refresh the site.

Voila! Now you have font family to display headlines in an unique.

Leave a Reply