How to Add Custom Fonts to Your Ghost Cms Theme

by

Adding custom fonts to your Ghost CMS theme can significantly enhance the visual appeal and branding of your website. While Ghost doesn’t have a built-in font management system like some other platforms, you can easily incorporate custom fonts by editing your theme’s code. This guide will walk you through the process step-by-step.

Step 1: Choose Your Fonts

Start by selecting the fonts you want to use. Popular sources include Google Fonts, Adobe Fonts, or self-hosted fonts. For this example, we’ll use Google Fonts because of its ease of use and wide selection.

Navigate to your Ghost theme folder. Locate the default.hbs or header.hbs file, depending on your theme structure. Insert the Google Fonts link inside the <head> section:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Step 3: Update Your CSS

Next, add CSS rules to apply the new fonts. Find your theme’s stylesheet, usually assets/css/style.css, and add font-family declarations. For example:

body {
  font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

Step 4: Save and Preview

After editing your theme files, save the changes. Upload the updated theme to your Ghost site if necessary. Refresh your website to see the new fonts in action. Clear your browser cache if the fonts don’t appear immediately.

Additional Tips

  • Always back up your theme files before making changes.
  • Use browser developer tools to test font-family settings live.
  • Consider creating a child theme or custom CSS file to keep your modifications organized.
  • Ensure your chosen fonts are optimized for web use to improve load times.

By following these steps, you can customize your Ghost CMS theme with any font you prefer, enhancing your site’s uniqueness and readability.