Joe Maller.com

Comping with Web Fonts (you don’t need SkyFonts)

I wrote about problems downloading web fonts for desktop use when Google’s Web Fonts debuted, but years later it’s still an issue. There’s no way to anticipate the twists and turns a creative project will take. Designers should be free to play and experiment with typefaces without worrying about running out of time or exceeding a monthly usage cap. Convoluted, fragile workflows only create anxeity, they don’t foster creativity.

Monotype’s SkyFonts service is a nice idea, I guess, but their usage terms seem impractical and unrealistic. The few designers I know who’ve tried it found it restrictive and expensive.

The thing is, with a little knowledge of how web fonts work, using those typefaces in desktop apps is quite easy.

woff-ttf-to-otf

Web fonts are normally provided in three file formats, two of which, TrueType *.TTF and Web Open Font Format *.WOFF, are easily converted back to standard TrueType or OpenType fonts. Because of browser variation and font-face implementations, all three font containers are usually linked from a site’s stylesheets.

To use any web font for comping in desktop apps, just convert the ttf or woff file to otf, then use it like you would any normal font. There are a number of tools for converting fonts, but the following web sites work well enough that I didn’t bother downloading an app.

Standard-level Fonts.com accounts allow for self-hosted webfont projects. This means the font files can be downloaded and hosted on the web server alongside other assets like images or stylesheets. Having those files makes converting fonts for comping easy, but it’s just as simple to download the files with a web browser. Any file on the web can be copied, in fact every file viewed on the web already is a copy.

Yes, you can steal fonts using this. Don’t. “Good Artists Copy; Great Artists Steal” wasn’t about shoplifting.

Notes

  • Web TrueType fonts often won’t show in menus because their name-tables have been munged to discourage copying/theft. Converting fonts to a different container format makes them work correctly.
  • Some woff files didn’t work, in those rare cases the corresponding ttf worked fine–you might need to dig into the stylesheets to find the url.
  • Converted web fonts usually have messy names in menus.
  • Disable or remove any local copies of fonts when the mockup phase ends. Locally installed fonts can conflict with web versions and lead to maddening discrepencies in testing.

Download Google’s Web Fonts

May 1, 2013 update: I’m no longer providing a download link to the font files. Please use the googlewebfonts repository on GitHub. Just click the Zip button.

Google’s Font Directory and API for web fonts could have a transformative effect on how we read the web. The only problem is, Google has made it very difficult to download all of the actual font files.

Web designers must be free to experiment with fonts, to sketch, comp and get to know the typefaces in browser and non-browser applications. Making the fonts difficult to get or requiring special software isn’t helpful.