How to apply custom font to the Taiga theme

Store Design
, ,
1

Hello, for my website I am trying to apply the custom open source Google font Bellefair Regular

I downloaded the .ttf file from Google at https://fonts.google.com/download/next-steps, uploaded to my assets folder, then I put this at the beginning of the snippets/css-settings-and-variables.liquid file

@font-face { font-family: 'Bellefair-Regular'; src: url('{{ 'Bellefair-Regular.ttf' | asset_url }}'); /* Add additional font formats here if necessary */ }

and then I changed coding as follows:

/* Typography - Base/Body */
–font-body-family: ‘Bellefair-Regular’, {{ settings.base_font.fallback_families }};
–font-body-style: {{ settings.base_font.style }};
–font-body-weight: {{ settings.base_font.weight }};
–font-body-line-height: {{ settings.base_line_height }};
–font-body-letter-spacing: {{ settings.base_letter_spacing | times: letter_spacing_multiplier | append: ‘em’ }};
–font-body-text-transform: none;

/* Typography - Heading/Titles */
–font-heading-family: ‘Bellefair-Regular’, {{ settings.header_font.fallback_families }};
–font-heading-style: {{ settings.header_font.style }};

However, my website is still displaying the same old font, not Bellefair-Regular.

Any ideas what I am doing wrong?

Thanks for any help! Will

2

A link to your store would be helpful.

One guess though – font files may become corrupted when uploaded to Assets. There was a bunch of cases here in forums. Check your browser console and try using Files instead.

Also, .ttf is not the most universal font file format…