[FIXED] How to add custom font in shopify site

Issue

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,

Solution

Upload font files in assets folder

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

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

Answered By - Varsha Dhadge

Answer Checked By - Katrina (PHPFixing Volunteer)