Understanding and Using Embedded Fonts: What, Why and How?

There are so many great fonts available on the web, free or otherwise. In past years, only print design really got the privilege of using some of these gorgeous typefaces, and we web people were stuck creating websites with only the standard fonts that we could ensure were web-safe and compatible among various browsers. However, now font embedding is as easy and as compatible as ever, and as a result, we are seeing plenty of websites come out with unique fonts for blog headlines, regular page content, and other text that is variable and was once not practical to use a unique font that would require images.

Understanding and Using Embedded Fonts: What, Why and How?


Not only can we now use more creative fonts for variable content, but even elements that would have used images before can now be created by embedding fonts, often times helping search engines find websites, and also helping to create cleaner and more semantic markup on the backend. Another nice feature - for interesting fonts, we can now embed them and therefore use regular CSS styles on them, like we would with any other text.

What is Font Embedding?

Font embedding has been around for years within popular offline applications, and of course, designers have been experimenting with type and unique fonts for years before with design software. Recently, we have been able to include fonts directly on web servers, and therefore include them via CSS right into our websites. Below is an example of a custom font embedded in a webpage:

Pixelcraft

The font above in the slider needs to be variable, but they also wanted a unique and stylish font for their design. Simply embed this custom font into the website, and they can use it as regular text - without images.

The font files themselves are included on the web server, so the CSS knows exactly where to retrieve it. Unlike web-safe fonts, we must tell the CSS where to find the information for the font. We can then link to it via a number of methods.

Why Use Font Embedding?

Why go through the hassle of using font embedding? There are most certainly some instances where it would be a lot more practical and time saving to use it, but are there other benefits? Font embedding can definitely be an added luxury from a design perspective, but it does have many other practical benefits as well.

Let's start with the most obvious...

Improved Design

With the rise in typography-based design, we are beginning to see a lot more websites - whether they are typography-based or not - use more interesting fonts. Using the same old, plain fonts that have been used for years previously just doesn't stand out in the same way it did before. Standard web safe fonts are still great for large blocks of content, but headers today call for cleaner fonts, more professional fonts, and better designed fonts.

Plus, from a design perspective, we can have more creative freedom. No need to design a PSD around only web safe fonts anymore. Feel free to use whatever free or properly licensed font, and the development portion of the web design can surely handle it. This allows for more variety among designs, and an extra chance for you to bring your own creative freedom to the table.

Milesdowsett

Better SEO

Search engines find content and prioritize it on a webpage based on the tags they're in. This is one reason why learning proper semantics is so important. Header tags will take on much more leverage than the alt tag of an image, so it's easy to see why using font embedding for headlines, blog post titles, and other important pieces of content can be better off in a header tag, rather than used as an image.
Also, ever forget the alt or title tag altogether? Then the search engine would have no way to figure out what that image was trying to say at all.

Ease of Use

Get the font(s) of your choice set up during the development process, and enjoy lighter maintenance later. No need to create custom images for headers, sliders, or otherwise. Simply style, and type out whatever content is needed. That content can then change easily, which is great for updates on your end, and ease of use on a client's end.

Using @font-face for Embedding

Within the last year, the prebuilt CSS @font-face method for embedding fonts has become standard across all browsers. This means that every browser type from the most recent update forward will support @font-face with no need for workarounds. Since this event, @font-face is seen by many developers as the best option for font embedding. It is the most efficient, the easiest to implement, and now, the most compatible.

FontFace

Using @font-face to embed a font is as easy as below:

@font-face {
	font-family: CreamPuff;
	src: url('fonts/creampuff.eot');
}

h2{
	font-family: CreamPuff;
	font-size: 22pt;
}

Simply use the @font-face rule within your CSS stylesheet, name it using CSS's standard font-family property, give it a source url (the location of the font file on the server), and reference it just as you would any other font throughout the rest of the CSS. In the example above, we uploaded a font, and set it to the font used for H2 tags. However, like with all font rules, be sure to still set up a proper font stack with standard web-safe fonts behind it.

Support for @font-face in Internet Explorer has actually been around for a while, believe it or not, but it does only recognize fonts that are in the .EOT file format (See above code). TTF and OTF will work in the majority of browsers, but to be safe, it's best to just use an EOT font file. It's as easy as taking any font and converting it to an EOT with a tool like this: TTF to EOT Font Converter

Otherwise, for even better compatibility and quality issues, just include both (See code below). Browsers that can handle the better format will use it, and otherwise will default to the EOT file format.

@font-face{  
	font-family: CreamPuff;  
	src: url('fonts/creampuff.eot'); /* For IE */  
	src: local('creampuff'), url('fonts/creampuff.ttf') format('truetype'); /* For non-IE */  
}  

Free Commercial-Use Fonts: Font Squirrel

One main issue with using @font-face and other font embedding methods is that anyone can easily embed a commercial font they have on their computer, without a license. This can cause legal problems fast, and only free for commercial-use fonts should be used. The problem is, it may not be easy to always determine which fonts are available to use freely and which are not. In comes Font Squirrel, a web service that includes and organizes the best free for commercial use fonts available for download.

Fontsquirrel

Simply choose a font, download the TTF format, and then feel free to use Font Squirrel's @font-face generator to create the code and files. This generator automatically renders the fonts for the best performance among many platforms, and provides the adaquate font formats for the best cross-browser compatibility and performance.

There are also several other services, some with fees, that provide more variety, or the ability to purchase licensing for premium fonts to use with @font-face: Font Spring, Typekit, Typefront.

Alternatives: SIFR, Cufon & FLIR

However, with some fonts, CSS doesn't cut it design-wise. Some fonts can appear to be scratchy, or not designed well in other terms when using @font-face. While it is sufficient for the majority of fonts, if you happen to want to include a font that is having this issue, there are of course image replacement methods using Flash and JavaScript, such as SIFR, Cufon, and FLIR.

Each method has its own implementation and benefits, but all are created to be 100% SEO friendly, and also feature the other benefits of font embedding as well. Below is some information on each:

Conclusion

Font embedding can surely improve design, and help us as designers have fewer restrictions and more fun with website creation. Especially with the added support, and really no downsides in sight, font embedding has become a new trend that is likely to stay for a while. It allows us as designers to add our own unique touch to the typography of a website, not just through imagery, color and layout like before.

Feel free to share your opinions on any font embedding methods mentioned above, or share your own. There are plenty more options for doing so, and even font embedding services that make it even easier, without having to worry about licensing restrictions.