Skip to content
Make Your Ghost Blog Beautiful & Make It Fast & Accessible With the New Ghost Theme: Nubia 😍 🎉

How to Change a Ghost Theme Font Using Google Fonts


You can use custom CSS code to change the font of any element. The following is an example of how to use the Encode Sans font from Google Fonts to change the body and the logo font.

In your Ghost admin, using Code Injection Site Header section, embed the font code from Google Fonts and then assign the font to the body.

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

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

Code Inection Site Header section code to Change a Font in Ghost Theme

If you want to change the font of a specific element, you can use the browser development tools, for example, Google Chrome DevTools.

Open the DevTools by right-clicking an element on the page and select Inspect and the Elements panel will open. Also, you can press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

Google Chrome Dev Tools Inspect

Google Chrome Dev Tools

Then, you can get the element CSS selector class, in our case, the logo class .c-logo__link and you can assign the new font to at as following.

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

👋 Looking for Ghost Hosting?

Try Ghost free for 14 days on a fully managed Ghost(Pro) infrastructure.

Try Ghost Pro


Get a Minimal and Faster Blog Theme

Premium blog themes for WordPress, Ghost, and Jekyll. Trusted by 1400+ happy customers

Browse Themes
superhero