5 Tips on Custom Web Fonts

Tuesday, January 25th, 2011

5 Tips on Custom Web Fonts

It’s been a while since web designers were truly forced to use a small collection of fonts in order to have a fairly consistent experience, but too few designers have taken advantage of the numerous ways to provide custom fonts to their users. With that in mind, here are a few tips you should know regarding custom fonts.

1. Browser Differences

The biggest caveat is that not all modern browsers support CSS embedded fonts in the same way. Although Internet Explorer was ahead of the pack for a change, supporting the @font-face directive since version 4 or 5, depending on who you ask, it only supports the EOT file format. After a great deal of feature upgrades and adjustments, it seems that the most recent versions of all the other major browsers have come to a general consensus regarding OTF and TTF types, though there’s varied support for WOFF and SVG. You can get a fairly complete support list from webfonts.info.

2. Google Font API

If you want to easily embed hotlinked fonts on your website, I recommend the Google Font API / Google Font Directory. The font directory has quite a few fonts available for free use. The best part is that the API can serve the proper CSS and font file to match for the user’s browser. If you prefer to handle that part yourself, you can write your own CSS, and download the fonts to host on your website’s server.

3. FontSquirrel

If you already have a font you want to use (and the rights to use it,) or you’ve made your own font, FontSquirrel’s @font-face generator can convert it to the different formats you’ll need to support various browsers and generate the CSS for you. You can also choose which formats and options to use with the Expert option. Oh, and did I mention they also have a directory of hundreds of free fonts available for download and use? Well they do.

4. Cufón

A javascript-based alternative to @font-face, Cufón provides cross-browser support by using VML for Internet Explorer and elements in most other browsers. You need to upload the font to the Cufón font generator, which converts it into a JavaScript file, then you just include that file on your page to register the font. If for some reason you can’t or don’t want to use @font-face and downloadable font files, Cufón is a very well-built alternative.

5. Usability

It’s easy to go crazy with custom fonts and use a dozen in one paragraph, or use a fancy scripted font for everything, but keep in mind readability and usability. For example, many flowing script fonts can be hard to read at smaller sizes, especially by people with vision problems. And, just like the animated glitter backgrounds of the past, overdoing it with custom fonts can turn your website into a cheesy, tacky celebration of the unsubtle. Remember that what the user sees and interacts with on your site should help accomplish the task at hand without drawing unnecessary attention to itself. It should look good, but it shouldn’t have to try really hard to look good.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit MatchaDesign.com.

Related Tags

You Might Also Like