Tag Archives: firefox 3.5

Optimizing @font-face For Performance

Posted on by
17

You want to use @font-face, then you realize it’s got some downsides. First of all, it’s another http request, and we know that the golden rule of web performance is to keep http requests to a minimum. Secondly fonts aren’t even small files, they can be 50k+ in size. Lastly the lag of fonts loading last means you page seems to morph into it’s final form.

Here’s a cool little optimization. By using a data: url you can use the font inline by encoding in base64. For example:

@font-face {
    font-family: "My Font";
    src: url("data:font/opentype;base64,[base-encoded font here]");
}
 
body {
    font-family: "My Font", serif
}

You can see this in action here. This seems to work fine in Firefox 3.5, and Safari 4 (presumably any modern WebKit based browser). Other browsers will simply act as if they don’t support @font-face.

In practice I’d recommend putting it in a separate stylesheet rather than inline css so that your pages are smaller and css can be cached for subsequent page views.

Data url’s are part of Acid2, which most modern browsers either pass or plan to pass. If you use an Open Type font you’d get pretty decent compatibility (IE only supports Open Type). Using True Type you’d still get pretty good compatibility sans IE. Check the @font-face page on MDC for more details. Unlike images, browsers that support @font-face are likely to support data: url’s as well, making this a pretty good solution.

Special thanks to Open Font Library for having some nice free fonts with awesome licensing. This post was partially in response to a comment left the other day on my @font-face hacks blog post.

@font-face Hacks

Posted on by
5

I’m going to make a bold prediction on the night before a certain web browser is scheduled gets an upgrade. @font-face (MDC) will change web design, but not just for typography. As I suggested a few days ago, to use a font on the web it needs to sit on a webserver so the browser can download it, hence the website is “distributing” the font. Licensing for many fonts doesn’t currently permit this, making @font-face for fonts somewhat problematic and hard to use… at least today.

Cool Trick!

Rule #1 of Steve Souders popular book “High Performance Web Sites” is simply:

Make Fewer HTTP Requests

That said, @font-face can be essentially as an image sprite by creating your own font with the glyphs you want. Unlike image sprites they aren’t hacky in nature requiring tricky coordinates, nor are they obnoxiously memory intensive (and a drag on mobile devices). Firefox also loads fonts last, so you can be assured it won’t slow down the rest of your page. They also degrade nicely for devices that don’t support them.

Of course this changes webdesign to use simpler icons and pick 1 color per glyph… but there are some pretty interesting enhancements for example the ability to scale. Fonts are designed to resize much better than an image.

The other caveat is that this can make your markup slightly ugly. However it’s not so bad when your building something in JavaScript. Consider for example implementing Pac-Man. Rather than a dozen images, or some complex sprite you can simply move <em>p</em> around. You can have quite a few glyphs in 1 font file.

Of course you can also use <canvas/> or a data: url to embed images, but IE doesn’t support <canvas/> and only recently started supporting data:. IE has supported OpenType (not TrueType) fonts since IE 4.

I’d be curious if anyone actually implements this and how well it works in practice. It’s not a true replacement for image sprites, but for a few cases, such as simple icons, it could actually do the trick.

Um What?

This trick can also be engineered to work against the way the web traditionally works. For example, I could create a ROT13‘d font or any other encoding I imagined. This essentially lets you remap the way characters are on the page, and the way they appear. For example on the page may appear:

<span class="rot13font">rknzcyr@qbznva.gyq</span>
<small><strong>Note:</strong> Do not copy/paste my email address</small>

That looks like a totally invalid address, but with a ROT13 font, you’d know what it is… though if you copy/paste it you’re going to get the encoded version. (I could in theory course engineer some JS to ROT13 the string). This also could deter some spam bots, which lore says have found ways around JS munging.

Conclusion

Moral of the story: @font-face can be fun for more than just typography. Cult of Helvetica be damned… all you typography geeks.

Things You’ll Love About Firefox 3.5

Posted on by
25
For the upcoming Firefox 3.6 release: go here!

Firefox 3.5 is around the corner. For those who don’t pay attention to development here’s the big features worth checking out. There are lots more, but these are my favorites:

User Centric Features

Private Browsing – Officially it’s called “Private Browsing” but most know it as “porn mode”. Simply put once you turn on the feature nothing about your browsing is saved to your computer until you turn it off. No browser history, cookies, cache, no passwords, download list. Great for shared computers where you may not want the next person to know where you shopped, what you bought etc.

Faster JavaScript – Everyone is doing it. Firefox 3.5 now ships with TraceMonkey which uses a technique, called trace trees to add just-in-time native code compilation to SpiderMonkey, the JS engine in Firefox. Bottom line: faster JavaScript makes JavaScript powered sites like Gmail way faster.

Faster Awesomebar – The awesomebar is a fast way of browsing the web, but the UI can sometimes get a little sluggish. Some awesome work has been done to optimize it for better performance. Faster UI = better browsing experience.

Better Awesomebar – The Awesomebar got a few enhancements including autocomplete for tagging, which is extremely handy as well as editing tags on multiple bookmarks at the same time.

Undo Closed Window – We’ve all done it before. Now you can undo a closed window just like a closed tab.

Drag Tab To New Window – Previously you could drag/drop to reorder tabs. Now you can drag a tab off the tab bar to move it into its own window. This may sound trivial but it actually makes organizing tabs much easier.

Video/Audio – Firefox 3.5 supports the new HTML5 <video/> and <audio/> tags. Specifically it supports Vorbis in Ogg containers, as well as WAV with support for more formats expected in the future. I’ve discussed open video before and suggest learning more about how important this is there.

SSL Error Pages Suck Less – The error pages shown when there is an SSL error were pretty tough on users since they didn’t display anything helpful. The new error pages are a bit more helpful. The bug implementing the changes has tons of details on the changes.

Geolocation – Simply put a website can (if you allow it) gather information about your internet connection and using a location service (provided by Google by default) will calculate your location. No more needing to constantly type in your zip code, or city name to get local information. For privacy you need to explicitly allow it. Geolocation is in a word awesome.

New Icon – Well, it’s not really new. It’s “refreshed” I guess. It’s not a huge change, but it does look really sharp, especially in more modern operating systems that use larger icons like Mac OS X. Alex Faaborg has it on his blog in various sizes for you see.

Developer Centric Features

Web Workers – My personal favorite is web workers. Essentially its background processing in a separate thread for JavaScript. No more locking up the browser’s UI because you need to do some complicated JS calculations. I’ll leave it to the documentation linked above for examples. Very handy stuff.

@font-face – Designers have long been frustrated with the lack of font options on the web. They often resort to using images and flash as a way to expand their font options. With @font-face it’s now possible to use custom fonts and reference them via css. There is however the issue of licensing of fonts used on a webpage since the font file itself is accessible via a web browser.

Native JSON Enough said. Native JSON is fast. var obj = JSON.parse(someJS);

Cross Site xhr – xmlHttpRequest() has ushered in a new era of JavaScript. It’s not however without some serious limitations. One of the most obvious limitations is that you can’t use it across hostnames. Until now.

There’s more cool toys, but these are my favorite.

Still not convinced of all the new stuff? Check out this demo, then look at the source behind it. It’s pretty impressive.