When you start building your own website, sooner or later you’ll begin hearing about “Google Fonts.” We know Google seems to be into everything, but what are Google Fonts?

screenshot of Google Fonts

screenshot of Google Fonts

First, let’s review the basics…

What Are Fonts?

Font: “an assortment or set of type or characters all of one style and sometimes one size”

– From the Merriam Webster Dictionary

You see different fonts every day – in newspapers, mailings, websites, books, and magazines. The font style defines the look and feel of the text. It’s an art, and once you start studying fonts, you’ll find it’s a deep subject.

How Are Fonts Different From Typefaces?

You might have heard the term “typeface”, but may not know how it differs from “font”. Typeface refers to the “font-family.” It’s a group of fonts that share common characteristics.

Let me give you an example. “Arial” is a font. “Arial Narrow” is a different font. However, both belong to the same “Arial” typeface (font family). 

Now that we’ve covered the font basics, let’s look at Google Fonts! First, watch this intro video:

 

Google Fonts Are Web Fonts

During the early days of the web, Internet browsers could only display the fonts installed on local computers. As a result, web designers were limited in which fonts they could use. They could only use fonts that the majority of people already had on their computers.

These fonts were called “web-safe fonts”. If designers ventured outside these “web-safe fonts”, the browser would not display the text properly. Typically, these fonts included:

  • Arial
  • Courier New
  • Times New Roman
  • Helvetica
  • Comic Sans
  • Impact
  • Georgia
  • Trebuchet
  • Tahoma
  • Verdana

Boring, right? I’m sure many of us were getting tired of seeing websites with Comic Sans font at one point!

Then came the time of web fonts, which allowed us to start using a variety of fonts on websites – beyond what is installed on computers.

Instead of local computers, web fonts reside on a server. When you access a web page that includes web fonts, those fonts get called up from that server and loaded as the page displays in your browser. This allows you to choose from an endless number of custom web fonts for your website without having to only stick to web-safe fonts!

These are some of the fun fonts you’ll find in Google Fonts:

some google fonts

Google Fonts Are Free

There are different services that offer web fonts. But for most of us, the easiest one to use is Google Fonts.

  • As of April 2021, Google Fonts offer 1052 font families.
  • Google Fonts are open source fonts, and you’re allowed to use them on any website (commercial or personal).
  • Google Fonts load fast!
  • Many modern WordPress themes already have Google Fonts built-in.
  • You can download these fonts to your local computer. That means you can use them not only for your websites but also for documents that you create on your computer.

How to Use Google Fonts for Your WordPress Site

1. Your theme might already have them.

As mentioned above, more and more themes these days come with many of the fonts offered via Google Fonts. If you find the fonts you want among those, there is nothing else you need to do!

For example, I use Elegant Themes’ Divi theme* for this site, and Divi modules let you access cool Google Fonts right out of the box, without you having to do extra work to connect your site and Google Fonts.

If you are interested, check out Divi and Divi Extra (The theme that I’m using that includes Google Fonts) below:

the divi themeDivi Theme
the extra themeDivi Extra Theme

 

However, if you want to access Google Fonts that did not come with your theme, or if your theme hasn’t been integrated with Google Fonts, read on…

2. Use a WordPress Plugin to Add Google Fonts to Your Website

There are several plugins that let you easily use Google Fonts in your WordPress site. Here are a few you may want to check out:

Easy Google Fonts

easy google fonts

This plugin lets you add Google Fonts to your WordPress site easily without having to deal with codes. One cool feature of the plugin is that it lets you preview the fonts in your WordPress Customizer, making it easy to play with different fonts to determine which ones work well with the look of your site.

Fonts Plugin – Google Fonts Typography

google fonts for wordpress

This plugin also allows you to easily incorporate Google Fonts into your website and lets you preview the fonts in your Customizer. As the features are very similar to the Easy Google Fonts plugin, I recommend checking out both and picking the one you find easier to use.

3. Manually Bring in Google Fonts to Your Website

I don’t recommend this method to non-techies as it involves having to deal with “codes,” but if you are willing to do that, or if you’d like to understand how Google Fonts work, please check out this page.

Other Font Resources

Here are some other resources that are helpful when working with fonts:

WhatFont

screenshot of whatfont

Allows you to identify the fonts used on a web page. Available as a Chrome Extension and an app for iOS.

WhatTheFont

screenshot of whatthefont

Upload an image of the font, and this tool will tell you which font is used. They also offer a handy mobile App that identifies the fonts from the pictures you take.

Fonts can totally change the look and feel of your website. Take your creativity to the next level by using these fun Google Fonts in your WordPress site!

 

 

*Disclosure: Some of the links in this post are affiliate links. And if clicked and purchased, we may receive a small compensation for the recommendation.

Print Friendly, PDF & Email