Archive

Archive for May, 2010

Details on the new Google Webfont API

May 19th, 2010
36 comments

As you might have see, Google now offers a full webfont API. Luckily, they let me dig into the service and code a few weeks back. So let me give you the lowdown on the features and what you can do with it…

Here's adding a @font-face declaration for Tangerine, a nice scripty font:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

You'll then reference it font-family:Tangerine and be all set. As for something a bit more complicated:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Inconsolata:italic,bolditalic|Droid+Sans">

There's Inconsolata regular, italic and bold-italic and Droid Sans regular.

There is a high-quality curated portfolio of open fonts available (Raph Levien, designer of Inconsolata guided this project). And view the real documentation on the CSS api.

Obviously there are huge caching benefits to using the Google Font API, plus they're very focused on performance and you can expect things to be fast and FOUT to be minimized. But on the topic of FOUT…

The WebFont Loader is also making its debut. This is a javascript library collaboration between the good boys at Typekit and Google. It basically allows a lot of control over the display details of webfonts.

Let's say you want Firefox to not have the FOUT, but rather mimic webkit's behavior of invisible text until the font is loaded:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style>
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 
  }
</style>

The WebFont Loader API provides some classes on the <html> element (a la Modernizr) and a bunch of javascript callbacks.

Check out all the WebFont demos, showing off all its capabilities. One of my favorite parts is that you can use the events and hooks it provides with your very own hosted fonts (in that demo I load Taggeschrift from paulirish.com).

The webfont loader is now an open-source project on github. Feel free to peek under the covers. Oh and do check the project docs: getting started, webfont loader, technicalities, and faq.

Ask any questions in the comments and I'll do my best to clarify. :)

2010.05.19: The Google webfont previewer tool (with jQuery!) is pretty tight, too.

2010.05.20: Update via Florian to use .wf-loading to hide for FOUT prevention.

Take a look at some of my other (recently updated) webfont stuff:

Paul Irish front-end development, typography

My harmonious background canvas

May 17th, 2010
24 comments

So I happened upon squaredesign site and was impressed by their trippy background squares that responded to mouse movement (tutorial here).

Illustration done with Harmony
I got jealous and wanted my own interactive background. Plus @miketaylr's is mad sweet. Turns out, I'm lazy. Never fear. Mr Doob recently put out the magical canvas procedural illustration application Harmony and generously licensed it MIT.

I adapted the code for use as a background, but felt like it still missed something. It needed an easter egg. Oh yes. Taking inspiration from the Harmony Harmony meme (example), I decided an Erasure music video was in order.

Leveraging code from the $1 Unistroke Recognizer (which is righteous), it takes snapshots between drawing pauses and looks to see if you drew a star. If it thinks you did.. then:

The code for the bg integration is on github: /paulirish/harmony
The code for doob's harmony app is on github, too: /mrdoob/harmony

Take it for a spin if you like. Experiment with some of the other brushes. Thanks again to powerhouse Mr Doob for sharing such beautiful work.

(I'll probably be removing the drawing canvas in a week or so. It's a bit of a resource hog!)

Paul Irish javascript

@font-face gotchas

May 5th, 2010
44 comments

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

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.

2010.05.10: Added IE6 security issue from Wouter.

2010.05.13: Added segmented font/text-shadow issue.

2010.05.17: Link to linux @font-face research

2010.05.22: Media Queries firefox failure added.

2010.05.29: Cross-domain tricks added. SVGz trick added

2010.07.06: Added a bunch around SVG fonts

Take a look at some of my other (recently updated) webfont stuff:

Paul Irish typography

Bug tracker short urls

May 4th, 2010
2 comments

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!

2010.07.22: Mihai of the google reader team added a nice new one for chromium changesets: http://crrev.com/41850
Mozilla also has a mysterious URL shortener for all of their MDC docs and such, but I don't know how it works other than bit.ly using it automatically. *magic!*

Paul Irish front-end development

i left this space here for you to play. <3