Upload custom font in Shopify

[deubza]

Hello,

I would like to import my own custom font to my theme but it seems like it’s impossible.

After watched on the web, the theme is not compatible so I need a dev to help me out.

Thank you very much

[Foster]

Hi,

Sorry for the late response.

If you want to add your own fonts in the theme you need to do a little bit of CSS tweaking.

1. Start by uploading your new font into the assets folder of the theme. Please make sure that you upload all proper formats, namely eot, woff, ttf & svg. These are all required for perfect browser compatibility.
2. After you’ve done this, open the theme’s main stylesheet, /assets/claue.scss.liquid file. Insert the new font face declaration of your new font (screenshot). Here’s an example:

   @font-face {
   font-family: "MyFont";
   src: url('{{ "font_myfont.eot" | asset_url }}');
   src: url('{{ "font_myfont.eot" | asset_url }} ?#iefix') format("embedded-opentype"),
   url('{{ "font_myfont.woff" | asset_url }}') format("woff"),
   url('{{ "font_myfont.ttf" | asset_url }}') format("truetype"),
   url('{{ "font_myfont.svg" | asset_url }} #myfont') format("svg");
   }

3. Add such declaration for all the fonts that you might want to include. Next, you have to change the font variables, from the settings value to your own value. Let’s say what you want to use this new font as a headings font – you’ll have to change the this original theme code (Line 5-9)

   $font-body: MyFont;
   $font-body-weight: new_font_weight;
   $font-body-size: {{ settings.body_font_size }};
   $font-heading: MyFont;
   $font-heading-weight: new_font_weight;

[deubza]

Very helpful, thank you very much !

[Author]

Posts