Custom Fonts Not Loading on Windows Chrome but Fine on Mac

Elements Typography
1

Heyooooo…
I installed a custom font that works perfectly on Mac Chrome but doesn’t on Windows Chrome.
My app will run locally so no external style sheet.
This is a sample of the font css in the head:

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

Does this look correct?
Thanks for any advise.

2

Messages%20Image(2952029188)
Messages Image(2952029188).png1070×545 69 KB

Here how I entered the CSS.

3

Most likely it works on the Mac because you have Forza-Bold installed on your machine and it is using the installed variant vs. the file Variant.

I think you should change the font-family field to 'Forza-Bold' instead of 'Forza' since this is what links it to the “CSS Font-Family” name (which can be a fallback list).

The other culprit could be that you haven’t included the font files in the resource library.

If neither of those fix the problem, you’re welcome to attach a zip of the .hype document so we can take a closer look.

2 Likes
4

Hi Jonathan,
I followed your advice with the font-fam names. I also deleted everything I had and readded the fonts, then went through my whole doc and reassign the fonts to the text blocks.
Everything is working…THANKS!

1 Like