Google Fonts is an amazing resource for both web designers and bloggers. It allows you to register any font from the google fonts database into your website, and then you can edit your CSS in your WordPress editor to change the font family property to the font you chose.

There are a few different ways to add google fonts to your website – Plugins, the import method, the link method, the enqueuing method, and javascript (javascript is not covered here in this post). Before we dive into all that, the first thing you need to do is choose a font you like! This is the fun part.

Choosing a Font

Navigate to the google fonts directory. When you find a font you like, you can either click the quick use button, or add it to your collection if you plan to add multiple fonts.

Tip: Adding a font to your collection will merge the code for all the fonts in your collection when it’s time to add it to your website. This decreases load time and keeps things organized.

fonts

Click the image below to get a free .PDF listing my favorite google fonts and the code for each one!

pinterest-image-template-2

Adding the Font to Your Website

Capture

There are two steps to adding the font to your site.

  1. Add the code – In the above image (you’ll see this page after you click quick add), you’ll see the three different codes you can add to your site. Standard (links), import, and Javascript (this post won’t cover the javascript method). We’ll go over each of these. Or you can just use a plugin, which I will also go over.
  2.  Add the CSS – There is the code to integrate the font into your CSS (see image above) – just add it to whatever selector you want to in your stylesheet. For example:

.widget-title {

font-family: ‘Open Sans’, sans-serif;

}

The Methods of Adding Fonts

1. Plugins

By far the easiest way to add google fonts to your website is by using plugins. Here are some good plugins to check out:

2. Standard (Link) Method

This is the recommened way to add fonts.

standard

  1. Go to your functions.php file by navigating to Appearance > Editor.
  2. Paste the following code at the end of the functions editor:
     function load_fonts() {
                wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha');
                wp_enqueue_style( 'googleFonts');
            }
        
        add_action('wp_print_styles', 'load_fonts');
  3. Replace the bolded link with the link google gave you.

3. Import Method

import

I use the import method because it’s quick and easy  to implement, but if you have too many registered fonts using this method it can slow down your site’s load time. I only register two fonts on my site at the most, so it doesn’t affect the load time.

  1. Copy the import code that google gives you for your chosen font.
  2. Navigate to Appearance > Editor > Stylesheet
  3. Past the code at the top of your stylesheet – just after the theme’s information (theme name, theme author, theme URI, etc.)

And there you have it, google fonts on your WordPress site!

 

Pin It on Pinterest

Share This