Kingdom > Typography

Customizing the fonts

1. Enter the Typography tab.
2. From the Headings list, choose a font for all of your store's titles and call to actions. You can then also change the size for the headings, by choosing a different base size. 
3. From the Body list, choose a font for the general typography of your store. The same, you can choose the base size of the font and also the size of the primary navigation.

Adding your own font

Kingdom theme includes different fonts, as any Shopify theme, that can be selected from the  Theme Customizer > General > Typography (screenshot). But if you decide to use a custom font, there are a few methods to do this:

1. Use the @font-face declaration (add your own font files)

Please start by uploading your new font in Content > Files. The best font file format for compatibility with all browsers is the woff, or even better, woff2 format. 

Open /snippets/head-variables.liquid and right at the top, remove the first 8 lines of code:

{%- assign headings_font = settings.headings_font -%}
{%- assign body_font = settings.body_font -%}

{%- unless headings_font.system? -%}
  <link rel="preload" href="{{ headings_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

{%- unless body_font.system? -%}
  <link rel="preload" href="{{ body_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

Now, go a bit further and identify the place where the current fonts are created, and delete those lines as well:

    echo headings_font | font_face: font_display: 'swap'

    echo body_font | font_face: font_display: 'swap'

    assign body_font_medium = body_font | font_modify: 'weight', '500'
    assign body_font_semibold = body_font | font_modify: 'weight', '600'
    assign body_font_bold = body_font | font_modify: 'weight', '700'
    assign body_font_italic = body_font | font_modify: 'style', 'italic'
    assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'

    if body_font_medium
      echo body_font_medium | font_face: font_display: 'swap'
    endif

    if body_font_semibold
      echo body_font_semibold | font_face: font_display: 'swap'
    endif

    if body_font_bold
      echo body_font_bold | font_face: font_display: 'swap'
    endif

    if body_font_italic
      echo body_font_italic | font_face: font_display: 'swap'
    endif

    if body_font_bold_italic
      echo body_font_bold_italic | font_face: font_display: 'swap'
    endif

Go down to where you see :root, and paste the following code right above that place:

@font-face {
  font-family: "MyFont";
  src: url('Your_font_file_URL') format("woff");
}

Add this declaration for all the fonts that you wish to use (if you want to change two fonts, one for headings, one for body, you'll need to font declarations, with the names you declare. If your font has style variations (italic, bold), you need to add font files for those as well, like this:

@font-face {
  font-family: "MyFont";
  src: url('Your_font_file_URL') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 500;
  src: url('Your_font_file_URL') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 700;
  src: url('Your_font_file_URL') format("woff");
}
@font-face {
  font-family: "MyFont";
  font-weight: 400;
  font-style: italic;
  src: url('Your_font_file_URL') format("woff");
}

Please double check that the font complete URL is used as generated by Shopify when the file is uploaded. The URL will be in this format: https://cdn.shopify.com/s/files/1/0506/9622/0000/files/font_name.woff2?v=1685962551

Now that your font is ready to be loaded, go a bit further down and identify the font variables:

/* Font variables */

--font-stack-headings: {{ headings_font.family }}, {{ headings_font.fallback_families }};
--font-weight-headings: {{ headings_font.weight }};
--font-style-headings: {{ headings_font.style }};

--font-stack-body: {{ body_font.family }}, {{ body_font.fallback_families }};
--font-weight-body: {{ body_font.weight }};
--font-style-body: {{ body_font.style }};

{%- if body_font_medium -%}
  --font-weight-body-medium: 500; 
{%- elsif body_font_semibold %}
  --font-weight-body-medium: 600;
{% elsif body_font_bold %}
  --font-weight-body-medium: 700;
{%- endif -%}

{%- if body_font_semibold -%}
  --font-weight-body-semibold: 600; 
{%- else %}
  --font-weight-body-semibold: 700;
{% endif %}

--font-weight-body-bold: 700;

You'll have to delete this code and hard code your own font stack here, like this:

/* Font variables */

--font-stack-headings: "MyFont", sans-serif;
--font-weight-headings: 400;
--font-style-headings: normal;

--font-stack-body: "MyFont", sans-serif;
--font-weight-body: 400;
--font-weight-body-medium: 500; 
--font-weight-body-semibold: 600; 
--font-weight-body-bold: 700;
--font-style-body: normal;

You can have three different fonts, or use the same font for all typography, just make sure that you add the source files properly for all the fonts that you wish to use.

If you have any issue please again double check that the font name added in the code matches the font name file uploaded on the Shopify server.

2. Use Google Fonts

After you select the font you need to use from Google fonts, a code will be generated for you to insert in the theme ( screenshot). 

Please embed the generated code in the t heme.liquid file, just before the </head> closing tag (screenshot ). 

For example, for the Poiret One font the code generated by Google is:

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

Then go back at STEP 1, and based on your theme version, apply the steps in order for the theme to use your font. Just skip the "@font-face" declaration, but the rest is the same.. You will be using the selected font from Google instead. So in all above examples, where we've used "MyFont", here it will be "Poiret One".