Warning: This guide follows a code customization process, and therefore does not fall under the scope of our support team. If you have any issues implementing these code changes, please seek an expert's help.
To ensure that your font is correctly displayed regardless of which browser your customers are using, we recommend uploading your custom font in all four of the following files types:
.eot
.woff
.ttf
.svg
Within your Shopify admin, go to Online Store > Themes.
Go to the theme you are working with.
Click Actions, and select Edit code from the drop-down menu.
Once you have opened your code editor, you can then upload your font as a new asset.
Within your theme code editor, open Assets.
Select Add a new asset.
Click Choose file, and select a font file to upload.
Select Upload asset.
The title of your theme's stylesheet varies based on which version of the theme you have - it exists within your Assets folder, and will be named one of the following options:
timber.scss.liquid
theme.scss.liquid
custom.css
Under Assets, locate your stylesheet.
Find an empty line and add the code snippet below.
Replace the "Font" label with your font title.
Replace the placeholder font files with the names of your font files.
@font-face {font-family: "Font";src: url('{{ "font.eot" | asset_url }}');src: url('{{ "font.eot" | asset_url }} ?#iefix') format("embedded-opentype"),url('{{ "font.woff" | asset_url }}') format("woff"),url('{{ "font.ttf" | asset_url }}') format("truetype"),url('{{ "font.svg" | asset_url }} #myfont') format("svg");}
Now that your font files have been uploaded and referenced within your theme's stylesheet, you can implement this font into your theme's code as you wish.
Note: As your uploaded font files are not native to the theme, your custom font will not appear within your Typography settings. If you wish to apply your custom font to your storefront, you must add this to your theme's stylesheet manually.
Email our friendly support team with your query: [email protected].
So that we can best help, please ensure you provide key details including:
What your query is about
Which theme you are using
Your .myshopify.com URL
Your .myshopify.com password (if the shop is locked for visiting customers)
Any screenshots that may help us resolve your query as quickly as possible.