Using fonts effectively on websites is a real challenge for most web developers. In years past, fonts were a least-common-denominator kind of a consideration, since as a web developer you couldn’t count on users having the particular fonts you wanted to use. So, as often as not, you just went with the generic font categories, e.g., Serif, Sans-serif, Mono, etc. and lived with whatever the browser used to fulfill your selection.
Google Fonts
Google Fonts revolutionized this. Not only have they make it easy to embed fonts in your site that were visible to all your audience, but the fonts are FREE!
Their website says:
Google Fonts is a library of 1,359 free licensed font families and APIs for convenient use via CSS and Android. The library also has delightful and beautifully crafted icons for common actions and items. Download them for use in your digital products for Android, iOS, and web.
https://fonts.google.com/knowledge?vfonly=true&sort=popularity
That same page is a jumping off point to a library of articles
While searching 1,300+ fonts for your particular favorites is daunting, the site’s sorting, popularity measures, filtering by type, etc. all make quick work of selecting families.
The site also generates the link codes for your page headers and the css needed to invoke the fonts.
A Visual Type Scale
A site I highly recommend, A Visual Type Scale, can take you further with your selected Google fonts by pairing and displaying different fonts for body and headers while letting you adjust:
- base font weight & size
- different line heights
- the size ratio between body size and each of the headers
When you see what you like, you can download the CSS to implement the selections on your site.
Font Squirrel
Lots more fonts, free and otherwise, are available at Font Squirrel. They also give access to FontTalk discussion boards and their Blog.