How to add Google Fonts to Ghost Themes

Google Fonts is one of the most popular services when it comes to adding custom fonts to websites. In fact, most of our Ghost Themes use Google Fonts.

In this post, you'll learn how to add Google Fonts to Ghost without hurting performance.

Choose the Font

Google Fonts offers a large library of fonts, and you can filter by:

Categories (Serif, Sans Serif, Display, Handwriting, Mono space)
Language (if you want to support language with special characters)
Font Properties (thickness, slant, width)
Variable Fonts

Variable Fonts can significantly reduce the size of your font files and make it possible for one font file to behave like multiple fonts, allowing you to adjust the weight, width and slant of type as you work. For more about Variable Fonts you can read this guide.

After you have selected the font with all the variants, weights and styles, in the Selected Family section you can press Embed and there you should find the code for embedding.

For Roboto with font weights 400, 500, 700 normal and italic the code looks like this:

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

Besides the weight and style of the font, there is one additional property in the link, the display=swap. Font-display currently supports the following range of values auto | block | swap | fallback | optional.

auto - uses the browser default
block - font face has a short block period and an infinite swap period, meaning text is invisible at first (if font is not loaded) and swapped after. This value should only be used if rendering text in a particular typeface is required for the page to be useable.
swap - font face has a zero second block period and an infinite swap period meaning the browser draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads.
fallback - gives the font face an extremely small block period and a short swap period, meaning the font face is rendered with a fallback at first if it’s not loaded, but the font is swapped as soon as it loads.
optional - gives the font face an extremely small block period and a zero second swap period

So display=swap makes sure text is shown immediately using a fallback font, then swapped once the webfont loads. This avoids "Ensure text remains visible during webfont load" warnings.

Ghost Head

Now that we have the embed code, we have to place that in the code. With Ghost CMS this is possible in two ways, we can place it in the default.hbs file of the Ghost Theme or adding it in Ghost Admin, in the Code Injection section.

In the default.hbs, the font link should be added within the <head> </head> section:

<head>
  <!-- Other tags... -->
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
    rel="stylesheet"
  />
</head>

This is the standard approach, but you can improve performance further by adding preconnect to speed up the initial connection.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

After that, include the stylesheet link as usual.

<link rel="preload"> serves as a "hint" to the browser that a given resource is going to be needed soon and it will trigger a request for the Webfont early in the critical rendering path, without having to wait for the CSSOM to be created.

Taking this into account the embed code should look like this:

<head>
  <!-- Other tags... -->
  <link
    rel="preload"
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
    as="font"
    onload="this.onload=null;this.rel='stylesheet'"
  />

  <noscript>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
    />
  </noscript>
</head>

First the tag for preloading is added, as well as the onload event, which means that as soon as this is loaded, it changes the rel to stylesheet.

The noscript tag is a fallback in case Javascript is not available or disabled by the user.

Setup CSS

Now that the font is ready and it is linked, we just have to use it. For this we need to adapt the CSS of the Ghost Theme.

We usually use CSS properties to set Fonts (as well as other things). Global css properties can be defined like this:

:root {
  --font-family-sans: 'Roboto', Arial, sans-serif;
}

With this property defined you can set it for your elements. To set it as the default font for the whole website:

html,
body {
  font-family: var(--font-family-sans);
}

Unless you have some more specific CSS, other elements will inherit this setting, and will use the fonts.

Your Ghost Theme should now have your selected Google Fonts. I hope you find this helpful.

If you're worried about privacy/GDPR and prefer to self-host your fonts, check out our guide about self-hosting Google Fonts in Ghost Themes.

推荐订阅源

Example blog

Choose the Font

Ghost Head

Setup CSS