Skip to main content

Google fonts

The theme offers the flexibility to incorporate Google Fonts or other font libraries. You can choose to set two different fonts for titles and body text or use the same font for both throughout your site.

Obtain the embed code

  1. Visit fonts.google.com & and choose your preferred font.
  2. Click the "Get embed code" button to obtain the embed code for the selected font.

Get-Google-fonts-embed-code-ghostcave-miyus.jpg

Configure the font with Ghost

To configure the font:

  1. Navigate to 'Code injections' settings in the Ghost Admin.
  2. Locate the "Site header" tab on the left-hand side of the interface.
  3. Copy and paste the "Embed code in the <head> of your html" code from Google fonts.
  4. Copy and paste the following code underneath the embed code.
  5. Change the "Font Name Here" value accordingly with "CSS class for a variable style" from Google fonts.
<style>
  :root{
    --body-font:"Font Name Here", sans-serif;
  }
</style>

configure-google-fonts-with-Ghost-code-injections-ghostcave-miyus.jpg

Optional: Set a different Title font

Alternatively, you can specify a distinct font for titles and another for remaining text.

  1. Select your preferred font on Google fonts.
  2. Copy and paste the new "Embed code in the <head> of your html" code from Google fonts in to the "Site header" section in Ghost.

    Important: When selecting multiple fonts, Google Fonts regenerates the embed code for the header. Ensure that you copy and paste the latest version of the embed code.

  3. Add the --title-font variable along with your new title font name as follows.
<style>
  :root{
    --body-font:"Font Name Here", sans-serif;
    --title-font: "Font Name Here", serif;
  }
</style>

configure-google-fonts-with-Ghost-code-injections-fot-title-ghostcave-miyus.jpg

Back to top