Open cawolfkreo opened 2 years ago
Hello Cawolfkreo, just read through your issue and i did a quick research of what may be the problem. This link on stackoverflow may help fix your issue. Here is the link https://stackoverflow.com/questions/12251805/font-face-is-causing-slow-load-times
Hello Cawolfkreo, just read through your issue and i did a quick research of what may be the problem. This link on stackoverflow may help fix your issue. Here is the link https://stackoverflow.com/questions/12251805/font-face-is-causing-slow-load-times
Hello! Welcome to the project. The suggestions on the Stackoverflow threads seem reasonable, BUT the problem is somewhat different from the issue in that question. We have 88 font files that are being loaded as soon as the ./fonts/Mark/stylesheet.css
loads. Since that css file was made by some third party it loads the fonts right away. Since I'm using github pages for hosting, I cannot modify the headers and the only pre-fetch or preload I can do is on the css file, not the 88 font files. This means that the problem is still there! I already pre-fetch the styles (I followed the suggestions from this stackoverflow question: https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously). Now we don't need those 88 font files, we need ~2 of them, since I'm only using the bold and the normal font. The way I see it I can see three possible solutions:
./fonts/Mark/stylesheet.css
so that it loads the two font faces we need or it load the fonts in a more performant way, but this feels tedious and might be too much work.Pretendo
font).Have you tried hosting it someplace else and also suggestions 1 and 2 seems doable...
Sorry I took a while to reply, I was somewhat busy over the last few days.
Have you tried hosting it someplace else I don't plan on changing the hosting provider. This is a static website and Github pages works really well for my case.
and also suggestions 1 and 2 seems doable... They do seem doable, but I'm worried it might take too much time to do or we change to some system font that exist in Windows or MacOs but then some Linux users might not have it. I could try to change the
Mark
font CSS this weekend and see if that's good enough.
Description
the fonts CSS loads sooooooooooooo slooooooooooooow. A friend of mine suggested the
Mark
font and it looks great! but the font package has too many fonts for us and it makes the website have a slow first load. Browser cache does help but I think it's better to make this simpler. I don't want the website to load external sources (everyJS
,CSS
,whatever
file we need should exist in this repository) so any solution here should NOT include an external resource that we link to our page. I see a few solutions to the problem here:Mark
font and we use a differentsans-serif
font. The big downside is that the website might look slightly different for different OS or browsers since they might not have the same fonts. Which is quite undesirable.Mark
font, it's packages and thestylesheet
. This looks like it would be too much time consumig! Yes we probably only use one or two fonts from the Mark folder, but manually looking for which ones, removing the rest and then updating the included CSS sounds really tedious.Mark
and we store it in the repository the same way we did with thePretendo
font. The downside here is that we might spend too much time looking for fonts similar toMark
(they don't need to be exactly the same, a simplesans-serif
with a good weight should do) and if we find one good font, we might need to also check that it doesn't include a bunch of files like theMark
font does.I think it's a good idea to discuss about this. If anyone wants to suggest other alternatives or wants to give more reasons for the ones described here, feel free to do so!