Ad

How To Add Custom Font In Shopify Site

- 1 answer

I have added font code

    @font-face {   font-family: 'Gotham-Book';   src:url('{{ "Gotham-Book.eot" | asset_url }}');   src:url('{{ "Gotham-Book.eot"
    | asset_url }}#iefix') format('embedded-opentype'),
    url('{{ "Gotham-Book.woff" | asset_url }}') format('woff'),
    url('{{ "Gotham-Book.ttf" | asset_url }}') format('truetype'),
    url('{{ "Gotham-Book.svg | asset_url }}#Gotham-Book') format('svg');      font-weight: normal;   font-style: normal; }

Also uploaded the font files in Assets Folder.

Question: How to use font for all headings, My theme using sass variables,

Ad

Answer

Upload font files in assets folder

If your font has multiple files, you will have to repeat this process for each one.

enter image description here

Link The Fonts In Your CSS

Open your theme’s CSS file. In most themes, this is called theme.scss.liquid

@font-face {
    font-family: 'your-font';
    src: url('./your-font.eot');
    src: url('./your-font.eot?#iefix') format('embedded-opentype'),
         url('./your-font.woff2') format('woff2'),
         url('./your-font.woff') format('woff'),
         url('./your-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Replace font-family in your theme.scss.liquid

Ad
source: stackoverflow.com
Ad