How to Change a Ghost Theme Font Using Google Fonts

In this new tutorial, I will show you how to change a Ghost theme’s font using a Google Fonts font with CSS. The following is an example of using the Encode Sans font to change the body and the logo font. You can use the same way to change the font of any element.

In Ghost Admin, open Code Injection → Site Header. Add the code from Google Fonts. Then use CSS to assign the font to the body. The result depends on how the theme applies fonts.

<link href='https://fonts.googleapis.com/css?family=Encode+Sans:300&display=swap' rel='stylesheet'>

<style>
  body {
    font-family: 'Encode Sans', sans-serif;
  }
</style>

Change the Font of a Specific Element

To change one element’s font, find its class name with the browser’s developer tools. You can use Google Chrome DevTools in the Chrome browser.

Open the developer tools by right-clicking an element and choosing Inspect. You can also press Command+Option+C on macOS or Control+Shift+C on Windows, Linux, or ChromeOS.

Find the element’s CSS class. For this logo, it is .c-logo__link. Assign the font to that class:

<style>
  .c-logo__link {
    font-family: 'Encode Sans', sans-serif;
  }
</style>

Use the CSS font-size property to change an element’s text size. This example sets both the font family and font size:

<style>
  .c-logo__link {
    font-family: 'Encode Sans', sans-serif;
    font-size: 16px;
  }
</style>