Surfin' Safari

Downloadable Fonts

Posted by Dave Hyatt on Wednesday, October 3rd, 2007 at 10:22 pm

WebKit now supports CSS @font-face rules. With font face rules you can specify downloadable custom fonts on your Web pages or alias one font to another. This article on A List Apart describes the feature in detail. All of the examples linked to in that article work in WebKit now.

@font-face is on the WebKit feature branch, and a nightly build of that is available. You can try it out here.

45 Responses to “Downloadable Fonts”

  1. Pingback from soeren says » Blog Archive » WebKit @font-face support:

    [...] Safari: “Downloadable Fonts” WebKit now supports CSS @font-face [...]

  2. Pingback from Bram.us » CSS Downloadable Fonts in Webkit:

    [...] am excited: WebKit now supports CSS @font-face rules! Awesome news to start the day with! Spread the [...]

  3. kelmon Says:

    This does sound really cool but I have to ask this question – are fonts downloaded from arbitrary URLs a security risk? I honestly have no experience in computer security but I do wonder whether downloadable fonts could be used as an attack vector (I think that’s the term…) on WebKit applications. Is there any way to ensure that fonts are only downloaded from trusted sources?

    Love the idea but I have my paranoid hat on today.

  4. Pingback from Wolf’s Little Store » Apple Trees theme, Webkit supports @font-face:

    [...] a sidenote, office neighbour Bramus discovered the news of the day: Webkit now supports a @font-face rules! That brings us one step closer to better typography on the [...]

  5. Robin Says:

    Kelmon – yes, they’re an attack vector. But then so is anything you download from the net. For example, Safari used to crash on certain images:

    http://www.drunkenblog.com/drunkenblog-archives/000635.html

    That theoretically could have been an attack vector. Even plain on HTML theoretically could put Webkit into a buffer overflow or some other exploitable condition; that’s what Michal Zalewski’s mangleme fuzzer was all about:

    http://lcamtuf.coredump.cx/mangleme/gallery/

  6. Pingback from Webkit has web fonts support - CSS3 . Info:

    [...] The latest Webkit builds now support the @font-face rule, which we wrote about some time ago. Recent articles by Håkon Wium Lie had indicated that Opera might be first to market with this, but the Webkit team seem to have beaten them to it. [...]

  7. kelmon Says:

    @Robin

    Thanks for the information. I trust that these concerns are considered before code is released if this is a problem that can be anticipated. New features are great as long as they don’t enable bad headlines later that undo the good work being done.

  8. jacobolus Says:

    What great news. If picked up by other browsers, this will further the cause of fonts with open licenses more than anything we’ve seen.

  9. Robin Says:

    kelmon: Thorough security review should be part and parcel of any code check-in to a network-enabled product. Doesn’t always happen like that but you’ve got to have ideals. To be fair to the Webkit team in general they’ve been really good with security issues.

  10. Geoffrey Sneddon Says:

    What font-face formats are supported? Whatever the environment allows?

  11. Sören Nils 'chucker' Kuklau Says:

    Geoffrey: this changeset says only TrueType for now:

    Land support for the CSS @font-face rule. This patch allows custom fonts
    to be downloaded from the Web and rendered in Web pages. Right now only
    TrueType fonts are supported. Proprietary formats like .eot are not
    supported.

  12. Pingback from Michael Tsai - Blog - Downloadable Fonts:

    [...] Dave Hyatt: [...]

  13. Dave C Says:

    While this is great for typefaces with open licences, what about commercial designs? Apple and Microsoft spend a great deal of money for the distribution rights for the typefaces bundled with their operating systems, but this does not extend to their users. What is stopping someone from inadvertently distributing Gill Sans (bundled with OS X for free, but $479 to buy the family from Linotype) to the rest of the world?

    I know there is nothing stopping someone from taking those same files and posting them to the web or a P2P network, but people doing that know they are distributing the files (even if they may not understand the legal implications). Someone who just wants their website to look a little better may not realize they are illegally distributing a licenced piece of software (font files have been defined as software by US courts and are subject to copyright laws).

  14. Pingback from glyphobet • глыфобет • γλιφοβετ » Blog Archive » WebKit adds embeddable font support:

    [...] Embeddable fonts in webpages; we only had to wait nine years for a browser to implement this.  Yet another reason to hold my breath for a WebKit browser on Xorg. [...]

  15. Pingback from The Nested Float » A Big Step Forward for Web Fonts:

    [...] This is exciting news. Webkit, Apple’s publicly available testing ground for future Safari features, now supports web fonts. You can read more about how web fonts work here. [...]

  16. Greg K Nicholson Says:

    Congratulations—WebKit is really starting to pwn Gecko now. It’ll be great to see WebKit as an option in Epiphany.

  17. Trackback from MarcArea Weblog:

    @font-face dans WebKit…

    Depuis cette nuit WebKit supporte la règle @font-face qui permet entre autre d’indiquer une adresse URI pointant vers les données d’une police (voir la spec sur @font-face). En clair on peut spécifier l’URI d’une police à utiliser et par consé…

  18. Pingback from Electriblog » Blog Archive » Downloadable fonts (finally!):

    [...] October 4th, 2007Downloadable fonts (finally!) Dave Hyatt posted it yesterday and I read it on Typographica today: Webkit (the application framework that is the basis of Mac OS [...]

  19. Trackback from meneame.net:

    ¡Tipografías descargables para navegadores web, al fin!…

    Lo publicaba ayer Dave Hyatt en el blog de Webkit (el motor del navegador Safari, que podría estar disponible para KDE): ya se encuentra disponible una versión que admite la propiedad @font-face, que le indica al navegador el fichero TrueType que deb…

  20. Damian Says:

    Thank you!, thank you!, thank you!, thank you!, thank you!
    I’ve been waiting for this for a long time. Why it took so long?, I don’t know, but I’ve been thinking about this probably since 1996.
    I hope other browsers jump on the wagon too.
    Thank you very much, indeed!
    You made one happy designer today… :-D

  21. Pingback from "Embedded" Web Fonts Return. Uh-oh.:

    [...] web is about to become more beautiful/hideous. Dave Hyatt of the WebKit engine used by Safari: WebKit now supports CSS @font-face rules. With font face rules [...]

  22. Dave C Says:

    Adobe has developed a tool for use with their Mars project (http://blogs.adobe.com/mars/2007/10/font_obfuscator_tool.html) that encrypts a font file and embeds a DocumentID. The font can then only be used in the document with the matching ID.

    Could something like this be used with @font-face? Say I want to include a commercial typeface in my webpage. Rather than post the raw .ttf which anyone could copy, could I make an encrypted copy the file embedded with the URL of my specific page or site. If the browser confirms that the URLs match, only then would it decrypt and display the font.

    This “encrypted font” technique has actually been used by Microsoft with their EOT font format since IE4.

  23. Pingback from Webreakstuff » Webkit gets @font-face:

    [...] Rejoice, for the blogosphere bears good news today – Webkit (the engine behind Safari) joins Opera in supporting @font-face rules in nightly builds. This means it includes the necessary functionality to link to [...]

  24. Pingback from Ajaxian » Webkit joins Opera with @font-face support:

    [...] Apple cares about typography, so it only makes sense that Webkit has joined Opera in supporting @font-face. [...]

  25. Pingback from : Winstons blogg:

    [...] ”WebKit now supports CSS @font-face rules” [...]

  26. Pingback from Javascript News » Blog Archive » Webkit joins Opera with @font-face support:

    [...] Apple cares about typography, so it only makes sense that Webkit has joined Opera in supporting @font-face. [...]

  27. doekman Says:

    Pretty cool. Only a shame those a-list-apart-examples don’t really work..

    The rendered html looks exactly as in Camino and Firefox. And I’m using today’s build of WebKit…

  28. hyatt Says:

    doekman: You need to download a nightly build of the feature branch. This is not in normal nightly builds of the trunk. Follow the link in the blog post.

  29. doekman Says:

    Hyatt: I completely missed that last line! I must be a st*p*d consumer, or something…

    But it really looks cool! Font rendering is a bit different from Prince, but that must be the Apple Windows thing?

  30. Pingback from Current Events: Accessibility Importance and Downloadable Fonts - Monday By Noon:

    [...] latest nightly builds of WebKit now support downloadable fonts via @font-face rules. This too, is pretty big news. The ability to unobtrusively include a [...]

  31. ain Says:

    Can’t wait to use it in favour of WebKit users. It’s good to see that WebKit moves further than just Acid2 compatibility

  32. ain Says:

    Just had a bit of the time to test it. None of the samples on A List Apart really worked and I’m running the latest nightly. Am I missing out something? Could it be a bug?

  33. Mark Rowe Says:

    Note that it’s only available in nightly builds of the feature branch. Follow the link at the end of the article to reach the download page for that branch.

  34. StrawMan Says:

    Any possibility of a pre-compiled feature branch binary for Windows?

  35. Mark Rowe Says:

    I’m working on getting that set up. It should be available in a few days time.

  36. Pingback from Notional Slurry » links for 2007-10-13:

    [...] Surfin’ Safari – Blog Archive » Downloadable Fonts via some bigot (tags: typography fonts Apple safari web-design browsers HTML software design) [...]

  37. ain Says:

    Got it working just fine. Support for Web Fonts sounds splendid so far. Let’s hope Mozilla catches up.

    Please find the article on WebKit’s Web Fonts support here.

  38. Brad Says:

    This is amazing, and I am happy to see it in the main trunk now. I noticed that the fonts in the “A List Apart” article download pretty quickly, but I am concerned about people with slower connections. Will a substitute font be shown while the font downloads (something from the font-face list)? I believe IE did that with their implementation.

  39. Pingback from Surfin’ Safari - Blog Archive » Ten New Things in WebKit 3:

    [...] talking about a lot of great new features in the latest development trunk of WebKit – features like web fonts, client-side database storage, CSS transforms and CSS animation. But I’d like to take a step [...]

  40. Pingback from Ten New Things in WebKit 3 « outaTiME:

    [...] talking about a lot of great new features in the latest development trunk of WebKit – features like web fonts, client-side database storage, CSS transforms and CSS animation. These features will likely make it [...]

  41. Pingback from Runtime wars (2): Apple’s answer to Flash, Silverlight and JavaFX « counternotions:

    [...] Downloadable fonts let designers specify downloadable custom fonts via CSS @font-face [...]

  42. Pingback from Ten New Things in WebKit 3 · Style Grind:

    [...] talking about a lot of great new features in the latest development trunk of WebKit – features like web fonts, client-side database storage, CSS transforms and CSS animation. These features will likely make it [...]

  43. Pingback from Surfin’ Safari - Blog Archive » Welcome to Planet WebKit:

    [...] Safari has always been a great place to get information about WebKit, from descriptions of the many new features being added to technical discussions of engine internals to announcements of WebKit [...]

  44. gazhay Says:

    Ok, I know I’m late into this topic, but here goes…

    Is there any support for fonts (CSS @font-face preferred) within the canvas element?
    It really is a pita to have to keep creating transparent png files for each letter you might want to use on a canvas (and then pre-load them all too!)

    Judging by the way the font is downloaded it seems fairly simple to then link this into the canvas object. Please!!

  45. grfgguvf Says:

    Also late here…

    If you look at the reporting of this news (Google News for ‘WebKit @font-face’), it’s all about how WebKit got the support now in addition to Opera. I’d just like to point out how completely wrong this is.

    IE has long had support for web fonts, but not .ttf fonts, only .eot ones. Similarly Mozilla has had support for a long time, but not for .ttf. And Opera doesn’t support @font-face at all, not even their latest preview version…

    So actually it’s WebKit first to have useful web font support.