Custom Fonts
We’re introducing custom fonts in Ghost core, allowing users to select heading and body fonts for their themes from a curated list.
This allows publishers to have more control over their brand, and allows your theme to have a wider range of styles to appeal to different audiences.
What does this mean for you?
In order to take advantage of this new feature, you'll need to add support for it in your Ghost themes. Without support, your theme will continue to work as normal, but users won't be able to customize their typography and will see a warning that their theme doesn't support it.
How do custom fonts work in Ghost themes?
Users can select custom fonts for headings and body content in Design settings. We've carefully curated a set of diverse typefaces that should work well across most themes, aiming for quality over quantity of choices.
When a custom font is selected, Ghost loads the font files on the front-end via {{ghost_head}}, and sets up 2 CSS variables that reference them:
<link rel="preconnect" href="https://fonts.bunny.net">
<link rel="stylesheet" href="https://fonts.bunny.net/css?family=fira-mono:400,700|ibm-plex-serif:400,500,600">
<style>
:root {
--gh-font-heading: Fira Mono;
--gh-font-body: IBM Plex Serif;
}
</style>To use custom fonts in your theme, apply the provided variables within your theme's CSS file:
<style>
body {
font-family: var(--gh-font-body);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gh-font-heading);
}
</style>Selected font names are also injected into {{body_class}}, allowing you to optionally fine-tune and make adjustments to any font:
<style>
body.gh-font-heading-ibm-plex-serif h1 {
font-size: 12rem;
line-height: 1.05em;
}
</style>
<body class="gh-font-heading-fira-mono gh-font-body-ibm-plex-serif">
...
</body>You can also set fallbacks to your theme’s own font if custom fonts aren’t set:
<style>
body {
font-family: var(--gh-font-body, Helvetica);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--gh-font-heading, var(--theme-font-heading));
}
</style>Check out the official docs for further information, or any of our official themes (e.g. Source) for example implementations.
When is this change rolling out?
Custom fonts are available right now as a Beta feature, and we aren't releasing it publicly until Friday, 6 December 2024, to give extra time for themes to update ahead of us sharing the change. To turn on Custom fonts go to the Labs section in Ghost.
Questions?
We’d love to hear em! Come on over to chat on the forum.
As always, thank you for all your contributions to the Ghost ecosystem ❤️
