Shopify Question posted in
The Shopify help center can be found here.

Where do I define @font-face in shopify?

I upload some font-related files in assets in Shopify. But I don’t know where and how to define the below code.

@font-face {
    font-family: 'FreeSansBold';
    src: url('FreeSansBold.eot');
    src: url('FreeSansBold.eot?#iefix') format('embedded-opentype'),
        url('FreeSansBold.woff2') format('woff2'),
        url('FreeSansBold.woff') format('woff'),
        url('FreeSansBold.ttf') format('truetype'),
        url('FreeSansBold.svg#FreeSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
Tags:

4

Answers


  1. 0

    create a css file call custom-fonts.css or anything you like

    add the @font-face code you have and declare font-family to the tag

    go to theme.liquid

    find your theme.scss.css or theme.css line and
    put this line after

    {{'custom-fonts.css' | asset_url | styplesheet_tag}}
    Login or Signup to reply.
  2. 0

    Instead of creating a new file and increasing the https count you can directly include the code in theme.css file of your theme

    Login or Signup to reply.
  3. 0

    To reference the font files you need to use the asset_url url filter. You do that by passing the file name to the filter, as below.

    eg.

    
@font-face {
    font-family: 'FreeSansBold';
    src: url("{{ 'FreeSansBold.eot' | asset_url }}");
    // ... repeat for other urls
}

    Please note, this will only work in a file that ends .liquid, eg theme.liquid or fonts.css.liquid.

    Login or Signup to reply.
  4. 0

    using url_filters, fonts were still not loading. So I did few things,

    uploaded all the fonts in settings > Files

    copied the link of the asset
    then I add the below code in my style.css

    @font-face {
    font-family: "xyz";
    src: url('https://cdn.shopify.com/s/files/1/xxxx/xxxx/files/xyz.otf?v=1662111595') format("opentype");
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search