Installing Custom Fonts in Ghost Themes

This one is pretty easy to accomplish, even for a CSS newbie like myself. So I'll keep it short.

I'll assume you're using a theme like Ghost's Starter Theme. Follow the installation steps on their repository. Create a fonts folder inside of assets. Copy or move your font files into that directory.

$ pwd
/starter-theme/assets

$ mkdir fonts && cd fonts
$ mv BerkeleyMonoTrial-Regular.otf ./fonts/.

If you have multiple font formats, make sure to include those. They might be .off, .ttf, .woff, etc. Next, we need to define the font as a CSS rule. Assuming you want the font to change for your entire site, open the file assets/css/vars.css in your favorite editor. Add the following @font-family rule above the :root pseudo-class.

@font-face {
    font-family: 'Berkeley Mono Trial';
    src: url('../fonts/BerkeleyMonoTrial-Regular.otf') format('opentype'),
         url('../fonts/BerkeleyMonoTrial-Regular.ttf') format('truetype');
}

:root {

    /* Colours */
    --color-primary: var(--ghost-accent-color, #3eb0ef);
    --color-base: #131313;
    --color-border: #ddd;
    --color-bg: #f5f5f5;
    --color-success: #80b912;
    --color-error: #f05230;

Note that you have to navigate up a directory to reach the fonts directory. Additionally, make sure to change the name of the font to match the filename of the font you put in the fonts directory. You can add multiple formats separated by a comma as I've done in the example above. This will ensure browser compatibility. I happened to use the Berkeley Mono font from Berkeley Graphics. Make sure to check the terms of your license!

Now that we've defined the font, we need to tell the template to use it that font. This will take place in the relevant CSS files. I recommend greping or searching for font-family in the existing CSS files to see where the fonts are defined in each element. One example is in /Users/sean/Developer/break-theme/assets/css/components/global.css. Modify the font-family value to the name of your font as defined in the @font-face rule. Mine is 'Berkeley Mono Trial'. It would look like this:

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #464646;
    font-family: 'Berkeley Mono Trial'; /* Modify here. */
    font-size: 1.5rem;

Reload your site, and the changes should take effect! Here's the before and after:

If this helps, please consider commenting or subscribing. I would love to know what you think. This article, and others, are available for free at seandeaton.com and on Medium.