Custom Google Fonts for Ghost

Replace your Ghost theme’s default fonts with any Google Font. This snippet loads fonts efficiently with font-display: swap to prevent layout shifts and invisible text during loading.

The Code

Paste this into your Ghost site’s Settings → Code injection → Site header:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;
  }

  body {
    font-family: var(--font-sans);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
  }
</style>

How to Install

1. Go to fonts.google.com and select your desired fonts
2. Click “Get embed code” and copy the <link> tags
3. In Ghost Admin, go to Settings → Code injection
4. Paste the <link> tags and <style> block into the Site header section
5. Click Save

The example above uses Inter for body text and Playfair Display for headings — a classic sans-serif/serif pairing that works well for editorial content. Replace these with your chosen fonts.

Performance note: Loading two fonts with two weights each adds roughly 60-120 KB to your page. This is acceptable for most sites, but avoid loading more than 3 font families or 6 total weights — the performance cost outweighs the design benefit.

How It Works

The <link rel="preconnect"> tags establish early connections to Google’s font servers, reducing latency. The display=swap parameter in the font URL tells the browser to show text immediately in a fallback font, then swap to the custom font once it loads. This prevents the “flash of invisible text” (FOIT) that harms user experience and Core Web Vitals scores.

CSS custom properties (--font-sans and --font-serif) make it easy to adjust fonts in one place. The fallback font stack (-apple-system, BlinkMacSystemFont, sans-serif) ensures readable text on every device, even before the custom font loads.

Customization

Use a single font for everything: Remove the serif font and apply the sans-serif to headings too:

body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

Change font weights: Modify the wght@ parameter in the Google Fonts URL. For example, Inter:wght@400;700 loads only regular and bold weights (faster loading). Adding more weights like 300;400;500;600;700 gives you more flexibility but increases load time — each additional weight adds roughly 10-30 KB depending on the font. For most sites, two weights per font (regular + bold, i.e., 400 and 700) is sufficient. Use 500 or 600 instead of 700 if you want a softer bold.

Use a self-hosted font instead of Google Fonts: If you prefer not to use Google’s CDN (for privacy or GDPR compliance), download the font files and host them in your theme. Use @font-face declarations instead of the Google Fonts <link>:

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-regular.woff2') format('woff2');
}

Note: self-hosted fonts require modifying your theme’s files, not just code injection.