How to use custom fonts in Ghost themes

Customizing the fonts on your Ghost blog can significantly enhance its visual appeal and user experience. Custom fonts can give your site a unique look that aligns well with your brand identity.

We already covered some topics like adding Google fonts and self-hosting Google fonts, but in this blog post, we'll guide you on how to add any custom local fonts in Ghost themes.

The main steps for adding custom fonts:

1. Add the font files to your Ghost theme
2. Load the custom font with the @font-face CSS rule
3. Apply the font using the font-family CSS rule

Now, let's go into details for each step.

Add the font files to the your Ghost theme

This is a simple step, you need the theme files and your custom font files. In the theme create a new folder /fonts/ inside the /assets/ folder. To be more practical we will go on with with integrating the Satoshi font.

After downloading the font files we get the web font types, which we will integrate into our theme. The result will be the following and you should have a similar structure with your font:

|__ assets
|   |__ fonts
|      |__Satoshi-Variable.woff
|      |__Satoshi-Variable.woff2
|      |__Satoshi-VariableItalic.woff
|      |__Satoshi-VariableItalic.woff2
|   |__ css
|   |__ js

WOFF2 (and WOFF) are compressed file formats created specifically for web fonts. Although regular OpenType fonts (TTF and OTF files) can be used as web fonts, such usage is not recommended as the files are significantly larger.

As you probably noticed we are using a variable font type, which enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.

Now that we have the font files in the theme we can go on with the next step.

Add the @font-face rules

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

The @font-face rules can be added in it's own CSS file, in an existing one, or in case of Ghost CMS in the Code Injection > Site header. We will go with the Code injection option, as that is the simplest way to do it.

For Satoshi we will add the following CSS in Code Injection > Site header:

<style>
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('/assets/fonts/Satoshi-Variable.woff') format('woff');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('/assets/fonts/Satoshi-VariableItalic.woff') format('woff');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}
</style>

With this step the fonts should be available and the next step is using it for our HTML elements.

Apply the font with the font-family rule

The font-family property specifies the font for an element, and it can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

We will use again the Code Injection feature of Ghost to add the necessary CSS:

<style>
  body { font-family: 'Satoshi'; }
  h1, h2, h3, h4, h5, h6 { font-family: 'Satoshi'; }
</style>

The above CSS will set Satoshi at the body level as well as for all headings. Depending on how specific your theme is in setting font families these rules might need to be adjusted.

<style>
  body * { font-family: 'Satoshi'!important; }
</style>

By following these straightforward steps, you can effectively integrate custom local fonts into your Ghost blog. The Code Injection feature in Ghost streamlines this process, making it easy to create a unique and visually engaging blog, providing a better experience for your readers.