Custom typography on the web
Online presence is always a part of the overall branding strategy and as such, follows the same typography guidelines. As we all know by now, web typography presents a unique set of challenges; fortunately, for every challenge there’s a solution. The technical solution is driven by larger decisions - generic free fonts vs. custom licensed typography, open source usage vs. one time license vs. ongoing license fees.
Once the hurdle of business decision is cleared, technical implementation is straightforward: fonts are either embedded in the page or linked from an external font service. External font services such as @font-face, Google fonts, or webtype.com offer custom typography that can be connected using a simple “link” tag, as in:
<link href='http://fonts.googleapis.com/css?family=Croissant+One' rel='stylesheet' type='text/css'>
The benefit of using external font service is gaining immediate access to ready source of commercially developed fonts. Drawbacks include potential licensing fees and the possibility of font service being temporarily unavailable, in which case custom fonts will default to standard fonts. There’s also a slight delay in load time as fonts are being downloaded from external server, which may or may not be noticeable depending on user’s connection.
Embedded fonts come in a variety of formats, majority of browsers except Internet Explorer supporting OTF and TTF file formats.
IE( including 10) supports ЕОТ
IE >= 9 supports WOFF
FF >= 3.6 supports WOFF, OTF, TTF
Safari supports OTF, TTF, SVG
Chrome supports OTF, TTF, WOFF
Opera supports OTF, TTF, SVG
Embedded fonts provide a more stable viewing experience, without reliance on external font services. However, converting desktop fonts to web-compatible formats involves additional labor costs which may or may not be justified, depending on brand’s flexibility on web font usage and potential substitutions. At the end of the day, the choice is driven by a compromise between brand’s typography requirements, costs, and reliability.
If you decide to go with embedded fonts option, there are online services that perform the conversion:
1) http://www.fontsquirrel.com/tools/webfont-generator (to .eot, .ttf, .svg, .woff)
2) http://onlinefontconverter.com/ - (to/from: .pdf, .dfont, .eot, .otf, .pfb, .tfm, .pfm, .suit, .svg, .ttf, .pfa, .bin, .pt3, .ps, .t42, .cff, .afm, .ttc, .woff)
3) http://www.freefontconverter.com/ (from: .pfa, .pfb, .pt3, .sfd, .ttf, .otf, .otb, .t42, .cef, .cff, .gsf, .ttc, .svg, .ik, mf, .dfont, .bin, .suit, .bdf to: .otf, .ttf, .svg, .woff, .ps, .pfa, .pfb, .pt3, .cff, .t42)
4) http://www.fontconverter.org/ (to: otf, ttf, fon, pfb, pt3, dfont, afm)