• Skip to primary navigation
  • Skip to main content
  • Skip to footer
amethyst website design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials Fonts

How to Use Google Web Fonts in Your WordPress Website

September 5, 2012 Updated on December 13, 2018 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

WP Google Fonts WordPress plugin for Google web fonts

It’s easy to use Google web fonts in your WordPress website. Google currently has over 500 free fonts in their web fonts library. There are all types from classic to handwritten with lots to choose from in between.

The easiest way to use Google fonts in your WordPress website is to use a plugin. I tried several, but the one I found easiest to use that allowed selection from all the current Google fonts is WP Google Fonts by Adrian Hanft. Go to your WordPress Dashboard, click Plugins, Add New, and search for it. Install and activate it.

Above is a screen shot of the theme changes we’ve been making to the Twenty Ten theme with the Josefin Sans font used for headings. The original Twenty Ten fonts are standard Helvetica Neue, Arial, Helvetica fonts; see the image at the bottom of this post. So let’s get started.

How to Use WP Google Fonts Plugin

In your dashboard, find Google Fonts under Settings. Clicking on it opens this screen.

Settings page for WP Google Fonts to add Josefin Sans

We want to change the website title, the post and page titles, and the sidebar widget titles. First you want to choose the font from the drop down. I choose Josefin Sans, but Sail, and Great Vibes are nice cursive fonts, and Osborn and Open Sans are alternative sans serif fonts, that would work well in a theme too.

Then check Headline tags (h1, h2, h3); save it, and view your website. For some themes, this may change all the fonts, but for others, like Twenty Ten, we have to edit the CSS too.

CSS for Using Google Web Fonts in your WordPress Theme

Here’s the CSS code that was used to edit the page titles and change their color:

#site-title a, 
.entry-title, 
.entry-title a, 
.widget-title, 
#site-description {
     font-family: 'Josefin Sans', sans-serif; 
     color: #f680bf !important; 
}

So let’s break the code down. The CSS selectors are the labels for each title; see the image below.

#site-title a
.entry-title
.entry-title a
.widget-title
#site-description

font-family: calls the name of the Google font that you chose to use. Put it in quotes; you can also add a fall-back font – sans-serif.
color: calls the name of the font color we chose – #f680bf .

This CSS code will work with many other themes, as well. You can use Color Scheme Designer to help choose a color for fonts for your website theme. You want to use a color in RGB format, as in the code above.

The following image shows the original text for the Twenty Ten theme; it’s been labeled to show you the CSS selector names for the titles of the theme that the code changes.
WordPress Twenty Ten with default fonts labeled with CSS elements
The color change refers to all the areas listed. The “a” after some of the elements means that the change affects a link. For this first edit, we kept the weight of the fonts (bold in some places) and the sizes of the fonts the same as the original Twenty Ten theme. We would probably want to vary these and change some more of the link colors too.
WP Google Font allows for up to 6 fonts to be added or changed. Six is a lot though; each font called takes time to load on the web page.
The WordPress Jetpack plugin allows for custom CSS now, so we’ll use it to make more changes to our theme. That’s coming next!

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Cara Ranieri says

    Marcy,
    Thanks for sharing your knowledge and experience!
    Your posts are so very useful.

    Reply
    • Marcy Diaz says

      You’re welcome, Cara; I’m glad the posts are helpful!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!