Google has been supplying the community with a large collection of web-based fonts for quite a few years. There are several ways Google allow you to implement these fonts for free on your website. Today I will speak on how to optimize your WordPress website to include Google Fonts using each of these methods.

The Fonts

If you’ve never heard of Google web fonts, then take a long look at the Google Fonts library to better understand what I am referring to. At the time of this writing there are 647 font families available on the website. You can filter by specific categories and font characteristics.

Categories include:

• Serif
• Sans-Serif
• Display
• Handwriting
• Monospace

Characteristics include:

• Thickness
• Slant
• Width

You can also narrow down the type of script (this helps for translation purpose and for alternate stylings)

• Cyrillic
• Cyrillic Extended
• Devanagari
• Greek
• Greek Extended
• Khmer
• Latin
• Latin Extended
• Vietnamese

With a bit of background on the site we can move forward to how to integrate them into your WordPress Website.

Option 1 : Plugins

There are a number of plugins available that offer seamless Google Font integration. Most simply require installation, activation and font selection.

With plugins are there some limitations. While the integration part is easy, the hard part comes when you want specific text on your site to be a font of your choice. A plugin typically won’t know to look for this specific type of text without customizing even further with something like CSS and/or HTML classes. With that aside, here are some notable options for using a plugin to include Google Fonts into your site.

WP Google Fonts

The WP Google Fonts plugin allows you to easily add fonts from the Google Font directory to your WordPress theme. Within the plugin you can customize CSS styles to adapt them to your theme or use your own stylesheet to do the same. This can be acheived either from your admin area or straight inside your website’s stylesheet. This plugin really is all you need to get Google Fonts on your site quickly.

Easy Google Fonts

The Easy Google Fonts plugin adheres to the WordPress novice in that you don’t need to touch any code to get the fonts live on your website. Fonts can be chosen, optimized, given unique colors and styles all with a live preview. Inside the WordPress Customize section you can easily tailor fit the typography of your site.

Option 2: Modify Some Code

If you have built a website before, you may have adopted some standards for implementing stylesheets along the way.

Google provides instructions for embedding their stylesheet links for each and every iteration of its fonts. The instructions and stylesheets work wonderfully on static based websites that don’t utilize WordPress, but fail on WordPress based websites. Don’t worry too much about this as I’ll provide a work around that makes the stylesheet load with little effort from you. I just wanted to establish that getting Google Fonts to work with WordPress is what we are after.

WordPress is a dynamic platform that makes use of code in multiple ways. Rather than authoring every single page of your website you can use WordPress to produce specific templates that get generated automatically.

Why am I explaining this? If you think of how a stylesheet is embedded inside a basic HTML page, it will need to be copy and pasted over and over again to each on every HTML file of your static site. With WordPress this can be automated which we will do with our Google Font stylesheet so it gets injected to each and every page we want.

Finally to the Coding

To do this we first need to get a stylesheet link from Google Fonts. I’ll be using Open Sans for this quick tutorial.

Inside of Google Fonts you’ll want to search for Open Sans and click Add to Collection. Before (or after) this step I’ll mention that you can choose what weights and types of the selected font you would like to make use of on your website. The more variations you use and the number of web fonts you include will weigh in on your website’s speed, so definitely keep this in mind. Google does a good job documenting the load time with their Page Load graphic seen in the image below.

A good rule of thumb with web fonts or any fonts for that matter is to select no more than 3 for the entire website.

I personally never go above two different fonts on a website. With different weights and styles, there’s really no need to use that many different fonts, plus your website will load that much faster.

After selecting the weights and styles of your fonts, scroll down and copy the line of code which looks like this:

You will probably also notice the familiar CSS styling like this:

font-family: 'Open Sans', sans-serif;

We will make use of this when we define some styles in a moment.

Make sure you have copied the first line of code. Then head to your WordPress site and find your theme inside /wp-content/themes/yourtheme. You will need to open up your site in some sort of code editor. You can use any type of editor so long as it suits your needs.

Inside your theme you’ll need to find a file called functions.php. Head to the bottom of the file and add the code you copied for now.

Around that code you’ll need to add this function.

function load_fonts() {
            wp_register_style('et-googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300');
            wp_enqueue_style( 'et-googleFonts');
        }
    add_action('wp_print_styles', 'load_fonts'); 

The function above makes use of `wp_enqueue_style` which is basically just telling WordPress to spit this stylesheet out inside the header of every page of your website. This small chunk of code eliminates the copy and pasting chose I mentioned earlier.

Since I told you to paste the stylesheet you copied from Google you’ll notice that there is a little extra information in which I trimmed off inside the function. You’ll need to do the same thing so that all that’s left is the web link to the actual stylesheet.

Save your file and head to your main stylesheet CSS file. Inside this file you can alter any typography to include your new Google Webfont. To do this you’ll need to add a font-family declaration to the existing CSS. Hear’s an example you can add to test things out:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #000000;
}

Save your CSS file and head to your site. If everything worked like it was supposed to you should now see that your website’s main body copy has been updated. This text could include all un-targeted heading tags, paragraph tags, links, etc…

Since we downloaded both bold and italic variations of the font you can also make use of those using the new Google Font like so.

.italic-text{
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
}

Inside the link we copied from Google are embedded pre configured styles from the stylesheet associated with our font. Rather than having to do extra work, Google does the work for us by letting us use basic CSS alongside our new Google Fonts.

This method works for any font on Google’s Font directory. We used a basic enqueuing function to deliver the necessary styles to every page on our site. This function allows for a super efficient and D.R.Y.(Don’t Repeat Yourself) approach to implementing code into your entire WordPress website.

Option 3: Use Our Themes

Our themes support quite a few fonts from Google automatically. Below you’ll see our new theme Divi 2.0 which makes use of these fonts. Select an option inside the WordPress Customize section of your admin area and you’ll see options to pick from a great selection of fonts. These fonts can be customized for headers and body copy. You can also choose to target specific styles for different scenarios, but this requires some custom CSS as well.

Out of the box our themes are built to be customized to your specific needs. Rather than searching for plugins or diving into unchartered waters with PHP and CSS code, make it easier on yourself with Elegant Themes.

Conclusion

As you can see, there are several ways to make use of the growing library of Google Fonts. Integrating new fonts into a website can improve the experience overall by adding a bit of flare to each and every website out there. In certain situations, Google Fonts aren’t required, but at least now you hopefully know how to make use of this great resource from Google.

Feature image via shutterstock author Crystal Eye Studio

The post How To Use Google Fonts On Your WordPress Website appeared first on Elegant Themes Blog.