Home Forums Themes Support Claue-Shopify Upload custom font in Shopify

Topic Resolution: Resolved

This topic contains 2 replies, has 2 voices, and was last updated by  deubza 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23928

    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

    #23945

    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 eotwoffttf & 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;
    #23950

    Very helpful, thank you very much !

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Upload custom font in Shopify’ is closed to new replies.