Skip to main content
Menu

Web-Friendly Fonts: Learn ’em and Love ’em

PSD to WordPress | August 22nd, 2013

I do a lot of PSD to WordPress projects. It’s my most common project type and it’s also the type of project I enjoy the most. One thing that I frequently run into is the use of non-web-friendly fonts throughout PSDs. If you are a designer, here are some handy resources to check to choose your design’s fonts wisely:

CSS Web Safe Fonts: basic list of fonts that are common enough to be considered web safe
CSS Font Stack: this site offers a complete collection of web safe CSS font stacks

Free Additional Web-Friendly Fonts

If you want to venture beyond the common web safe fonts, keep it in the free zone and do something via font kit, check out:

Google Fonts
Font Squirrel (filter by webfont)

Font Squirrel also has a handy webfont generator. You can use this if you have a font that isn’t on Google Web Fonts or Font Squirrel but is licensed for web use. Just because you have the font file doesn’t mean you can use it via font kit so be sure to check the licensing on your fonts.

Paid Web-Friendly Font Options

Additional options are available through paid services like:

TypeKit
Fonts.com

If you are using a font that is offered through one of these paid services, make sure you have a plan as to who is going to incur the cost of the service. Is this something the end client is aware of and they’ve agreed to the monthly fee? Are they sharing your plan? Work that out ahead of time so you can provide the information to the developer once the design is ready to be coded.

There are also sites which sell fonts that offer webfonts as font options such as MyFonts, and I’m sure there are others. Most have notes about what exactly the license is for (unlimited users vs. a set number, unlimited sites vs. a set number, etc.) so be sure to ready the terms carefully if you’re purchasing a web font through that route.

Research Those Fonts, Kids

Overall, it takes an incredibly short amount of time to research to ensure your design uses fonts that translate easily to the web and it really helps make a smooth handoff from designer to developer. It’s never great to fall in love with a font in a design and get client approval only to find out you can’t legally use that font on the web.

Copy link