Fonts Embedding for Advanced Web Design
There is a wide variety of fonts today, ranging from traditional serif typefaces and Old School fonts to modern-looking graffiti, futuristic and hand-written digital fonts. However, when it comes to web page design layout, designers have to content themselves only with a limited line of default fonts, provided by a particular operating system.
The problem is that web browsers can display text on web pages, using only the fonts, which are installed on end-users’ machines. Thus, if you choose some specific non-default font for text on your web page, there is a good chance that visitors won’t be able to evaluate its uniqueness and true beauty because the same font may simply be absent on their computers.
One of the easiest ways to solve the above described dilemma is to use graphics instead of text. With any image editor, like Paint or Photoshop, one can create an image file with the text, displayed in the desired font and then use this image file as part of the web page layout. This simple approach gives a 100% guarantee that your text, decorated with some artistic font, will be displayed by any browser exactly as you want it to be. However, here is a small fly, capable of spoiling this seemingly ideal pot of honey. Images cannot be rendered by search engines, and even supplied with appropriate alt tag descriptions, plain text is still much better than images in terms of web optimization and search engine visibility. Furthermore, use of images increases web page loading time, server-response time, and requires more bandwidth. So, this method of solving our web font dilemma may be suitable only for small portions of text, like menu options, but it is absolutely useless for displaying larger portions of text.
Of course, web technologies do not stand still, and today we already have an advanced solution to offer all those web masters, who wish to use some unique digital fonts to decorate the text on their web pages. This solution is called “fonts embedding” and it stands for a particular technique, which allows using specific font or fonts, stored at the web server, for displaying text, located at a particular web page. In simple words, instead of using default fonts from operating system font folder, web browser can be instructed to use specific fonts, prepared and pre-uploaded by a web designer. Telling the truth, font embedding for the web is a relatively young technology; however, since its benefits are clear and incontestable, embedded web fonts implicitly form part of the upcoming de-facto web standards.
Tools for Web Fonts Embedding
Since we have already investigated the problem of limited web fonts set and identified the way to solve that dilemma, now it’s time to present a few practical means to embed a desired font into a web page design.
Being the locomotive of all the online industry, Google offers its Font Directory service as one of the free and easy options to embed specific fonts into a web page. Currently, the service offers a limited amount of fonts: about 20 typefaces with Latin character set, and some fonts are also presented in Cyrillic, Greek, and Khmer sections. All the fonts are hosted by Google, so there is no need to upload anything into your web server. Just choose the font you would like to embed, click it, and hit the “Get the Code” link. The system will provide you with a single string to insert into head section of a web page, and after that you will be able to use the chosen font just like you use any other font within CSS.
- very easy to use
- offers free fonts in different character sets range
- no need to upload fonts to web server
- no need to pre-process the fonts before embedding
- supports all the major browsers (IE, Firefox, Chrome, Safari, Opera)
- limited amount of fonts offered
Commonly known as WEFT, web embedding fonts tool is a free instrument from Microsoft, which is capable of creating font objects, based on the majority of fonts available. Font objects can then be linked to a web site, instructing Internet Explorer to use a particular font for displaying the text on the web pages.
The algorithm behind WEFT is pretty simple – once you have your web site designed on your local computer, WEFT utility scans your HTML pages as well as font files, creating specific font files with .eot extension and introducing necessary changes to the HTML coding in order to link particular fonts with your web site.
Unlike any other regular font formats, .eot font files contain only part of the characters set, provided by a particular font. Actually, .eot files include only those characters, which are required to display text on a particular web page. This helps to reduce the size of a font file, which needs to be uploaded to the server, and to eliminate potential licensing issues. It is necessary to note here, that WEFT technology allows to use any fonts available, except for those, supplied with “no embedding” property.
- a free utility from Microsoft
- can work with a majority of fonts available
- pretty easy to use
- supports only Microsoft IE browser
- font files need to be uploaded to the server
Typeface.js is a free open-source java script, which allows embedding custom fonts into a web page layout. After uploading the script itself and a set of favorite custom fonts to a website location, web designer can use any of those fonts, as if they were installed on remote computers by default.
- the script can work with IE, Firefox, and Safari
- can embed multiple fonts
- free open-source project
- necessity to upload fonts into a server
- reported slow performance with body text
Cufon is an online font generator, which can transform any font from your computer into specific Java script. Later, in order to embed a font into a web page, you just need to load it with the
script tag. Prior to font transformation, one can manipulate with some font features, such as included character sets or glyphs, in order to optimize a font for particular web application.
- can work with different fonts
- supports all the major web browsers
- not that easy to use
- requires programming skills to embed a font
sIFR is another instrument to embed a desired custom font into a web page. Eliminating all the technical details, the process behind sIFR can be described as the playback of Flash movies with the text, displayed with the chosen font, instead of traditional text, defined in HTML code. sIFR creates such Flash movies on the go with the dimensions equal to the sections, where usual text is meant to be displayed, so users can never notice the difference between a normal text and Flash movie displayed.
- works with all the major browsers with Flash support
- allows embedding of virtually any font
- requires Flash to run
- requires programming skills to embed a font
Using cascading style sheets is another way to embed a custom font into a web page. Actually, this method is a kind of symbiosis between already mentioned WEFT technology and traditional means, offered by CSS1. Here, the whole concept is about creating an embedded font, using WEFT technology or that, offered by Bitstream, and linking this font to your style sheet.
- pretty simple to use
- it is possible to embed different types of fonts
- works only in IE or Netscape
Of course, today the technology of fonts embedding still has enough space for further improvements. Hopefully, the standards of upcoming web 2.0 and CSS3 will introduce some new methods to embed fonts and untie the hands of creative web designers, who wish to use more fonts then common Arial and Times New Roman typefaces.