Oddbean new post about | logout
 Btw I never use Google Fonts on the websites I make. 

1. I always look for an OFL licensed font on https://www.fontsquirrel.com/.

2. Download it and use their web font generator (https://www.fontsquirrel.com/tools/webfont-generator) to compile the css and WOFF/2 fonts for selfhosting.

3. Then adjust the paths and file names slightly and upload it to the web server.

And now a pro tipp:

Use only a custom font for headings. Leave the body text in the CSS set to default. How does that work?

Simply use the CSS instruction:

body { font-family: sans-serif; }

Or serif, if you like. Then the browser will always choose the OS' default sans serif font on the website. Every OS (Win, Mac OS, Andoid, iOS, Linux etc) has a default sans serif font in it, which is normally a well-designed, readable font.

You have to let go of the idea of always displaying the same font on all systems. It is enough to use the best font on each system.

This saves loading time, is an adequate choice in 95% of cases and all have approximately the same size ratio. So the 16px size of the default Windows font is also about the same size as that of the Mac. Just a little different.

nostr:note144fhf7hr0v9tdtvu4ysjzppl382zj0sm3h9f5mz3yhaany4x0hnqptfxrv