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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s