SlideShare is now on Android. 15 million presentations at your fingertips.  Get the app

×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

In your @font-face

by Web Developer at lanyrd on Jun 06, 2011

  • 35,848 views

We finally have the ability to serve custom fonts to all popular browsers. However, like everything in our profession, there’s a minefield of gotchas and peculiarities between browsers, devices and ...

We finally have the ability to serve custom fonts to all popular browsers. However, like everything in our profession, there’s a minefield of gotchas and peculiarities between browsers, devices and operating systems.

This presentation (probably meaningless without audio) investigates the browser flaws, optimisations & legal pitfalls in serving webfonts.

Statistics

Views

Total Views
35,848
Views on SlideShare
34,642
Embed Views
1,206

Actions

Likes
47
Downloads
301
Comments
10

36 Embeds 1,206

http://lanyrd.com 567
https://twitter.com 98
http://pruebamanubetran.wordpress.com 87
http://paolovalzania.wordpress.com 80
http://kurapov.name 69
http://lanyrd.dev 48
http://www.soooshial.com 40
http://rerumatorian.wordpress.com 36
http://hardwaredelpc.wordpress.com 35
https://si0.twimg.com 25
http://durdelafeuille.tumblr.com 16
https://twimg0-a.akamaihd.net 14
http://twitter.com 14
http://a0.twimg.com 8
http://omotivadoremserie.blogspot.com.br 7
http://voyelle.tumblr.com 7
http://us-w1.rockmelt.com 7
http://paolovalzania.blogspot.com 6
http://paper.li 5
http://google.webkameleon.com 5
http://paolovalzania.blogspot.it 4
http://zootool.com 4
http://safe.tumblr.com 4
http://juanrazgz.wordpress.com 3
http://omotivadoremserie.blogspot.com 3
http://paolovalzania.posterous.com 3
http://jorgelopezcurso.wordpress.com 2
http://translate.yandex.net 1
url_unknown 1
http://westsys.mediamates.be 1
https://robtest.atlassian.net 1
http://www.slideshare.net 1
http://tubemote.com 1
http://bottlenose.com 1
http://talksathome.com 1
http://jcs2.remote-learner.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 10 previous next Post a comment

  • DIrtyF Frank Taillandier, Web Quality Assurance at WS Interactive Must see 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • frazor Fraser Pearce No video yet? 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • ilovetypography John Boardley, xxxxxxx at xxxxxxxxx I’ve only seen the slides, but I think (besides Arial), you’ve done a fantastic job of bringing a pretty technical and dull subject to life. Great stuff! 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • winder1ai Winder Lambis at Data & Marketing wow amazing presentation,I tnik it's very creative 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • chrisdavidmills Chris Mills This was my talk of the day at DiBi too - impeccably well tested/researched, and full of really good info. I know a fair bit about web fonts, but I learned a lot, even about my own browser's implementation ;-)

    If that is an informational wank to the face, then I'll have 5 more. And a tissue.

    Also, you should wear it as a badge of honour of someone got offended and walked out!
    2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • jaffathecake Jake Archibald, Web Developer at lanyrd @Tim Ahrens: I’m purely technical, not a designer, hence the poor design/font choice in my slides. It’s not a new deck design, it’s one I’ve used before.

    I don’t credit Håkon with the creation of WOFF in my talk, I credit it to Mozilla, Opera & Microsoft. I don’t have all the info in the slides, I just use them to assist the talky bits. There’ll be a video of the talk at some point, I’ll link it when it’s up.

    Agree re kerning, I wanted to talk about which browsers use kerning & in which situations (also ligatures) but didn’t have the time.

    I wasn’t aware of the cleartype issue, many thanks, I’ll try to create a test case for that and include it in future runs of the talk. Do you have an example to hand?

    Will also look into recomponentizing (is that a word?) TTFs, cheers!
    2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • sanchothefat sanchothefat My favourite talk of the day this was. It was certainly no wank to the face. 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • TimAhrens Tim Ahrens, Type Designer at Just Another Foundry Thanks for sharing, very interesting!

    A few comments:

    • Why are you using Arial? Seems a bit strange for a presentation on how to extend the choice of fonts beyond Arial.

    • Was Håkon Wium Lie really the original inventor of WOFF? I thought it was Erik van Blokland and Tal Leming

    • One very effective way of optimizing TTFs that was not mentioned is to recomponentize them.

    • Another very effective way of reduceing the font file size is to strip kerning for scenarios where it will be ignored.

    • TTFs not needing hinting even for large sizes is a common misconception. With ClearType, unhinted TTFs will show unpleasant 'warts' in all sizes.
    2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • jaffathecake Jake Archibald, Web Developer at lanyrd First talk I've done that someone walked out of due to offence. Don't know if that's something to be proud of, but I'm running with that as a tagline. 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • philhawksworth Phil Hawksworth, Software devloper at The Team Better in person. Go and see Jake give this talk if you possibly can! 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

In your @font-face In your @font-face Presentation Transcript