Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

Some facts about web fonts

Web fonts are evolving so quickly, it’s easy to get confused by the technology and terminology involved. Here are a few facts to help clarify.

I often see folks asking, “What’s the difference between Typekit and @font-face?” The difference is this: CSS @font-face is a web standard that, right now, is hard to implement reliably; Typekit serves fonts via CSS using @font-face, and makes it reliable and easy. The code served by Typekit is standards-compliant, and is updated automatically for you as often as browsers and web standards change.

  • Another useful resource is http://onlinefontconverter.com/.

    It offers a very convenient method for getting your font in all the desired formats.

  • Unless you have developed the font yourself (or it is open source) the @font-face tag constitutes the illegal distribution of the font software since directly posting the .ttf or .otf files on your web server will violate your license agreement for commercial fonts. Furthermore, Chris Wilson of Microsoft expressed that Microsoft (and, by proxy, Internet Explorer) should not support Font Linking in it’s current form. Full article is HERE

  • Hi Michael,

    Unless you have developed the font yourself (or it is open source) the @font-face tag constitutes the illegal distribution of the font software since directly posting the .ttf or .otf files on your web server will violate your license agreement for commercial fonts.

    That’s not true in all cases. Certainly, before using a typeface on the web, designers should know what is legally allowed or forbidden. But Font Squirrel has a checkbox in its sidebar showing only @font-face legal typefaces, and there are many available. Typekit serves fonts using the @font-face tag, and its entire library is legal for web use. Many of these are commercial fonts.

  • The difference is this: CSS @font-face is a web standard that, right now, is hard to implement reliably; Typekit serves fonts via CSS using @font-face, and makes it reliable and easy. The code served by Typekit is standards-compliant, and is updated automatically for you as often as browsers and web standards change.
    Sorry to be a hard-ass Tim but these are empty, unsubstantiated claims. What do you mean by reliably? How and why would what Typekit do for me be more reliable than what I can do for myself? How can the code served by Typekit be standards-compliant when there is as yet no CR standard (CSS3 remains a Working Draft and in order for IE 6,7, and 8 to conform, in some cases the internal font data has to meet certain criteria). But really, the main issues are, file formats and conversions? TrueType versus OpenType CFF, etc.
    Further, the claim of “updating automatically for you as browsers change” appears particularly suspect because even though Opera 10.51 has a well-functioning @font-face implementation, TypeKit as yet, sill fails to deliver web fonts to it.
    Check it out:
    Outras Fontes
    Hey, you know me – pushy, pushy, pushy.
    Cheers, Rich

  • Thanks a lot Tim! I love the @font-face generator as a lazy css’er ;)
    But if Typekit makes it much easier to implement as you mentioned, think i’ll give it a try :)

    It is really crucial to be able to use different fonts on clients’ design. Since they usually hate imaged writings…

  • Eve

    Thanks a lot! I’ve been using sIFR for so long that it’s really awsome to have some better alternatives :) I’ll try font-face right away

  • Font Squirrel is just so great, those times when trying to be more active is just such a pain…. :)

  • Thank you. I’ve been using sIFR for so long that it’s really awesome to have some better alternatives :) I’ll try font-face right away

  • The free fonts are allright too. Thanks

  • Thanks for the fonts

  • I’ve been using sIFR for so long that it’s really awesome to have some better alternatives .Certainly, before using a typeface on the web, designers should know what is legally allowed or forbidden. But Font Squirrel has a checkbox in its sidebar showing only @font-face legal typefaces, and there are many available.

  • Thanks for the info, wasn’t aware of Font Squirrel… an excellent resource.

  • Very interesting, I didn’t know the difference between the two kits. I also had this question cross my mind here and there. I always thought Typekit was easier, at least I used it a lot and always got great results!

  • Thanks for the converter, Barney. Definitely makes things easier!!

  • I’m slightly confused, you say @fontface has been a standard for 10 years but then you go on to say that browser support for it varies. Which is it? A standard or unreliably supported feature? It can’t be both.

  • These alternatives are quite profitable and beneficial for us. Thanks for introducing these new fonts to us. Good tips.

  • yea, I didn’t know the difference between the two kits. I also had this question cross my mind here and there. I always thought Typekit was easier

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.