Fonts

Choose between Ghost’s native font options and the font sets prepared for this theme.

Ghost’s native font options may vary in size and style because they are designed for many themes. Try a few combinations and choose the one that best fits your site.

1. Go to the 'Design & branding' settings in the Ghost Admin.
2. Open the 'Brand' tab, then find the 'Typography' position.
3. Choose an option from the dropdown menu.
4. Click 'Save' to activate.

The theme also includes curated Google Font sets. They are bundled with the theme, so no connection to Google servers is made. These sets are tuned for the theme’s proportions and visual style.

For performance, the bundled fonts include only Latin and Latin-Ext character sets. If you need another language set, use the custom font method below.

You can also choose 'System fonts' for the best performance.

1. Go to the 'Design & branding' settings in the Ghost Admin.
2. Open the 'Theme' tab and go to the 'Site-wide' section, then find the 'Fonts' position.
3. Choose an option from the dropdown menu.
4. Click 'Save' to activate.

Set 'Typography' to 'Theme default' before using the theme’s custom Fonts setting.

1. Generate your font code on Google Fonts (not GDPR-compliant) or Bunny Fonts (GDPR-compliant).
2. Go to the 'Code injection' settings in the Ghost Admin and paste the font code into 'Site header'. For example, Roboto uses:

<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=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=roboto:400,400i,700,700i" rel="stylesheet">

Next, add a <style> block that defines your chosen font:

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

If you want to use two fonts, define the additional variables as needed:

<style>
:root {
	--font-family-display: 'Inter', sans-serif;
	--font-family-heading: 'Inter', sans-serif;
	--font-family-subheading: 'Inter', sans-serif;
	--font-family-body: 'Roboto', sans-serif;
}
</style>

1. Click 'Save' to activate.