Google fonts
Achieve a unique brand identity by manually injecting custom typography from Google Fonts or other external libraries.
While the Miyus theme supports Ghost's native typography options, you can manually inject any external library from Google Fonts to achieve a specific visual signature.
Native Alternative
Before proceeding, check out Ghost's Native Custom Fonts option which may be simpler for standard branding needs.
1. Obtain the Embed Code
Visit fonts.google.com and select your preferred font family.
Select the weights you need and click the Get embed code button.
2. Configure in Ghost
Navigate to the Code injections settings in Ghost Admin.
In the Site header section, paste the <link> or @import code you copied from Google.
Directly below the embed code, paste the following styling block.
Replace "Font Name Here" with the actual CSS class name provided by Google.
<style>
:root {
--body-font: "Font Name Here", sans-serif;
}
</style>
3. Setting a Separate Title Font (Optional)
You can specify a distinct font for headings and another for the body text for a more dynamic editorial look.
Important
When selecting multiple fonts, Google Fonts regenerates a single unified embed code. Ensure you copy the latest version from their panel to include all font families in one payload.
Select your second font on Google Fonts and copy the updated embed code.
Add the --title-font variable to your style block as shown below.
<style>
:root {
--body-font: "Body Font Name", sans-serif;
--title-font: "Title Font Name", serif;
}
</style>