Custom fonts
How to load your own font files or a Google font in Kingdom with code: the font-face rules and the font variables in head-variables.liquid.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
Kingdom's Headings and Body font pickers offer the fonts of Shopify's font library. To use another font, such as your brand font or a Google font, a developer changes one theme file: snippets/head-variables.liquid. This page describes both methods for Kingdom 6.2.0.
Where to find it: Shopify admin → Online Store → Themes → … → Edit code → snippets/head-variables.liquid
Krown support does not provide help with custom code. These steps change theme files; Krown support does not write, review or debug them. Theme updates do not keep conflicting code edits, so you must repeat them after updating Kingdom. See Custom work and code changes.
Before you start
- Duplicate your theme first (Shopify admin → Online Store → Themes → … → Duplicate) and make the changes on the copy. See Edit the theme code.
- Make sure your font license allows use on a website.
- Use the woff2 format, or woff, for the best browser support.
- Note the font settings you use now: after the change, the Headings and Body pickers in Theme settings → Typography no longer change the font. The Base size sliders still work.
Upload your font files
Upload the files
In Shopify admin, open Content → Files and upload the font files, one per weight and style (for example regular, medium, bold and italic). Copy the URL of each file.
Remove the font preloads
Open snippets/head-variables.liquid. At the top, delete the preload block, from {% # theme-check-disable AssetPreload %} to {% # theme-check-enable AssetPreload %} (lines 4 to 12 in Kingdom 6.2.0). It preloads the fonts of the font pickers.
Remove the theme font faces
In the {%- liquid block under <style type="text/css">, delete the two echo headings_font | font_face and echo body_font | font_face lines, and the if body_font_medium … endif blocks that echo the other font faces.
Add your font faces
Right above the line :root {, after the -%} that closes the Liquid block, add one @font-face rule per font file, with the full Shopify URL of the file.
Replace the font variables
Inside :root, under /* Font variables */, replace the --font-stack-*, --font-weight-* and --font-style-* lines with your own font. Keep the three --base-*-size lines.
Save and check
Save the file and preview the theme. Check headings, body text, buttons and bold text.
The @font-face rules, one per weight and style:
@font-face {
font-family: "MyFont";
src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/myfont-regular.woff2?v=1') format("woff2");
}
@font-face {
font-family: "MyFont";
font-weight: 500;
src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/myfont-medium.woff2?v=1') format("woff2");
}
@font-face {
font-family: "MyFont";
font-weight: 700;
src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/myfont-bold.woff2?v=1') format("woff2");
}
@font-face {
font-family: "MyFont";
font-weight: 400;
font-style: italic;
src: url('https://cdn.shopify.com/s/files/1/0000/0000/files/myfont-italic.woff2?v=1') format("woff2");
}The font variables in Kingdom 6.2.0, as they are in the file:
--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;Replace them with your font:
--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-style-body: normal;
--font-weight-body-medium: 500;
--font-weight-body-semibold: 600;
--font-weight-body-bold: 700;You can use one font for everything or a different font for headings and body. Add @font-face rules for every font and weight you name.
If the font does not show, check that the font-family name in the variables matches the name in the @font-face rules exactly, and that each URL is the full file URL from Content → Files.
Use a Google font
Get the embed code
On Google Fonts, select the font and its weights, and copy the <link> embed code it gives you. For example, for Poiret One: <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">.
Add it to theme.liquid
Open layout/theme.liquid and paste the code just before the closing </head> tag.
Change head-variables.liquid
Follow the steps of the first method, without the @font-face rules: remove the preloads and the theme font faces, then replace the font variables. Use the Google font name, for example "Poiret One", sans-serif.
Why does the Headings font picker no longer change the font?
Because the font variables now point at your own font, not at the picker. The Base size sliders still work. To use the pickers again, restore snippets/head-variables.liquid from an unedited copy of Kingdom 6.2.0.
Related pages
- Typography theme settings: the font pickers and sizes.
- Custom CSS and code: other code changes.
- Edit the theme code: how to open and roll back theme files.
Custom CSS and code
Custom CSS and code recipes for Kingdom: a wider product description, a swapped gallery, and an extra product badge, with the risks of code edits.
JavaScript events
The JavaScript events Kingdom fires for cart and variant changes, the refreshCart method for apps, and Shopify standard events support.