search

Wruczek / ts-website

A website for your TeamSpeak 3 server
https://ts.wruczek.tech
GNU General Public License v3.0
337 stars 80 forks source link

Add display swap #179

Closed xopez closed 3 years ago

xopez commented 3 years ago

We should ensure that the text remains visible during webfont load. Further link: https://web.dev/font-display/ This should be also done for font awesome but I didn't find a way to make it with the load of the font. Maybe we should place this in CSS.

Wruczek commented 3 years ago

Thanks for your contribution. For Font Awesome, font-display with any other value than block would be bad, as there is no fallback font to display. Current value on Font Awesome 5.8.2 (used in current TSW) is font-display: auto, which, on Chrome, shows empty squares until the icons are loaded. I see that it has been changed in the latest version (5.15.2) to font-display: block, which is great. Will update the link to CDNJS.

Wruczek commented 3 years ago

I've did some more testing, and font-display: fallback seems like the best setting. With it the content jumps much less on fast connections.

xopez commented 3 years ago

I have also applied that. I think this is the best way around. :)