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.
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.
- Online Font Converter
- Free Online Font Converter
- FontConverter.org
- Font Squirrel’s Webfont Generator
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 correspondingttf
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.
So… how to steal fonts from SkyFonts instead?
I wouldn’t recommend using Google Fonts for serious desktop (print/video) work. The tend to remove hinting & recode the actual font to use less points/splines. Installing a Google Font is fine is the final target is the web using the same font, or you’re doing free work at a small font size, but otherwise, I’d avoid.
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/#optimizing
https://github.com/googlefonts/fontcrunch