Shopify provides hundreds of free font option, also there are many font apps are available in shopify app store. However If these option don’t satisfy you, Still there is a way you can add your own custom font to your store. In this post you will see how you can apply your font to your store.
Follow these steps:
- Download the font you want to add to your Shopify store. normally, each font will include 4 font files:
- .woff / woff2
- .ttf / otf
- .eot
- .svg
- From Shopify Admin go to Online Store > Themes > Actions > Edit Code
- Under the Assets section select Add a new asset and upload font files one by one
- Open your theme’s CSS file. In most themes, this is called theme.scss.liquid / style.css.liquid
- Add the following codes to the file at the bottom:
|
1 2 3 4 5 6 7 8 9 10 11 |
@font-face { font-family: 'fontName'; src: url('{{ "fontName.woff" | asset_url }}') format("woff"), url('{{ "fontName.woff2" | asset_url }}') format("woff2"); src: url('{{ "fontName.eot" | asset_url }}'), url('{{ "fontName.eot" | asset_url }} ?#iefix') format("embedded-opentype"), url('{{ "fontName.ttf" | asset_url }}') format("truetype"), url('{{ "fontName.svg" | asset_url }} #FontName') format("svg"); font-weight: normal; font-style: normal; } |
If you would like to use that font for headings, you can add this to the bottom of the file:
|
1 |
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FontName' !important; } |
- Save the file . You’re all done.
