But what happens when you want to use that font on the web?
Typography for the web has come a long way in recent years. Not so long ago, displaying a custom font on your webpage meant using an image, a Flash component like sIFR, or simply crossing your fingers and hoping that the user would have the font installed on his system. However, with all modern browsers now supporting the @font-face CSS property and JavaScript tools such as kerning.js (giving designers greater flexibility for displaying type), the days of limited typography on the web are quickly being relegated to the history books.
Tools such as Font Squirrel's @font-face Generator give you limited, but often serviceable automated conversion of user-supplied fonts. Font foundries are making more and more typefaces available for the web all the time, through services like Type Kit, Fonts.com, or their own retail solutions.
However, for those fontographers looking to build their own web fonts, or who want more refinement than automated converters offer, a more detailed approach may be in order. We've outlined a few important considerations for web fonts below.
Font Formats
For starters, to achieve as much browser compatibility as possible, you'll need to convert your font to at least four formats; the original TrueType (or OpenType) format, the Embedded Open Type format, the Open Web Font Format and a Scalable Vector Graphic format.
Many font creation tools support these formats natively, or allow you to export to them, but if yours doesn't, you can still use online conversion tools like the @font-face generator, and then open each format individually and clean it up as needed. While this can present its own set of problems, it does allow for some additional control over the look of the finished product.
Unicode Character Support
The web often creates completely different use cases than print, so you may need to extend your font's glyph library in order to support more unicode characters. If you're designing your font for general purpose use and widespread distribution, this can sometimes mean adding hundreds or even thousands of new glyphs.
Your Kerning Data Will be Lost
Any data your font contains with regard to character kerning will be lost (or ignored by the browser) once your font is converted to web formats. This means all those hours you spent carefully calculating many of your font metrics will no longer be of use. To compensate, you may have to modify existing glyphs to ensure proper scaling and spacing, and you may need to create or remove ligature glyphs.
Font Outlining
If you've created your font with PostScript outlines (which many fonts use), you may find that you need to convert your font outlines to TrueType, in order to achieve more precise and clean font rendering, particularly at smaller sizes. Since fonts are created in a vector format, converting those vectors from PostScript to TrueType may mean adding additional nodes to a glyph's outline, or that some control data is lost. Many times, this may mean that your font requires a round of manual clean-up to remove superfluous nodes on your glyph, or to refine the outlines, as they may have changed subtly during conversion. Poor outline conversion can mean jagged fonts and larger file size.
Keep It Small
Since you'll be serving up a number of font formats over sometimes-slow internet connections, you should do everything in your power to keep the font's file size down to a respectable value. There are a number of ways you can optimize your font for a small footprint. For example, take the time to manually delete font metrics that don't convert from the original TrueType (or OpenType) format, keep font outlines as simple and efficiently drawn as possible, use TrueType components to build accented characters from non-accented glyphs and try to keep meta data to a minimum.
These are just some of the many considerations to take into account when converting a font for wide-spread use on the web. However, as you can see, while many auto-conversion utilities and generators can simplify the process for specific use-cases, optimizing a font for full web support is no small task. Fortunately, many font foundries are now jumping on the bandwagon.
Series supported by join.me
