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.
|
<style> @font-face { font-family: “FONT-NAME”; src: url(‘FONTURL-eot’) format(“embedded-opentype”), url(‘FONTURL-woff’) format(“woff”), url(‘FONTURL-woff2’) format(“woff2”), url(‘FONTURL-ttf’) format(“truetype”), url(‘FONTURL-svg’) format(“svg”); } </style> |
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
|
<style> @font-face { font-family: “Precious”; src: url(“https://cdn.shopify.com/s/files/1/0619/0845/1514/files/Precious.woff2?v=1656062661”) format(“woff2”), url(“https://cdn.shopify.com/s/files/1/0619/0845/1514/files/Precious.woff?v=1656062661”) format(“woff”); } </style> |
Also paste the below code before the </script> tag
|
h1,h2,h3,h4,h5,h6,html,body,*,[id] *{ font-family: “Precious” !important; } |
Finally, your code looks like that
|
<style> @font-face { font-family: “Precious”; src: url(“https://cdn.shopify.com/s/files/1/0619/0845/1514/files/Precious.woff2?v=1656062661”) format(“woff2”), url(“https://cdn.shopify.com/s/files/1/0619/0845/1514/files/Precious.woff?v=1656062661”) format(“woff”); } h1,h2,h3,h4,h5,h6,html,body,*,[id] *{ font-family: “Precious” !important; } </style>
|
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.
| {% include ‘custom-fonts’ %} |
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.
