How to apply custom font to the Taiga theme

[will70]

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

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

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

[tim]

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...