One of the biggest frustrations for web designers has been the lack of font selection for use as copy and headers in web design. We have been stuck with the same handful of type face options for years. We have always been able to convert the headings and words in our layouts to graphics but the downside is slower sites that are not search friendly. Flash was another alternative, but it’s not supported in tablets and on mobile devices and is essentially dead as a technology moving forward – so what now?
Embedded fonts have become the solution of choice for web designers and probably the best solution for the foreseeable future (at least for the next few years). They offer more consistency and predictability than system fonts and they are much better for search, mobile and content management systems than flash and/or graphic type treatments.
Embedded fonts are either hosted on the same web server as the site itself, or hosted on a font hosting server and downloaded on the fly as needed. Regardless, the concept is that the program that writes the font to the screen is streamed over the internet instead of being pulled from the user’s computer.
Embedded fonts have been around for a few years now, with the introduction of CSS3. However, the use of them is fairly recent because the distribution of browsers that support Font Embedding took a couple of years to catch up. The browsers that currently allow for embedded fonts are as follows:
Internet Explorer 9, Fire Fox 3.6, Chrome 4, Safari 3 and Opera 10
The best practice is to limit the use to 2 embedded fonts per site (at most 3) and to make sure to list alternative system fonts for use in browsers that don’t support @font-face. The embedding of fonts can create performance issues and will occasionally flash the wrong typeface onto the screen until the embedded one is loaded. This is why it’s important to limit the use of embedded fonts to only a couple – the browsers need some time to load the fonts before they can be properly displayed. For the most part, the process works smoothly and the results can be very inspiring—opening up a whole new world to type design to the frustrated designer.
The best place to start searching for embedded fonts is via Google Web Fonts. There are other great places to find fonts for embedding (which I have listed below) but Google Web Fonts has become the dominant player in the industry (big surprise)—they offer a great selection of fonts and… they are free!
Other Services:
- Font Squirrel – http://www.fontsquirrel.com/
- Typekit – https://typekit.com/
- WebType – http://www.webtype.com/
- Fontdeck – http://fontdeck.com/
- Fonts Live – http://www.fontslive.com/
- TypeFront – http://typefront.com/
- Fontspring – http://www.fontspring.com/
- Fonts.com – http://www.fonts.com/web-fonts
- Kernest – http://kernest.com/
- Typotheque – http://www.typotheque.com/
- WebINK – http://www.webink.com/
Resources:
http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/
http://designshack.net/articles/css/3-must-learn-css-techniques-for-perfect-web-typography/ http://www.w3schools.com/cssref/css3_browsersupport.asp
Comments
comments