How to use Google Fonts on Ghost
Typography is one component of designing a website or newsletter that looks great. I'm not much of a designer, so I can't tell you how to find the best font, but I can help you get a Google Font you like into your Ghost powered website. If you think it's going to be hard, think again.
Typography is one component of designing a website or newsletter that looks great. I'm not much of a designer, so I can't tell you how to find the best font, but I can help you get a Google Font you like into your Ghost powered website. If you think it's going to be hard, think again. This is going to be easy.
Step 1: Pick a font
If you haven't yet found the Google Font you want to use, that's the first thing you need to do. Browse through the site, collect a list of ideas. All you need is the name, including the exact capitalization and spacing. You don't need to download any files.
For the rest of this example, I'll be using Karla, but it's easy to substite my font for of yours. Just change the Karla
text in the code snippets below.
Step 2: Let's copy/paste some code
To make use of the font, we need to put two bits of HTML into the <HEAD>
tag of your website.
The stylesheet <link> tag
First, you need the link tag which will instruct your visitors browsers to download the font. Google makes this easy, and all you need to do is change the name of my font, Karla, to the name of whatever font you want.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karla">
- The URL in the
href
part of the tag can be customized for multiple fonts, different font weights, italics, and lots of other advanced features. Initially you don't need to worry about any of that, but it's good to know you can customize your Google font as needed.
Next we need to write some CSS to instruct web browser of where to use the font.
<style>
html, body {
font-family: 'Karla', sans-serif;
}
</style>
- In this case, we're setting the default font for the whole web page.
- You could also have the font apply to specific DOM ids, only header tags, or something else.
- CSS is quite robust, so the possibilities are endless, but as this isn't a CSS tutorial, let's keep it simple. Look for resources below if you want to further customize how the font is used.
Step 3: Decide how to put the HTML code into your Ghost site
There are two ways to include these code snippets into your Ghost site. You will find complete instructions for both later on. For now, let's discuss the strengths and weaknesses of both options.
- Edit your theme files
Pros: this is arguably the "right" way of doing this kind of work. It's less confusing for anyone else who works on the site theme.
Cons: You have to download your theme, edit the files, upload the theme back to the site, and not break anything in the theme. - Use Ghost's code injection feature
Pros: It's easy to do, change, or revert. It's great for trying out different fonts. It keeps working, even if you change themes.
Cons: It might conflict with your theme. It's also changing how your site looks, which should be the responsibility of the theme. That could be confusing for anyone who works on the site.
Personally, I'm a fan of using code injection to try out changes, then swap over to editing the theme files once I know the changes and font I want to use. It's the best of both worlds.
Option 1: Code Injection
This is the easiest way to try out a new font. It's not risky at all. And it can be done totally within your web browser.

- Within your Ghost admin, browse to
Settings > Code Injection
. You can paste the two snippets of HTML code we wrote before in the Site Header section, like you see above. - If there is any other code there, leave it alone. Add the new code on a new line after the existing code.
- Changed your mind on the font? Change the font name in both places and hit save again. Easy, huh?
- Did something go wrong? Remove the two bits of code we added, but be sure to leave other code that was here at the start in place.
Option 2: Edit your theme
The second option has more steps and could potentially break your site. It's not hard to do, but details will have to wait for another post.
Resources
- Available Google Fonts
- Learn more about controlling fonts in CSS.
- Getting started with Google Fonts.
- New to CSS? It stands for Cascading Style Sheets, and W3 schools has a good introduction to CSS.