Quick Tips to make your fonts look well considered

• Serif fonts for body text. San serif fonts only for headers. It’s easier to read lots of text with serif fonts.
• Check that the font you’re using has specific italics, and that you’ve enabled them, so computers won’t try to “help” by autogenerating something that looks not quite right.
• If you’re using multiple languages on a single page, see if you can find a single font that has both character sets. Alternatively, put the two fonts you’re using next to each other and see if you like how they look together.

Font Pairing Examples

• Google Fonts Typography
• Beautiful Web Type

Sites where you can find free fonts.

• Font Squirrel
  Font Squirrel also has an excellent tool for converting any fonts you already have in different formats into .woff and .woff2 files for use on the web. Check the licensing of your font so no one gets in legal trouble.
• Font Library
• Google Fonts
• Yatra is a Devanagari and Latin display font based on the hand-painted signage of the Mumbai Railways. It’s fucking gorgeous. And available on google fonts.

Locally hosting fonts

Don’t like google? No problem! It’s best practice to self-host your web fonts anyways.
Check CSS Wizardry's Cache Control for Civilians if you want more detail on caching.

Interneting is Hard's tutorial has another set of directions on how to locally host WOFF files. There’s also a brief history of web fonts, and some beginner-level text alignment stuff further down.

Selected MDN articles

• Web Fonts
• OpenType Fonts Guide
  OpenType is what lets you use ligatures and other neat stuff, if your font has them. I’m a little bit in love.
• Variable Fonts Guide
• font-variant-east-asian
  Important note! East Asian languages need this to be readable! I haven’t investigated further.

Free (double check the licenses!) images

• Unsplash
• Pixabay

A few more neat things

CappuccIcons
Not fonts, but icons, including the Ao3 and FFN logos, and a bunch of MCU superhero symbols. As well as a bunch of normal icons.

Mutant Standard Emoji
Alternate unicode emoji. Lots of skin colors, including green, and furry hands. Available on a copyleft license, and in many formats, including SVG files.

Randoma11y
Generates good color pairings.
I believe a11y is short for “accessibility” with the 11 being for the eleven letters between a and y, not leet speak ally.

RV's free Javascript/DHTML effects
Free mouse and text effects for your website.