How to Use Web Fonts and the @font-face CSS Method

The days of web safe fonts are about to end thanks to all the great attempts of designers, developers and industry leaders around the world.  The good thing in digital production industry is the community of people who are always pushing the boundaries to their limits. Then when it becomes a new standard  or convention its pushed forward again by the same community even further.

Technologies like Cufon, sIFR, FLIR and @font-face are some good examples of this. We will investigate the use of @font-face CSS method, which is stronger, simpler and more flexible. Although its more commonly known as a CSS3 property @font-face was actually first proposed for CSS2 and was implemented in Internet Explorer 4 using the propriety format called Embedded Open Type (EOT)!

I still think with good use of typography this small list of web safe fonts are enough to create basic typographic  impact, but having more options and variations also excite me in another way.

What is @font-face

@font-face is a CSS rule which allows you to embed a particular custom font from your server to render a webpage even if its not already installed on site visitor’s computer. Not only is it also cross browser compatible but also means that a designer doesn’t only have to rely on  “web safe” fonts.

Formats

• EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF
• True Type
• OpenType
• EOT
• WOFF
• SVG
• @font-face

How web fonts are licensed?

We respect type foundries and their effort on design and implementation of typefaces. Because designing a typeface is a hard process and needs a good understanding of proportion, aesthetics, technology, and history – then it stands to reason that almost all fonts would also be copyright protected. It’s even more complex with variety of operating systems, devices and software.

Today most foundries offer various premium @font-face solutions with various licensing types. There is still no consensus about this issue but I think that the open-source and free movement of  the digital era will be enough for most people’s design needs.

Take a a look at the resources section of this post and there  you’ll find  a bunch of free and quality web fonts and services waiting to be discovered. Most of them can also be used for @font-face implementation as well.

@font-face CSS method

We will investigate Font Squirrel’s great tool  @font-face  Kit Generator. You can create  your own @font-face kits for all browsers with ease.

How to make it work

Its pretty simple to implement @font-face and we first need to download a free web font. For this tutorial we choose Wisdom Script of Lost Type.

Than we head to Fontsquirrel’s @font-face Kit Generator, and upload the Wisdom Script .otf file.

Once you downloaded your kit, you’ll find the font file with different formats which are needed for different browsers. Here is a list of font file formats and supporting browsers;

• Internet Explorer only supports EOT
• Mozilla browsers support OTF and TTF
• Safari and Opera support OTF, TTF and SVG
• Chrome supports TTF and SVG.
• Safari on the iPad and iPhone require SVG.

Place the files into a directory probably called “fonts/” on your webserver.

The Basic Syntax

@font-face {font-family: WisdomScript; src: url('Wisdom_Script.otf');}

body{
font-family: ‘WisdomScript’, Arial, sans-serif;
}

Cross-Browser Compatibility

The basic syntax does not work for all browsers as you can guess :] but the Kit  has the code that you need for cross-browser support.

This is the  best possible syntax from Font Squirrel, and here Paul Irish explains why.

Notice stylesheet.css file in your kit and  paste this code onto your css file

@font-face {
font-family: 'fonts/WisdomScriptAIRegular';
src: url('fonts/ wisdom_script-webfont.eot');
src: url('fonts/ wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
src: local(‚ò∫'),
url('fonts/ wisdom_script-webfont.woff') format('woff'),
url('fonts/ wisdom_script-webfont.ttf') format('truetype'),
url('fonts/ wisdom_script-webfont.svg#WisdomScriptAIRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Consider adding this line to snippet in order to ignore any local fonts that may be using the same name as your font.

src: local('☺')

This part tricks the browser into only recognizing the fonts you are using, and ignoring any local fonts that might share the same name.

Mobile Devices and @font-face

The biggest cons of using @font-face in a mobile application is the performance. Font files are mostly very large for mobile, even using a subset of a single weight of a typeface can add an extra 100KB of data.  If you think your mobile website can handle extra 100 KB, consider using font sebsetting option when creating @font-face Kits

Specimen and test

Here is a part of a specimen of the typeface as an html page created by @font-face Generator Kit.

Tools and resources

What font

• WhatFont Tool
  The esiest way to find out the fonts used in a webpage. Just hover over the text :]
• WhatTheFont and WhatFontIs
  You have seen a font in an image and want to figure out which typeface is it?

@font-face services

• Google Web Fonts
• Typekit
• Fonts.com
• Typotheque

Free Fonts

• Font Squirel
• Fontex
• Lost Type
• Font Fabric
• Da Font

We’d be interested to hear about how you use @font-face and what you think will be the next moves for fonts. And don’t forget to fan our page on Facebook!