Why are WebFonts not working on mobile browsers

HTML-CSS
1

On the site attached I have a few webfonts that are used. Site

On typical desktop browsers like firefox, chredge and chrome does the text ‘sites for creatives’ show up in the custom font. I have used @font-face to link the font files the code is below:

@font-face {
font-family: 'Freight Text';
src: url('_includes\assets\type\freighttext-bookitalic_4-webfont.woff2') format('woff2'),
     url('_includes\assets\type\freighttext-bookitalic_4-webfont.woff2') format('woff');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'Freight Text Bold';
src: url('_includes\assets\type\freighttext-bolditalic_4-webfont.woff2') format('woff2'),
     url('_includes\assets\type\freighttext-bolditalic_4-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Now here is the weird part:

Even when I delete the @font-face, on desktop browsers the custom font still shows up somehow. Even though the fonts have not been linked or imported in any way.

My goal is to get the fonts working on mobile browsers and figure out why the fonts aren’t working.

If you need anymore info e.g. git-repo I’ll be happy to provide.

cheers

2

They’ll not be working in any browser except your own, and it’ll be working there because the fonts are installed in your computer. It can’t load the fonts because they’re on a different domain to the site: if you look at the error messages that appear in the console, that’s what they’re saying (Cross-Origin Request Blocked). You are trying to load them on a Netlify URL from what I assume is your site, which is a different domain entirely.