search

cawolfkreo / Cease-and-Desist-History-Big-N

Visit the website: https://www.suedbynintendo.com/
MIT License
9 stars 1 forks source link

Change the fonts used for the regular text in order to improve loading times :rage3: #50

Open cawolfkreo opened 2 years ago

cawolfkreo commented 2 years ago

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 (every JS, 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:

  1. We remove the Mark font and we use a different sans-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.
  2. We manually "trim" the Mark font, it's packages and the stylesheet. 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.
  3. We look for a different font that can be used for personal projects like we did with Mark and we store it in the repository the same way we did with the Pretendo font. The downside here is that we might spend too much time looking for fonts similar to Mark (they don't need to be exactly the same, a simple sans-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 the Mark 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!

AirSayy commented 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

cawolfkreo commented 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! 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:

  1. Just remove the Mark font and use some other font that we hope users have in their devices (like Arial or tahoma or something).
  2. We modify the ./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.
  3. We look for some other publicly available font with the corresponding font file, we download it, we credit the owner of the font and we added to the website. We'd have a single font file that holds our font and we can load it from the main css file (we already do that for the Pretendo font).
AirSayy commented 2 years ago

Have you tried hosting it someplace else and also suggestions 1 and 2 seems doable...

cawolfkreo commented 2 years ago

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.