π‘
We do not provide support for code customizations
If you are not comfortable making code changes, we highly recommend hiring an expert developer.
Summary
π‘ Tip: Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.
We rely on Shopify's Font Picker to provide a font selection for your store. To access these settings go to Theme settings > Typography.
Installing a font not available in the default selection will involve making some code customizations.
Adding a custom font
Prepare your font files
Please ensure you have a valid license to use the font you are trying to install
Download your font in webfont file types such as
.woff2
or.woff
If you don't have a webfont version of your font, you can use a generator to convert it. Font Squirrel has a tool you can use for this.
Upload font files to your store
Once you have your webfont files you can upload them to your Shopify admin.
Open your Shopify adding and navigate to Content > Files
Upload each file for your font
Edit theme code
Open up the theme editor and select
theme__styles.liquid
from within the snippets folderAdd the below code after the
{% style %}
tag. Be sure to replaceMY_FONT
with your font name and ensure the URLs are correctly linking to your uploaded font.@font-face {
font-family: "MY_FONT";
src: url('{{ "MY_FONT.woff2" | file_url }}') format("woff2"),
url('{{ "MY_FONT.woff" | file_url }}') format("woff");
}From here you can include your font by updating the below code inside the same file. The variables
--type-font-body-family
,--type-font-header-family
and--type-font-nav-family
control the font family used for body, headings and navigation text.--type-font-body-family: {{ settings.type_font_body.family }}, {{ settings.type_font_body.fallback_families }};
--type-font-body-style: {{ settings.type_font_body.style }};
--type-font-body-weight: {{ settings.type_font_body.weight }};
--type-font-header-family: {{ settings.type_font_heading.family }}, {{ settings.type_font_heading.fallback_families }};
--type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }};
--type-font-nav-family: {{ settings.type_font_nav.family }}, {{ settings.type_font_nav.fallback_families }};The updated code should look something like this
--type-font-body-family: 'MY_FONT';
--type-font-body-style: {{ settings.type_font_body.style }};
--type-font-body-weight: {{ settings.type_font_body.weight }};
--type-font-header-family: 'MY_FONT';
--type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }};
--type-font-nav-family: 'MY_FONT';