How to add Google Fonts to your website
Reading Time: 2 minutes
Picking fonts to use on your website can be hard enough, but once you’ve chosen Google Fonts, you may be left confused about how to use them on your site.
Google offers three options to make the fonts available on your site: Standard, @import and Javascript. For each one, I recommend creating a child theme if you haven’t done so already.
Option 1: Standard
Open your child theme’s header.php and add the code, which is similar to this:
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>between the <head> and </head> tags.
Option 2: @import
Open your child theme’s style.css and add the css code:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);immediately below the comments declaring what theme it is and such.
Option 3: Javascript
Open your child theme’s header.php and add the code between the <head> and </head> tags.
So, which is the best way to add Google Fonts to your site?
The standard way to include web fonts will have the least impact on the speed of your site. On slow connections though, visitors to your site may see the so-called Flash of Unstyled Text (FOUT), your text will show in a different font, then switch to your Google font once that has loaded.
The @import way will prevent that but may slow down your site because it’ll wait for the font to load, then show the content.
The Javascript code is part of the WebFont Loader, which is a Javascript library developed by Google and Typekit that will give you more control over font loading. It’s unlikely you need the kind of control the Javascript code provides and it’s more complex than you’d probably like.
Standard is standard for a reason. It’s most likely the best way for you to include the fonts on your website. It’s better for visitors on slow connections to be able to at least see & read the content, than to have them wait longer until the included font has loaded.
That said, it’s always a good idea to optimize your site to make it load as fast as it possibly can. With regard to Google Fonts, this means:
1. Combine multiple fonts into one request.
You can do so with the pipe character “|”. So, instead of:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">write:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Lobster">2. Don’t load fonts you don’t use.
This may seem obvious, but if you don’t actually use a font, don’t include it. Some browsers only load the font files needed to render the text on the page, but others will load all fonts included, which will slow down your site.
Actually using the font on your site
So far, we’ve actually only added the fonts to be able to use them, but they won’t show up until you tell them where to show up.
Open your theme’s style.css and add the css code:
font-family: 'Open Sans', sans-serif;to the elements you want to use the font for. This could be the body tag, if you want to use it on all or most text on your site:
body {
font-family: 'Open Sans', sans-serif;
}Or if you want to use it just on headings, you can add it like this:
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
}Save the files you’ve edited and upload to your site.
You may also like to use your chosen Google fonts in your images, to make them match the rest of your site.
I'm Anouska
I help you create & sell digital products, so your business keeps working even when you rest.
Everything you need to do for a launch – without burning yourself out before enrollment opens
Prepare for your course launch using my free Course Launch Planner & Checklist.
It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.
I will NEVER sell or share your email address. You must be 16 or over.
Get the free
Course Launch Planner & Checklist
It'll help you create a plan, stop wasting time googling and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch!
Everything you need to do for a launch – without burning yourself out before enrollment opens
Prepare for your course launch using my free Course Launch Planner & Checklist.
It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.
I will NEVER sell or share your email address. You must be 16 or over.
You may also like…
Everything you need to do for a launch – without burning yourself out before enrollment opens
Prepare for your course launch using my free Course Launch Planner & Checklist.
It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.
Everything you need to do for a launch – without burning yourself out before enrollment opens
Prepare for your course launch using my free Course Launch Planner & Checklist.
It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.
I will NEVER sell or share your email address. You must be 16 or over.
Everything you need to do for a launch – without burning yourself out before enrollment opens
Prepare for your course launch using my free Course Launch Planner & Checklist.
It'll help you create a plan, stop wasting time googling, and avoid missing any of the million moving pieces so you can feel prepared & confident about your launch.
I will NEVER sell or share your email address. You must be 16 or over.