Tag: firefox

Optimizing @font-face For Performance

Post date 7/3/2009
17 Comments on Optimizing @font-face For Performance

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.

Tags css, firefox, firefox 3.5, font, font-face, Mozilla, optimization, performance

Mozilla

Firefox 3.5 Released

Post date 6/30/2009
2 Comments on Firefox 3.5 Released

Firefox 3.5 has been released. Click the logo above to get it now. If you don’t know why you want it, read my blog post from a few days ago about things you’ll love about Firefox 3.5.

Tags firefox, firefox 3.5, Mozilla, release

Mozilla Web Development

@font-face Hacks

Post date 6/29/2009
5 Comments on @font-face Hacks

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.

Tags css, firefox, firefox 3.5, font, font-face, Mozilla

Mozilla Software

Capturing User Innovation

Post date 5/30/2009
2 Comments on Capturing User Innovation

Building a new product is always fun. You draft ideas, generate wireframes, mockups, prototypes, you build your app, you tweak it, you release it. In the case of software and web applications you also get to update it and make it better. If it’s hardware, you work on a 2nd revision to be sold a year later to people who didn’t adopt early (jab at early adopters).

One of the most interesting things is how users actually use the product you make, if they use it at all. Do they use it a little or a lot? Do they use it as intended? Do they find things missing? To robust for their taste? Or do they just find uses and modifications that all the engineers involved never in a million years would have contemplated?

Tags firefox, innovation, software-development, twitter, user experience, user innovation

Mozilla Open Source

Theora Improvements

Post date 5/9/2009
6 Comments on Theora Improvements

I mentioned back in January that there was a push to improve open video, something I think is very important for the future of the web. Chris Blizzard pointed to a recent Theora update which includes screenshots of the progress that has been made. It’s very impressive to actually see. Even more impressive is the mention that it’s using the “same encoder parameters, equal bitrates”. This isn’t just turning up the bitrate in an attempt to improve quality.

Since these improvements are in the encoder rather than the format, or the playback library that means existing Theora users, as well as all Firefox 3.5 users will be benefiting from the work already done, as well as work done in the future without needed continued software updates, though I bet even playback will get some improvements over time.

Even better is that open video is free unlike most other formats out there.

Tags firefox, Mozilla, ogg theora, video

Mozilla

Reasons To Use Internet Explorer

Post date 3/10/2009
20 Comments on Reasons To Use Internet Explorer

They forgot about “target of profanities while testing my web code”, though that might require a second pie.

Firefox got a 2nd mention on “The Cheezburger Network”, though I couldn’t bare to back to back posts.

Next few blog posts need some substance I think.

[Via GraphJam]

Tags firefox, internet explorer, internet meme, lolcats, Mozilla

Mozilla

Firefox Has Crashed

Post date 2/9/2009
2 Comments on Firefox Has Crashed

Someday these may stop being amusing. Obviously not today. If you’ve got an alternate caption leave a comment.

[Via: icanhascheezburger.com]

Tags firefox, lolcats, Mozilla

Apple Mozilla

3rd Party Web Browsers For iPhone

Post date 1/14/2009
1 Comment on 3rd Party Web Browsers For iPhone

There’s some buzz around the web regarding 3rd party web browsers for the iPhone now appearing in the App Store. This really isn’t as good as it sounds. In fact, it’s misleading. From what I can tell they are all using WebKit (Safari) API’s. UIWebView to be specific. These are just applications that serve as an alternative UI for WebKit.

This isn’t even totally new as there are several apps that have done this in the past, the most popular being Twitterrific who ships a “mini-browser” for the purpose of viewing links in tweets without leaving the application. What’s new is that an application’s sole purpose can be a browser. Though there’s no official word on a policy that I know of.

That means no you will not see Java, you will not see Flash, you will not see Firefox. You may perhaps see some user experience improvements which of course are welcome, but not another “browser”.

Tags Apple, firefox, iphone, safari, WebKit

General Mozilla Personal

Happy Festivus

Post date 12/21/2008
2 Comments on Happy Festivus

Festivus Pole As everyone knows, today is Fetivus. So happy Festivus.

For those who need some background, they can read my previous post from 2006.

Hopefully we can get bug 394616 fixed so Firefox doesn’t mark Festivus as a misspelled word. It’s getting annoying (I know I can add the word, but I periodically clean things up and that goes away). That said, a spell checker’s ability to correct my amazingly wrong spelling of Hanukkah is amazing. No matter how badly I misspell it, and I can assure you I do a great job of it, Firefox always knows what I want. If you haven’t tried that before, give it a go. Someone told me a long time ago Hanukkah is one of the best words to test the abilities of a spell checker with. This is true either because spell spell checkers require skill to fix it, or because it’s so easy to misspell. Next time you need to review spell checkers, this is a test you can use. you’re welcome.

While I’m on the topic of holidays, here’s a Christmas message from a monkey as the queen typically does. It’s pretty well done for a YouTube video.