Several text styles not rendering in header image about github-profile-header-generator

[kattni]

Tangentially related: I wrote a guide on creating an excellent GitHub profile, and highlighted your tool. I wanted to share once it went live. Thank you for putting this together!

[kattni]

@leviarista Fixed for me! Thank you so much for being responsive to this. I really appreciate all the info. Cheers!

[leviarista]

Hi @kattni, thanks for reporting this issue.

So let me explain how font loading works:
The Red Hat Display and Kalam fonts are loaded by default on the page, but the other fonts are loaded dynamically.
If that font already exists on your machine, the tool will use it (that's why some fonts like Arial work for you normally), but if the font doesn't exist, the tool will load it from the assets.

It is possible that your browser is blocking this fonts loading, or maybe some kind of blocking extension, also this could be related to the OS.

Would you mind sharing this info please?:

• Your Operatiing System
• Browser
• Any relevant extension installed?
• If possible, a screenshot of your browser console will help.

And thank you so much for using the tool , your GH header looks great! 😊.

[kattni]

I'll do what I can.

Your Operating System

MacOS 12.1 (21C52)

Browser

Firefox 102.0.1 (64-bit)

Any relevant extension installed?

AdBlock Plus, HTTPS Everywhere, uBlock Origin (There are others, but they don't seem relevant.)

If possible, a screenshot of your browser console will help.

I attempted this, but it's not showing anything. So either I'm looking in the wrong place, or it's not posting anything to the console.

Hopefully this helps!

[leviarista]

Hey! thank you very much for sharing the tool! I really appreciate it 🤗.

Firefox 102.0.1 (64-bit)

And thanks for sharing that info, I've been testing and that font change doesn't work right in Firefox but I'll be working on it and let you know when it's fixed.

Thnaks again for reporting the issue!

[leviarista]

Hey @kattni, issue fixed!

Just to let you know, this was because I'm using the FontFaceSet.check method to check if the font exists, but it returns true for unkown fonts in Firefox, and returns false in Chrome.

So I removed that checking and now it works in Firefox.

That problem has already been reported here, and it's because Firefox is following the draft version of the W3C standard and Chrome is following the TR version of the W3C standard.

And here is the description of the method, you can check the second special case that is related to what happened.