Add custom fonts
A guide to add custom fonts to your store
In the theme-building process, sometimes you want to use your own font style instead of the options provided by Zest. In this article, you will learn how to do that quickly and efficiently.
First, you need to have the custom-font file on your local device.
You need to own an files of the font
Then, in Shopify admin, you go to Files > Upload file
Shopify admin => Files => Upload file
After selecting the file and uploading it, choose the ( 
) button to copy the URL of your uploaded font.
Click the button to get the font url
Visit your Shopify admin again, go to Themes > Edit code > open assets/custom.css file.
Access to the assets/custom.css file
Copy and paste this CSS code into the file.
@font-face{
font-family: Name of font ;
src : url( font-url );
}
For example:
@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
}
If you want your font to be bolder, you can use
font-weight: bold@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
font-weight: bold;
}
If your font is italic, you can use
font-style: italic@font-face{
font-family: SofiaSans;
src : url(https://cdn.shopify.com/s/files/1/0642/0565/2198/files/SofiaSans-Regular.ttf?v=167393855 );
font-weight: bold;
font-style: italic;
}
We have a list of variables that are applied to the entire theme including the heading and body.
For body text:
--font-body-family--font-body-style--font-body-weight
For heading:
--font-heading-family--font-heading-style--font-heading-weight
If you want to apply the font for the body, add this CSS code to the custom.css file:
:root
{
--font-body-family : font-name;
--font-body-style : font-style;
--font-body-weight : font-weight;
}
For example:
:root
{
--font-body-family : SofiaSans;
--font-body-style : italic;
--font-body-weight : bold;
}
If you want to apply the font for the heading, add this CSS code to the custom.css file:
:root
{
--font-heading-family : font-name;
--font-heading-style : font-style;
--font-heading-weight : font-weight;
}
For example:
:root
{
--font-heading-family : SofiaSans
--font-heading-style : italic;
--font-heading-weight : bold;
}
Then, click Save and check the result.
Last modified 6d ago