Custom fonts
Custom fonts in Local: add your own font files or a Google font with code, when the Shopify font library in Typography is not enough.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
Krown support does not provide help with custom code. Local's Font family settings offer the fonts of the Shopify font library only (Theme settings → Typography). This page is for developers who add another font to the theme code, either from your own font files or from Google Fonts. The steps were checked against snippets/head-variables.liquid in Local 4.2.1.
These are edits to a theme file. A theme update replaces snippets/head-variables.liquid, so you must make them again after each update. Duplicate the theme before you start.
Adding your own font files
Use the WOFF2 format (or WOFF) for the best browser support. You need one file per style you use: regular, bold, italic.
Upload the font files
In Shopify admin → Content → Files, upload the font files and copy the link of each one.
Open the variables snippet
In Shopify admin → Online Store → Themes → … → Edit code, open snippets/head-variables.liquid.
Remove the font preloads
Near the top of the file, delete the two blocks that preload the Shopify fonts:
{%- unless headings_font.system? -%}
{% # theme-check-disable AssetPreload %}<link rel="preload" href="{{ headings_font | font_url }}" as="font" type="font/woff2" crossorigin>{% # theme-check-enable AssetPreload %}
{%- endunless -%}
{%- unless body_font.system? -%}
{% # theme-check-disable AssetPreload %}<link rel="preload" href="{{ body_font | font_url }}" as="font" type="font/woff2" crossorigin>{% # theme-check-enable AssetPreload %}
{%- endunless -%}Keep the two assign lines above them: the rest of the file still uses body_font.
Remove the Shopify font faces
Just below, inside the first <style type="text/css">, delete the echo … font_face lines of the fonts you replace, from this block:
{%- liquid
echo headings_font | font_face: font_display: 'swap'
echo body_font | font_face: font_display: 'swap'
assign body_font_bold = body_font | font_modify: 'weight', '+100'
if body_font_bold == blank
assign body_font_bold = body_font | font_modify: 'weight', '700'
endif
echo body_font_bold | font_face: font_display: 'swap'
assign body_font_italic = body_font | font_modify: 'style', 'italic'
if body_font_italic
echo body_font_italic | font_face: font_display: 'swap'
endif
-%}Declare your font
Right after <style type="text/css">, add one @font-face declaration per font file, with your own name and file link:
@font-face {
font-family: "MyFont";
src: url("Your_font_link_URL") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}Repeat it for the bold and italic files, with their font-weight and font-style.
Point the theme variables to your font
Further down, in the second <style> block under /* Font variables */, replace the heading and body font lines:
--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 }};with your own font stack:
--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-bold: 700;
--font-style-body: normal;Then delete the {%- if body_font_bold -%} … {%- endif -%} lines that set --font-weight-body-bold, so your value is the only one. Keep the --font-weight-buttons and --font-weight-menu lines: they follow Typography → Buttons font weight and Menus → Font weight.
Save and check
Select Save and open your store. Check headings, body text, buttons and menus in several browsers.
You can use two fonts (one for headings, one for body) or one font for everything. Declare every file you use.
Using a Google font
Get the embed code
On Google Fonts, select the font and its styles and copy the <link> embed code, for example <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">.
Add it to the layout
Open layout/theme.liquid in the code editor and paste the code just before the closing </head> tag.
Follow the font file steps, without @font-face
Do the steps of "Adding your own font files" from "Remove the font preloads" on, but skip "Declare your font": Google's code loads the font. Use the Google font name in the variables, for example "Poiret One", sans-serif.
Why does my custom font disappear after an update?
Because the update replaced snippets/head-variables.liquid and layout/theme.liquid with the new version's files. Make the edits again in the updated theme, or ask your developer to. Keep a copy of your changes for that.
Related pages
- Typography theme settings: the fonts available without code.
- Custom CSS and code: where code can go, and what survives an update.
- Custom work and code changes: who to contact when a change needs code.
Code tweaks
Code tweaks for Local: CSS to remove footer link underlines and enlarge the logo, more icons in the Icons list, and more custom badges.
Hide purchase buttons when local pickup is not available
A Local code tweak that hides the buy buttons when the product is not available at the store the customer selected.