Ghost Tips & Tricks #6 / Change Casper Theme Fonts Using Google Fonts

Hello everyone,

This is the sixth issue of Ghost Tips & Tricks. I will be happy to share with you some practical Ghost tips that I find useful. Brought to you by Aspire Themes .


In this tutorial, I will show you how to change the fonts of the Casper theme using Google Fonts.

The Casper theme is using two different fonts:

  • Georgia for the post content and excerpts.

  • UI System Fonts for everything else.

Suppose you want to use the Roboto Google font instead of the theme UI System Fonts.

In your Ghost admin, using Code Injection Site Header section, embed the font code given from Google Fonts as follows.

<link href='https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap' rel='stylesheet'>

You can select different font styles depending on your needs. In this example, I selected the 300 and the 700 weights.

The next step is to assign the Roboto font to the body element using CSS as follows.

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

The Code Injection area will look similar to the below screenshot.

Change the Font of a Specific Element

If you want to change the font of a specific element, you need to get the class name of that element. You can use the browser development tools to do that.

You can use Chrome DevTools or Firefox Developer Tools. To open the DevTools, right-click on an element on the page and select Inspect, then the Elements panel will open. Also, you can press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS) to open the Elements panel.

Then, you can get the element CSS selector class, in our case, the post excerpt class .post-card-excerpt and you can assign the new font to it as follows.

<style>
  .post-card-excerpt { font-family: 'Roboto', sans-serif; }
</style>

To move around the web page elements or to go to a more specific element class, you can click the Inspect icon to select an element on the page.

If you want to set the font size for an element, you can use the CSS font-size property to do that. For example, to set the font family and font size for the previous example, you can do something like the following.


<style>
  .post-card-excerpt { font-size: 16px; }
</style>

To wrap all the code we have done so far, it could look like the following in Code Injection.


<link href='https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap' rel='stylesheet'>

<style>
.body { font-family: 'Roboto', sans-serif; }

.post-card-excerpt {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}
</style>

Don’t worry if you didn’t grasp how the CSS code works at first. If you are curious to learn more, I would recommend the Learn web development resource by Mozilla.


That’s it for today and I hope you find this useful…

Checkout previous parts of the Ghost Tips & Tricks series:


Also, I started a Ghost Websites Inspiration series share inspiring websites created with Ghost. I hope you can find it inspiring and useful too.

Stay safe!

Ahmad

3 Likes

This is terrific Ahmad, thank you. Out of curiosity: are there any disantvantages in changing fonts this way vs modifiying the theme template directly? In terms of speed or performance or so?

1 Like

Awesome @ahmadajmi. You are the master of explaining…

Cheers!

1 Like

My pleasure, Max! It’s a faster regarding implementation to use this from Google than hosting it locally in the theme but there are some options to speed it up. Would recommend this article https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

1 Like

Thank you!

1 Like

This is so helpful. I was looking for this for some time. Thank you so much!

1 Like

Pleasure!