Gabrielle’s Font Resource Masterpost
There are many font resources available on the Internet, but the following are the ones I use the most often.
- Google Fonts The best part about Google Fonts’ extensive collection is that all the work of converting, uploading, and embedding is already done. All you have to do is link a stylesheet in your HTML or import it directly to your own stylesheet. Favorite fonts include Source Sans Pro, Asap, Inconsolata, and Astloch.
- Lost Type Co-op This collaborative effort includes quality fonts with a western, cowboy feel to them. Each font is available on a pay-what-you-want basis - you can donate or download the font for $0. Favorites include Haymaker and Homestead.
- The League of Moveable Type The League aims to provide well-made open-source fonts to anyone and everyone. League Gothic is probably the League’s most recognizable font, but other notable fonts are Ostrich Sans, Blackout, and Sorts Mill Goudy.
- MyFonts The front page boasts of the world’s largest collection of fonts, and I can’t deny that it’s the largest I’ve ever seen. Most of the fonts on here aren’t free, but searching for fonts tagged “free” yields some decent fonts with free weights such as Museo (Sans, Slab, and Cyrillic) and Sketchetik.
- Dribbble and Behance both showcase beautiful work and many designers offer their fonts for free!
- Runners up include Font Fabric and Font Squirrel.
- Latin Modern Mono This amazing monospace font has over a dozen different weights and styles, of which I especially love the regular italic variant.
- Bariol The font creators ask that you pay with a tweet for the regular and italic versions of the gently rounded font, but I ended up buying the rest of the weights in both regular and italic for just six euros. They also provide a quirky icon font to match.
ICON FONT RESOURCES
- Entypo and Typicons are my two favorite icon fonts, hands down. Each includes icons that easily translate to Tumblr’s basic icon needs (home, links, post types, etc) and are aesthetically pleasing. I’m currently using Typicons on my own websites.
- Font Awesome and Foundation Icons are other great icon fonts that are included with fluid frameworks.
- Fontello allows you to pick and choose icons from different fonts and creates a custom font you can use on your website. You can even choose what code to use for each icon. This is especially handy because by choosing only the icons you need, you reduce file size and load time.
- Base64 Encoder This comes in handy because you can directly embed fonts into your CSS stylesheet instead of having a separate file. Please read up on how to embed base64 fonts as this only converts the file and does not have the proper data type.
- MyFonts’ WhatTheFont! and Identifont are the two services I use when I need to find out what a font is.
- Lettering.js separates each letter within a chosen HTML element into a span element that can be easily styled with CSS, giving you complete control over individual letters.
- FitText.js inflates headers to fit the width of the window or to your specified size. Great for fluid or responsive layouts.
- slabText.js separates headlines into rows by ideal character count and resizes each row to fill the space. Not something I use regularly but still a useful plugin.
- Kern.js, Kerning.js and jKerny.js all give you some form of control over kerning.