Paul Irish

Over the past few months, I've collected a few worthwhile notes on @font-face that are worth reading over if you geek out about this stuff…

• in Webkit (Chrome/Safari), applying font-weight:bold to faux-bold some @font-face'd text will not succeed. Same applies for font-style:italic. You can fix by adding the following to your @font-face declaration: (via doctype, crbug/31883, crbug/35739, webk.it/34147)

      font-weight:normal;
      font-style:normal;
      font-variant:normal;
      /* these values are defaults in FF/Opera/IE but not webkit */

• FF/Linux cannot serve webfonts from the file:// protocol. (Also, a tome on type quality with linux from Evan Martin)
• TrueType format renders with a better quality than Opentype CFF. (sez Typekit) (fontsquirrel default)
• In IE6-8, using createStyleSheet and then setting styleElem.styleSheet.cssText to a text value that includes a @font-face declaration going into will crash IE6-8. (src)
• font-size-adjust (only supported in Firefox) normalizes x-height and may improve the FOUT.
• text-transform doesn't play well with @font-face in current implementations. (via snook & Gary Jones)
• @font-face doesnt play nice with css transitions. (via ethan marcotte)
• IE6 under High Security settings will pop a security dialog when a site tries to use @font-face. (via Wouter Bos)
• There have been reports that when a font is segmented into multiple files, a css text-shadow can overlap in a weird way. (pics plz? :)
• Aaron James Young dug into @font-face on obscure linux-only browsers.
• If a @font-face declaration is within a media query @media screen { ..., it will fail in Firefox. (Thx Ben Kulbertis) http://bugzil.la/567573
• Hosting the fonts on a different domain? Firefox requires some extra effort; you'll need to add the Access-Control-Allow-Origin header, whitelisting the domain you're pulling the asset from. Example .htaccess config here. Alternatively, you can use the base64 encoding in CSS (create it with the fontsquirrel generator) to avoid setting headers. details here
• SVG Fonts - Currently SVG is the only way to get webfonts working on iPhone and iPad. It is the most rudimentary format for fonts on the web.
  • SVG Fonts lack kerning and other complementary information
  • SVGz is a format that bakes compression right in and will save you bandwidth overhead. But you'll need to add this to to your .htaccess for this benefit. AddType image/svg+xml svg svgz AddEncoding gzip svgz (via @fontsquirrel)
  • SVG fonts don't work with a cache manifest. Due to the manifest treating # as comments and Mobile Safari requiring the font ID reference in the URL. [Unverified] (via Tristan Dunn)
  • Using text-overflow: ellipsis; turned the contents into only "…" and nothing else. (via Tristan Dunn)
  • Letter-spacing css doesnt appear to work with SVG fonts.
• IIS Needs some custom mimetype configuration for serving webfonts. To enable, go to: Default Web Site > Properties > HTTP Headers > File Types > New Type…
  • .otf : font/otf
  • .svg : image/svg+xml

  (thx ProtectedVoid & Tom Nelson) — Test page

@font-face links that might have sneaked past you

• @font-face internationalization tests from the W3C
• Kernest open-sourced its font server, Fontue
• Bert Bos gave the full history of webfonts at SXSW

And.. regarding @font-face syntax

I now recommend the bulletproof smiley variation over the original bulletproof syntax.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('?'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

From the bulletproof post:

Yes, it's a smiley face. The OpenType spec indicates any two-byte unicode characters won't work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name.

There are a few reasons why smiley is a better solution:

• Webkit+Font Management software can mess up local references, like turning glyphs into A blocks.  (crbug.com/33173)
• On OS X, Font Management software may alter system settings to show a dialog when trying to access a local() font that's accessible outside of Library/Fonts. More detail on my bulletproof post. (crbug.com/29729) Font Explorer X is also known to mess up other stuff in Firefox: bugzil.la/531771
• Although it's unlikely, you could reference a local() font which is completely different than what you think it is. (Typophile post on different fonts, same name) At the very least its a risk, and you're ceding control of the type to both the browser and host machine. This risk may not be worth the benefit of avoiding the font download.

These are all pretty edge case issues, but it's worth considering. FontSquirrel has already made the smiley syntax the new default in the Generator, and you should use it going forward as well.

I've found myself filing and watching tickets on browser bug trackers a lot more lately.

Turns out, they have some handy shorturls which make for easy linking to tickets.

http://webk.it/19264 for webkit
http://bugzil.la/475606 for firefox/mozilla
http://crbug.com/11359 for google chrome
http://crosbug.com/59 for google's chrome os

In fact, the webk.it URLs are debuting today! I luckily convinced Wolfango Chiappella of Wolfango'Studio (who owns the domain) to set up a redirect. Grazie di cuore!

Big news! (for me, at least) I'm taking a position on the Chrome team doing Developer Relations. I'll be evangelizing HTML5, Chrome, Chrome OS, and everything under the Open Web umbrella. It'll be a bunch of writing, speaking, tutorials and guides, and engagement with the developer community. (Hey guys! :)

As I'm very passionate about all this, I'm quite excited about this opportunity. Google Chrome has become the browser to beat very quickly. It's a solid platform for browsing and developing as well. I can't wait to join the team and start kicking ass, making Chrome ideal for developers and pushing the open web forward.

As part of this, I'm also moving to San Francisco. Farewell, my dear Boston. *sniff* :(

I'm leaving an incredible team of UX architects, interactive designers, software engineers, and front-end developers at Molecular/Isobar. It's been 3.5 years and I would've easily stayed longer. If you're in Boston, Toronto or SF and want to develop incredible sites and apps for high-profile clients, I couldn't recommend working there enough. <3z

This is all happening over the next 60 days, along with a busy schedule of JSConf, Bay Area jQuery Conference, TXJS, and a few weddings.

I plan to continue to be active in the jQuery community (thx to my compadre Karl Swedberg for the referral!), and continue developing Modernizr and CSS3Please. I also got a few more projects on the way. Exciting times. :)

This weekend I hung out with some SVG all-stars and learned how SVG, HTML, and CSS can combine for some badass visual filters applied to content. Clearly it's the most fun to apply it to <video>, though I could have done it to any HTML. Peep the video:

Demo page: SVG filters on html5 <video> (requires a Firefox nightly)

Blur is certainly the most useful, I'd say. For instance, Mike Matas's new site could dynamically blur the images instead of manually cutting blurred jpgs.

Leave a comment if you can think of other use cases for filters like these on your HTML content.

Man, whenever I'm writing some css3, I get so tired of writing all the vendor-specific prefixes (like -moz-border-radius). Combo that with remembering who supports what and I wantedneeded a shortcut.

Today, I'm happy to release v1.0 of css3please.com: a cross-browser css3 rule generator, produced by Jonathan Neal and myself. In addition to syncing and normalizing changes across the necessary properties, it also sneaks in IE support for a few features via IE filters. Right now it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation and @font-face. A few more transforms like skew and scale are on their way, stay tuned.

Shouts to all the good people doing research and making tools in the css3 arena: John Allsopp, Chris Coyier, Stoyan Stefanov, Damian Galarza, Ryan Seddon, border-radius.com.

Please leave comments and feedback below.