Easy Google Fonts for WordPress | Embedding Fonts made easy

Easy Google Fonts for WordPress

The Font Problem

Clients often ask that a web designer use a specific font on their website. The challenge is that unless a website user has that font loaded on their computer a substitute font will be displayed. We are really limited to a small number of web-safe standard fonts. Using an image is one option but that negates any SEO value that text could offer. There is the option of embedding a font using @font-face to use on a website BUT there are browser compatibility issues and you need to be careful about font licensing restrictions.

Here is a great solution from Google that uses open source licensing!

Google Fonts

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. You don’t need to store the font files within your website theme. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Step-by-Step Manual Instructions:

If editing code intimidates you, jump down and read about the Easy Google fonts plugin. You don’t need the plugin if you are comfortable editing the header.php and style.css files of your WordPress child theme.

  1. Go to the Google Web Fonts site and browse for a font you would like to use
  2. When you mouse over the font name an embed font link will appear on the right side – click on the embed “font name” link
  3. Click the plus icon to select the font and follow the instructions
  4. Paste the CSS stylesheet link into the head of your WordPress header.php file directly below your current CSS link. It should look like the example below. Find the first line and paste the second line below.
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link href='http://fonts.googleapis.com/css?family=Judson' rel='stylesheet' type='text/css'>
  5. Now you can use this font in your WordPress theme. Just set the CSS font-family as in the example below
    h1 { font-family: 'Judson', arial, serif; }

A plugin will make this process even easier.

Easy Google Fonts WordPress Plugin

The Easy Google Fonts WordPress plugin simplifies the process. It adds google fonts to any theme without coding and integrates with the WordPress Customizer automatically for a real-time live preview.

Here’s how it works:

Now isn’t that easy?!

4 thoughts on “Easy Google Fonts for WordPress | Embedding Fonts made easy

  1. I love the idea of being able to use open source applications to try something new on the web. I am a little reticent to do it, however. You say it’s easy but it may not be for someone who is not familiar with using FTP. Maybe I need a little help from my friend??

    1. Any time Dawn glad to help. FTP isn’t required although that is how I do it. One could just add the line to the header file and to the CSS file in the WordPress file editor.

      1. I checked out Google’s web fonts and I like the look of some of them. But as in all things, the font change would be site-wide, wouldn’t it?

        1. Yes, the font would be used on the element set in the stylesheet. So if you use the font-family for the H1 it would be used on all your H1 titles throughout the site.

Comments are closed.