Add font-family fallback and optimize font loading

[runofthemillgeek]

Optimized font loading by adding font-display: swap. Additionally, moved font-family values into CSS variables.

[tomfran]

Thank you for this, may I ask you how you selected the fonts in "font-body"? Also, would failing to load Literata fallback on the second, and so on?

[runofthemillgeek]

@tomfran ah, I made an error of using the font stack I was testing out on an example site instead of using something to fallback for Literata. Will update the PR.

Also, would failing to load Literata fallback on the second, and so on?

Yes, it will fallback to the first font available in the stack and based on the usage of font-display: swap, will keep it on that fallback font until the main font is loaded and ready to be swapped.

[tomfran]

I just realized that the menu was using monospace instead of Monaspace, I added a small font size to bring back some consistency in the size, as I saw my personal website changed quite a lot.

I liked better the old monospace font there, completely missed it was another font 😅

[runofthemillgeek]

@tomfran ah, I thought that was a typo (pun intended). btw monospace renders differently across browsers and OS. Better to be specific even if you wanted a different monospace font for menu.

[tomfran]

Yeah it's better to use Monaspace everywhere, at least this was the intention.