How to Self-Host Google Fonts in Ghost CMS

Google Fonts are widely used nowadays, many Ghost Themes have such fonts integrated by default and this can be an issue because Google Fonts is subject to GDPR regulations (General Data Protection Regulation).

A German court recently found that websites that have embedded Google Fonts violate GDPR because when a font is requested by the user’s browser, the user’s IP address is recorded by Google and used for analytical purposes.

To be GDPR compliant, you have several options:

• stop using Google Fonts altogether
• self-host the fonts

In the next part, we will focus on the second option and the steps you have to do, to use Google fonts in GDPR compliant manner (self-host) in your Ghost Theme.

1. Remove google font requests
2. Download the font files
3. Generate the CSS rules
4. Integrate the font files and CSS rules

Remove google font requests

Generally, to add google fonts you have to add the following code (example with the Inter font):

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
  rel="stylesheet"
/>

To avoid any outgoing requests towards the Google servers, you have to look for this code and remove it from your template. The most common place where this is placed is in the default.hbs file, but if it's not there, try searching within the theme directory for fonts.g

After you removed the <link> elements you can double-check in DevTools that there are no outgoing requests, by going to the Network tab and the Font section.

Download the font files

After the previous step is done, and your website doesn't have requests towards the google servers, you should see the fallback fonts loaded instead, which in most cases will be browser fonts.

If you still want to retain the same look and feel, you have to self-host the fonts. You have to download the font files and add them to your theme. Fonts can be downloaded following the steps below (or do it via google-webfonts-helper, see next chapter for more details)

• Go to fonts.google.com
• Search for the font family you want to download
• Select the styles (font weights)
• Finally, press Download all to get the zip file

After downloading, you have to place the font files in your Ghost theme. The ideal place would be in the assets/fonts directory, if the fonts directory doesn't exist you can create it.

When all this is done, you are ready to self-host the fonts.

Generate the CSS rules

When using custom fonts, you must define the @font-face rules, which specify a custom font with which to display text. The default Google fonts integration handles this automatically, but in case you want to self-host you have to do it yourself.

Luckily there is a handy tool (google-webfonts-helper) that generates these rules for us (see the github project). The process is done in several steps:

1. Select charsets (default is latin)
2. Select style (font weights)
3. Copy CSS (modern browsers is enough in most cases)
4. Download files (as mentioned previously the files have to be placed in the assets directory)

One important aspect is the option to change the directory prefix before generating the CSS rules.

Integrate the font files and CSS rules

As already mentioned, the font files have to be placed within the theme (ideally in the assets/fonts directory). When this is done, the last step is adding the CSS.

CSS can be added either into a CSS file or directly using the Code Injection area available in Ghost Admin. Let's see an example.

Assuming we want to integrate the Inter font, after selecting the styles and downloading the font files, we have the following in the /assets/fonts directory:

• inter-v8-lating-700.woff
• inter-v8-lating-700.woff2
• inter-v8-lating-800.woff
• inter-v8-lating-800.woff2
• inter-v8-lating-regular.woff
• inter-v8-lating-regular.woff2

And the following CSS rules:

/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('/assets/fonts/inter-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('/assets/fonts/inter-v8-latin-regular.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('/assets/fonts/inter-v8-latin-700.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('/assets/fonts/inter-v8-latin-700.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-800 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: local(''), url('/assets/fonts/inter-v8-latin-800.woff2') format('woff2'),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url('/assets/fonts/inter-v8-latin-800.woff') format('woff');
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Add the font rules, inside <style> tag in Code Injection. Now that this is done, the only thing remaining is making sure the website uses the correct font. This may vary based on how it is set in your theme, but adding the following rule in code injection should work:

body * {
  font-family: 'Inter';
}

That's it, you are now self-hosting google fonts within your Ghost theme.