Blog Detail

• Aug 03, 2022

How To Add Custom Font In Shopify

Most of the Shopify themes are used default font you can easily find any theme font and change them on the customization page. 

In Shopify font library is a collection of fonts that includes system fonts, google fonts, and some licensed fonts from Monotype. and this font is free to use on all the Shopify stores, but some font has a licensing issue that's why Shopify can't include them.

Here we show you how to add a custom font in Shopify, don’t worry – no coding knowledge is required, but for more thorough customizations of how to style each specific HTML element with your font of choice, you may need some familiarity with HTML/CSS.

It s not easy to add customized font because any mistake makes your theme structure

The first thing that we have to do is to add the fonts to the Shopify store

From your Shopify admin, navigate to Settings > Files.

Upload the font you download, different browser support different extension, Font files are the ones that have the following extensions: .ttf, .woff,.woff2, .eot, .svg or .otf. here we show you off and woff2 font.

Make sure that font files are with zipcode and must have at list one .ttf format. you can extract it and use .ttf or convert them into a different file format and use it.

Once you have uploaded all of your font files, then time to connect them to the theme.

Lets start with Shopify admin > online store > themes > Actions > Edit code

In the left sidebar search the snippet folder and create a new snippet file named with custom-fonts.liquid

Universal code for all the extensions but here we want only just .ttf format.

in the above code, you can modify it according to your font.

FONT-NAME": Precious < name of the font you want to add>

FONTURL: here we have the .ttf file format file < https://cdn.shopify.com/s/files/1/0619/0845/1514/files/Cairo.zip?v=1656052390 > copy this from the file where you upload the font

look like that

Also paste the below code before the </script> tag

 Finally, your code looks like that

Finally, the custom snippet is created and pasted this code in the custom-fonts.liquid file

After that Navigate to the theme.liquid file 

and paste the below code before the </body> tag.

Here, we try the PRECIOUS FONT. you try to add SCRIPTING font and JASMINE font and check it how s looks like your theme fonts.