Firefox vs Internet Explorer testing @font-face


Put together a small image showing what the page renders like in FF 3.5 vs IE8 (display is the same in IE7 as well). Click on the image for a full size view to compare how the fonts are rendered.


Here it is on the device



more reading and test website for @font-face


Found the @font-face reference page in the MDC and read a bit about the three main types of font formats supported in Firefox. TrueType and OpenType are supported in Firefox 3.5 and Web Open Font Format is supported in 3.6.

Adding support for WOFF fonts is nice because the font is compressed which saves bandwidth, and Microsoft is expected to add support for WOFF as well in the future which will make WOFF the defacto standard probably.

So I started to put together a test page to use to see what browsers I had support the @font-face rule and see just exactly how it works for the end user and I noticed on the MDC page a link to a page of examples.  So why spend time putting my own together when there is a perfect test case page already available !  It tests multiple different fonts in multiple different sizes and combination’s of bold, italics, small caps, thin, light, bold + italics, etc.

Helpful code and todays lecture


After my first pass through looking at code I noticed a lot of it was really hard to find information on , especially macros.

But after today’s class where we had a detailed look at some of the Thunderbird code I noticed tonight a lot of things like interfaces, observers, macros, etc that were similar to what we saw in class.  The code is slowly starting to make more sense.

And I happened to come across the original bug for adding @font-face support for Firefox the first time around.  I noticed references to 2 files nsFontFaceLoader.cpp and nsFontFaceLoader.h in the layout/style/ folder in mozilla-central folder.  the cpp file is filled with lots of useful code.  Definitely going to be looking at this more in depth tomorrow night and through the weekend.

The wheels of progress begin to turn


I got a chance to talk to my professor, Dave Humphrey tonight about my project.  I’ve been stuck in a bit of a rut since this weekend.  I looked at some code and tried to find my way around but was having little success. However after talking with Dave and getting some things straightened around and then talking to Mark Finkle a bit on the structure of the mozilla-central directory things started to become more clear.

In short, a list of revelations I made tonight (correct me if I’m wrong on anything please):

  1. All Mozilla apps are just a UI or shell built in XUL, CSS, and JS. They fit on top of the core Mozilla “platform” (diagram).
  2. xulrunner is what you would call a runtime environment for mozilla apps.  It is what allows the apps to run cross platform.
  3. mozilla-central is the root folder and holds all the source for the MOZILLA project.  This meaning the source files for the mozilla platform are located here.  Some folders exist that are for individual projects as well.
  4. mozilla-centralgfxthebessrc holds the .cpp files for all kinds of font management code.  I will look here for how embedded fonts work in Firefox 3.5 currently.
  5. run a “hg pull” followed by “hg update” to bring your mozilla-central folder up to date with the most current files.  Check tinderbox first though to see if the firefox or mobile versions are current building ok or burning (broken).

I plan to spend 2 hours a night for the next 4 nights reading code and blogging on what I learn along the way.

Building… a builder. And Fennec nightlies !


Since last Sunday I have had some time to poke around and get familiar with the Mozilla community and projects in general.  I managed to build Firefox at school on the Fedora machines in the open source area and also at home on my Windows 7 64bit machine.  While the Fedora build process seems easier I actually had more trouble figuring everything out on it than I did on my own machine on Windows.  Ehren Metcalfe helped me figure things out with yum and some missing libraries.

After the build on Fedora I gave it a try on my home PC on windows.  It took a little bit to figure it all out and install all the prerequisites but once I had that I only ran into one problem.

On windows 7 you must run the start-msvc9.bat shortcut as administrator in order to have permissions to complete a build.  Otherwise you will get a “Bad file number” error in the build shell. Also if you have windows 64bit don’t use the 64 bit batch file just use the 32 bit to build with (recently updated on build page in bold).

Fennec nightly and windows desktop version

I got onto the nightly ftp server and tried out the fennec-1.0b4.en-US.win32 build.  This build is made specifically to run right on your windows desktop so you can try out the browser within a windows PC environment.  So if you don’t have a windows mobile phone you can still test out the current release right on your desktop.

Adding @font-face CSS support for Fennec on Windows Mobile


Its been a few days since I mentioned that I had been poking around in Fennec on windows mobile.  I was very interested from the start and so it seemed only logical that this was something I should get some experience and knowledge on.

For my DPS909 Project I have chosen to work on implementing a feature into Fennec to support the @font-face CSS rule.

Background on Fennec and @font-face

Fennec is the working name for the mobile version of Mozilla’s Firefox browser.  Fennec is currently being developed for Windows Mobile and Nokia’s N810 which runs Maemo (Linux).  The word Fennec comes from the Fennec Fox which is a small fox found in the Sahara Desert in North Africa.  Logically it makes sense and is quite clever.  A small version of firefox ? a small fox for the logo.

fennec fox fennec_logo

The @font-face CSS rule is part of the CSS3 working draft set.  The rule is designed to allow web programmers to be able to use custom fonts on their web pages even if the users of the page do not have the custom font installed on their system.  In this case the system is the mobile phone.  The @font-face rule was introduced into Firefox 3.5 not long ago to allow for font linking support.  Why is this concept so important for a mobile browser ?  Simple.  If you want to use a custom font or even a standard font for a desktop system it may not be installed on every different phone out their depending on many different factors such as handset brand, OS platform, version number, etc.  Drive space on the device can also be a concern so you might not want to fill up a device with 100 fonts that are only ever used once in a blue moon.  Font linking with @font-face allows for the font to be downloaded as needed and disposed of after a browsing session if necessary, all transparent to the user.

The process

The information about my project will be updated mostly on my wiki page.  News about progress or random things I find interesting to write about will be here in my blog once a week or so.

We have 3 releases that are scheduled to go out.  Release 0.1 on the week of Oct 19, 0.2 the week of Nov 16, and 0.3 the week of Dec 7th.

Plan for each release

0.1 – To get some basic initial code working that can recognize it needs to grab a font and use it. basic implementation.
0.2,0.3 – Review feedback from initial reviews and make subsequent releases and fixes.

To Learn

I’ve got a lot of researching to do on this subject.  Moz-build, Mercurial, building on windows, how the @font-face code works in Firefox 3.5, the windows mobile emulators and SDK’s, and so on.  I’ve used the windows mobile SDK’s and emulators before briefly so I can handle that part fairly quickly I think but there is still a lot of dots to connect before I’ll be running smoothly.  I plan to jump into the code in Firefox that handles this and then work on duplicating its functionality within the windows mobile environment.  I will probably rely heavily on help from the irc community along the way for sure.  So far it has been extremely helpful (  I have also gotten a little bit of experience with and looked at some code for how this is done on MAC in Firefox.

Its all about who you know not what you know

Well… not in this case:) I’ve spoken to Brad Lassey (irc: blassey) and gotten some good information and a direction to go in for this project.  He has been very helpful so far.  I also spoke briefly with John Dagget (irc: nattokirai) who has had a hand in this and has a blog about the subject in Firefox 3.5 and is listed as the editor on the W3C page on the @font-face specification.

Brad suggested I look at the code in Firefox that does this functionality and go from there and it makes sense I don’t need to reinvent the wheel here.

Collaboration and Contribution

I’m not sure what kind of contributions I can make to others projects throughout the semester as I don’t think anyone else is working on anything to do with mobile right now but I will have to see in the coming weeks what everyone’s projects are.  As far as others getting involved with my project, feel free to email me or post a comment or question and I’ll look into finding answers and I’m open to any suggestions on implementation along the way.


I’m a little bit worried about how this will all pan out in such a short time frame but I’m sure I will manage to get through it.  I’m hoping once I get my feet wet and have built Fennec a few times and copied it over to the phone and run it and gotten used to how it works on bus rides into class in the mornings I’ll be more comfortable with the whole project as time goes on. I don’t particularly see any large roadblock, hazards, or risks in my path.  Just a lot of good learning and conversation on IRC in the future.

Firefox for Windows CE


I’ve had quite an interest in windows CE since Jan last year when I bought my HTC touch windows mobile phone.  I’ve enjoyed modifying it and customizing it and being able to treat it as a cross between a phone and a laptop.

I got into a little bit of windows mobile programming during the spring of this year just to do a little playing around.  So I figure since I am taking the open source course now why not look into what the story is on firefox for windows mobile ?

Well it turns out Mozilla has a project called Fennec which is the code name for a mobile version of firefox.  Windows CE is one of the platforms it is targeted to support.

I’ve had a little trouble finding a .cab file I can download to try out the beta version which is supposed to be available but I haven’t had time tonight to fully investigate (broken link on the project page to download).

I did signup for the mailing list though and I found the information for the weekly meetings.

Meeting Details:

  • Wednesdays @ 9:30AM PST (12:30PM EST)
  • +1 650-903-0800 (US/Intl) x92 conf# 8605
  • +1 800 707 2533 (US) pin 369 conf# 8605
  • #mobile for backchannel
  • Agenda and notes can be found here