Google Fonts offer 809 free and open source font families to help you better design any project. Google allows you to test your content with your selected font and to easily embed it into your project.

In this article, we walk you through selecting a Google Font, adding it to your WordPress website and styling it.

There are a couple of different methods to embed your font. Use a plugin like “WP Google Fonts” but for optimal performance we recommend embedding the link into the <head> of your document. Read on to learn how!

1. Selecting your Google Fonts

First, let’s select a font-family you like. Google Fonts provides you with the option to select between 5 different typefaces which are Serif, Sans-Serif, Display, Handwriting and Monospace.

The Difference Between Typefaces:

Serif

Serif fonts are defined by the small feet tailing from the letters or symbols.

San-Serif

Sans-serif literally meaning without ‘serif’ – characters do not have small feet at the end of each stroke.

Display

Display type refers to the use of type at large sizes and are considered useful at display sizes (30px and above).

Handwriting

Handwritten fonts are usually used for design purposes at they attract the eye and stand out more in comparison to other typefaces.
Note: Shouldn’t be used for paragraphs as it is difficult to read.

Monospace

Monospace fonts are characters that occupy the same amount of space horizontally.

2. Embedding Google Fonts into WordPress

To embed your selected fonts into a WordPress site, copy the code provided in ‘Your Selection’ under the “Standard” option.

Google Fonts

Your link will look something like this:

<link href=”https://fonts.googleapis.com/css?family=Merriweather+Sans” rel=”stylesheet”>

You’ll want to link to the font family in the head of your document. Usually, in WordPress it’ll be in your header.php file (dependent on your theme). Login to wp-admin and in the dashboard of your WordPress site under Appearance > click Editor.

WordPress Dashboard: wp-admin

<head>

/*–paste link here–*/

<link href=”https://fonts.googleapis.com/css?family=Merriweather+Sans” rel=”stylesheet”>

< /head>

Tip: The hierarchy of your links matter so make sure you paste this at the very bottom (if you have other links) but still within the section.

3. Styling with your Google Font

Now navigate to your stylesheet and copy and paste the code from Google Fonts for your styles into your stylesheet.

Google Fonts - CSS

Depending on what you want to use the specific font for, set your font-family for that specific property.

For example:

h1 {
font-family:’Kaushan Script’, cursive;
font-size:30px;
}

p {
font-family:’Merriweather’, serif;
/*–Serif Font–*/
}

Which will result in:

This is my H1 in the typeface of Handwriting, font-family Kaushan Script

This is my paragraph text in the typeface Serif, font-family Merriweather.

And just like that, you’ll have your font from Google embedded into your WordPress website!

What’s your favorite font-family on Google Fonts? Tweet us at @intuitionnet and let us know.

Thanks for reading!

 


Suggested Links:

Posted on October 26th, 2016  and last modified on November 14th, 2016.