Tech

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.

Scott Swezey

Mar 31, 2021 • 3 min read

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.

Screen shot of the Ghost admin code injection UI, with a link and style tag necessary to use the Google Font "Karla" throughout the website.

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.