.. Your Daily Design Dosis

Hallo @font-face, .. nice to have met you!

| 20 Comments

Having made websites till now where the typography mainly was based on websafe types, a new world had opened before me. A year ago or so I was thrilled when I heard about sIFR, Typekit, Cufon and all the other flash/javascript-based techniques for type-replacement in webdesign. But there always seemed to be some kind of problem with all these new techniques ..

A year and a half ago I was terribly enthusiastic when I heard about the existence of sIFR2.0. But when I was trying to implement it in several websites I was making at that moment, I always had some kind of problem with sIFR.

Browser-problems were the most common failures I had to deal with. When I had it right in Internet Explorer and Firefox, then Safari had some kind of problem with the Javascript? And when I fixed Safari, then Firefox was giving me a Javascript-bug or bad Flash import, .. or whatever!

Also the fact that sIFR and the rest of the type-replacing techniques was best to use only on your headers, not on your links and bodytext, wasn’t much encouraging. This was because the upload-time for your website went sky-high if you did so, something you don’t really want for your website. Also the rendering of the types wasn’t to get very frantic about: the text was unsharp, cropped or whatever, but never crispy and clear!

This same experience I also had with Typekit, Cufon and probably with all the other type-replacing techniques based on Javascript/Flash. But last year, during the design of my Graphic & Web Portfolio, I wanted to try @font-face for once. The way to implement @font-face was incredibly easy and it also had the following great advantages:

  • custom typefaces for headers, links and body-text
  • @font-face is a CSS-feature to embed custom typefaces into your web/blogging site.
  • you can select the text, so copy-paste-able, it stays text (100% SEO friendly)
  • no javascript or flash needed anymore
  • no hacks needed to work correctly

How great could this be for a change …? There is just one catch; the typeface you want to use must ‘allow’ this – is there a proper license for the typeface to be used with @font-face?

font-face type replacement

Is @font-face brand new?

With the release of CSS2 in 1998, Microsoft Internet Explorer and Netscape Navigator added a new specification called @font-face, attempted to improve the font selection process by adding font matching, synthesis, and download. Thanks to the different formats each company used (EOT and TrueDoc, respectively) and legal issues due to the lack of copy protection, @font-face was (sadly) put asleep and in CSS2.1 the support for the specification was ‘killed’.

CSS3 reintroduced @font-face and 2009 has proved to be an exciting year for rich web-typography. Now with a working draft of CSS3, @font-face embedding is back, this time opting for raw TrueType (.ttf) and OpenType (.otf) fonts. The specification has already been implemented in the most recent versions of Safari, Opera, and Firefox (Microsoft is still partial to their EOF format).

How does it work?

@font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG.

This will cover all the above mentioned web-browsers at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font , if you have the right licence to use it!

 

@font-face implementation

As example of the syntax for the @font-face implemenation, here  is the code I use for gonzographic.com (you can use the sample code to adapt for your own uses):

@font-face {
font-family: 'TitilliumText14L400wt';
src: url('http://www.gonzographic.com/site/fonts/TitilliumText400wt.eot'); /* EOT for IE */
src: local('TitilliumText14L 400 wt'), local('TitilliumText14L-400wt'), url('../fonts/TitilliumText400wt.ttf') format('truetype'), /* TTF true type for Safari & Chrome */
url('TitilliumText400wt.woff') format('woff'), /* WOFF for FF */
url('TitilliumText400wt.svg#TitilliumText14L-400wt') format('svg'); /* SVG for Opera */
}
Applying imported fonts with CSS selectors

Once the type is defined using the @font-face syntax, you can then refer to it in your CSS as you would Georgia, Arial, etc. Here again an example out gonzographic.com:

#content h1 {
color: #444444;
font: 18px 'TitilliumText14L400wt', Arial, sans-serif;
text-shadow: 0px 1px 1px #fff;
line-height: 22px;
letter-spacing: 0em;
margin: 0px 0px 0px 0px;
padding: 5px 5px 10px 0px;
}

Note: I have also included a default font. That is HIGHLY recommended for users who are using a dated browser or browser that doesn’t support @font-face.

Font Squirrel!

Thank God there is Font Squirrel. A site with an enormous list/collection of typefaces you can use free for commercial use in one of your web-projects. If you have the .OTF file you can use the Font Squirrel Generator which will create the .SVG, .WOFF and .EOT formats for you to use. How cool is that ..!

Conclusion

So while its now technically easy to link to any typeface,  copy protection issues still play a crucial role overall—an obvious ‘no-go’ for any commercial types you’d hoped to use. The main issue with @font-face still remains the ownership of the typeface. Make sure you are legally allowed to upload and share a type before using @font-face!

Firefox, Opera, Safari, Chrome (since 25-01-2010) and even your iPhone already support @font-face, .. so it’s time to use it!

– § –

With all my enthousiasm for @font-face, there is actually one big down-side of this CSS-specification: if in ‘wrong’ hands it could be a start of chaotic, unordered and screaming web-typography?

How do you like or dislike @font-face, love to hear your opinion on this topic? The comment-section is completely yours …

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

20 comments

on this article: “Hallo @font-face, .. nice to have met you!”
  1. I really thought the writing in the blog was very complexed, in a good way.;)

  2. Hi Manik,

    thanks for your comment, much appreciated. Cheers & Ciao ..

  3. Great article as always. Some brilliant points you have discussed here.
    Thanks for sharing.

  4. Hi Stephan,

    All info about the @font-face kit for Titillium you can find here, also how to implement it in your CSS:

    http://www.fontsquirrel.com/fontfacedemo/TitilliumText

    Good luck, Cheers & Ciao ..

  5. Hey gonzo,

    I am trying to replicate another website that used that Titillim webfont. Where do you download that particular font? and is there a particular way you have to upload/install it on your server? Please contact me at [email protected]

  6. We need more blogs like this. I will go through your blog for more info.

  7. Hi Jefferson,

    thanks for your comment, and thanks for linking the gonzoblog to your readers!

    Cheers & Ciao ..

  8. Hi Noah,

    well, what can I say … good SEO?! Cheers & Ciao ..

  9. Hi RegCleaner and Tiffany,

    Glad I could have been of some assistance with this article. Personally I think @font-face is a good technique for rich web-typography … finally!

    Don’t forget to subscribe to the feed? Cheers & Ciao …

  10. I’ve already bookmark this article and will definitely refer this article to all my close friends and colleagues. Thanks for posting!

  11. Hi Cojones,

    Cheers, mate! Thanks for your comment, highly appreciated!

    See you next time, Ciao …