Web Fonts and Web Browsers – why Firefox is the best choice for most people who don’t read in the Latin alphabet

In December the Localization team of the Wikimedia Foundation, of which i am a proud member, deployed the support for web fonts in Wikipedias in several languages of India. Put simply, this technology allows anyone with reasonably modern web browser to read Wikipedia in an exotic language without manually installing exotic fonts on his computer. Tom Morris wrote a very nice blog post that explain why web fonts matter: Web fonts were invented for making web sites niftier, but they are useful for something much more important beyond aesthetics and design – to enable people to read and write in any language effortlessly. People need to be able to read and write effortlessly using a computer, but this notion is so basic that it is frequently overlooked.

Basically, web fonts turn this:

◌◌◌◌ ◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌ ◌◌◌ ◌◌◌◌◌◌, ◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌ ◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌ ◌◌ ◌◌◌◌◌◌ ◌◌◌◌◌◌ ◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌ ◌◌◌◌ ◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌ ◌◌◌ ◌◌◌◌ ◌◌ ◌◌◌ ◌◌◌◌◌◌◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌.◌◌◌◌ ◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌ ◌◌◌ ◌◌◌◌◌◌, ◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌ ◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌ ◌◌ ◌◌◌◌◌◌ ◌◌◌◌◌◌ ◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌ ◌◌◌◌ ◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌◌◌◌◌ ◌◌◌◌ ◌◌◌ ◌◌◌◌ ◌◌ ◌◌◌ ◌◌◌◌◌◌◌◌◌◌◌◌◌◌◌ ◌◌◌◌◌.

into this:

Near the beginning of his career, Einstein thought that Newtonian mechanics was no longer enough to reconcile the laws of classical mechanics with the laws of the electromagnetic field.

Without webfonts, a person who speaks a language that is not written in Latin letters has two choices when seeing “◌◌◌◌ ◌◌◌ ◌◌◌◌◌◌◌◌◌”: to install fonts manually or to try to find that information in English or some other language that is written in Latin. Two frequently ignored facts: 1. most people don’t know how to install fonts on their computers; 2. most people don’t know English.

Web fonts make text readable without any effort from the user. Wikipedia is probably the first major website that uses web fonts for the really important purpose of allowing people to read websites in their language. This post here will highlight some technical details about the deployment.

A spoiler: Firefox rulez.


Microsoft Internet Explorer, not surprisingly, has the most issues with web fonts support. For example, it sometimes shows complete gibberish instead of the actual letters. The situation is especially bad on Windows XP; Windows XP is an old system, but it matters, because lots of people in India and in many other countries still use it – about 17% of Wikipedia’s readers use Internet Explorer on Windows XP. Even though Microsoft Internet Explorer 9 seems to handle web fonts decently, it cannot be installed on Windows XP, so it’s irrelevant to hundreds of millions of people. My advice to them – get Firefox.

Opera sucks here and there, too. For example, on a Mac, Opera may fail to show English (!) words, because it tries to show them in an Indic font, and if an Indic font doesn’t have Latin characters, the display is broken. Google Chrome has similar problems, too.

In Firefox we found practically no issues with web fonts support. The only problem with Firefox that happened during the deployment of WebFonts is that Firefox didn’t load the fonts at all, but actually that happened because Firefox implements the web fonts standard correctly. On our testing site the font files were loaded from the same server as the web page itself, while on the actual Wikipedia the font files are loaded from a different domain to improve performance. The web fonts standard says that by default a browser is not supposed to load fonts from a different domain, unless that domain explicitly allows this. Chrome, Opera and Internet Explorer override this standard and load the fonts and Firefox doesn’t. When we noticed it, we asked Wikimedia’s web server administrators to change the configuration to explicitly allow the loading of fonts. Wikimedia’s web server configuration files are open, so you’re welcome to read them by clicking the link.

I didn’t make any precise measurements, but from my personal experience Firefox has much less issues with support for Unicode, complex fonts and right-to-left text than any other browser. It surely does have issues, but my impression is that Chrome, Internet Explorer and Opera have much more of them.

We reported the font issues that we found in Google Chrome to its developers and we hope that they will be fixed. We also tried to report issues in Opera and Internet Explorer; since there’s no public bug tracking systems for these browsers, we cannot track their development.

About these ads

17 Responses to “Web Fonts and Web Browsers – why Firefox is the best choice for most people who don’t read in the Latin alphabet”


  1. 1 praveenp 2012-01-29 at 18:28

    Is this just another way to express insignificance of current webfonts on wide variety of users? ;-)

    • 2 Siebrand Mazeland 2012-01-30 at 10:33

      I don’t think so. It indicates there are a lot of browsers that have issues. Without implementing web fonts technology, it will (a) not be used and (b) the issues that there are will not surface prominently, which in turn does not allow browser makers to address them.

      For now, Firefox is the recommended choice. Let’s hope that in the future, we will be able to change that recommendation, or best case, drop it altogether. That would be a big win for the multi-lingual web.

  2. 3 aharoni 2012-01-29 at 18:29

    I’m not sure that i understood…

    • 4 praveenp 2012-01-30 at 06:13

      Webfonts has deployed on all Indic language wikies except Malayalam and Tamil. Deployment, as somebody said somewhere, was a “Dark Lauching”, without taking enough community opinion. (and without enough testing?) I remember that somebody said defending this, “webfonts is not for current community, but for the people outside the community”. I wonder if someone cannot understand current community, how they can understand people outside community. I don’t like webfonts, but I like to know why it was not deployed on Malayalam and Tamil wikies where active communities present.

      Recently (read as after 2008), Various OSs have decent Indic language support. But OS like Win XP is still popular in India. As you said in the post, All browsers except firefox miss webfonts here and there very often. And many users still uses IE6, in which webfonts will not work (but setting is available, but it is an expected behaviour – https://bugzilla.wikimedia.org/show_bug.cgi?id=33345 ) . Another big problem with webfonts extension is that it loads interface language’s font, not content language’s ( https://bugzilla.wikimedia.org/show_bug.cgi?id=33401 ).

      Additionally, like IE, GPRS and even dial-up is still popular in India. Webfonts significantly increases load size of wikies. For size part – it is worthy to not Indic language chars are atleast thrice the size of Latin characters, and many wikies use client side tools like Narayam extension for typing.

      I would rather advise people to install a font. :) If I am wrong please correct me.

      • 5 aharoni 2012-01-30 at 10:42

        Absolutely – i advise people to install fonts, too. The trouble is that most people don’t bother to follow that advice.

        We are aware of the other problems and thinking of solutions, but thanks for the reminder. The development of WebFonts is not over – it’s just beginning.

      • 6 Srikanth 2012-01-30 at 14:14

        Praveen,
        You got the dark launch thing wrong. Siebrand proposed that as a solution for future i18n feature implementations till properly UX tested on live projects for getting code deployed without impacting current user base (WebFonts when deployed forced on everyone to take the feature).

        You know the problem well for Malayalam (better than me atleast :) ) and as far Tamil, we lack quality free fonts, Santhosh’s Lohit fixes were not really neat one(though much better than standard Lohit-Tamil). We are talking to people to license freely / get new font developed.

        IE6/IE8 & Windows XP are problem areas, but I suppose some are reported in the upstream and if and only if Microsoft addresses, something could be done. WMF cant help there much.

        On the interface lang / site lang bug, across Narayam / WebFonts, some clarity needs to be defined both functionally & a neat UI, till then there will be some bugs. I am hoping to work along at Pune Hackathon, please join me :) If UI / UX is taking forever, some quick fix needs to be done :D

        As far size of font / load time, my guess is there is caching, so its only once that a person needs to wait 10 sec(on standard GPRS) more.

        Even I would advise people to install font, some people(like my mom) are beyond helpless doing such geeky stuff.

        • 7 praveenp 2012-01-31 at 15:43

          Anyway, it is easy to install a font than installing a new browser. For windows it is easy to create an installer like http://downloads.sourceforge.net/varamozhi/AnjaliFontInstaller1.03.03.exe this (link taken from http://ml.wikipedia.org/wiki/Help:To_Read_in_Malayalam). For Linux distributions, font viewer application itself gives the button to install font directly.

          As you may know, even for Win XP, there is good support for Indian languages after a level (service pack 2? For ml, Karthika font is available). Since 2008 linux has a better pango (there are some other problem, which can be attributed to upstream developer’s point of view).

          So I still believes installing font is the better option for those who do not have the font. Forcibly serving webfonts is like, nuking the forest to kill a duck. :)

  3. 8 Huns Warst 2012-01-29 at 22:50

    Isn’t it quite unusual for an Indic font to not also have Latin letters?

    BTW, Unicode support would also be worth mentioned, also in an effort to combat effects like “mojibake”.

    • 9 aharoni 2012-01-29 at 23:01

      No, an Indic font doesn’t necessarily include Latin characters. It’s both good and bad and it’s a topic that deserves a post of its own.

      And i kinda thought that mojibake died around 2004, but it’s quite possible that i’m naïve because i always install all possible fonts on every computer before i start using it and don’t use Microsoft Internet too often :)

  4. 10 Tomer Cohen 2012-01-30 at 11:51

    I am not sure if using webfonts instead of relying on the operating system fonts is actually the best solution. Imagine that the users already have a supported fonts installed on his system for the desire language. By using webfonts you will probably force them to use your preferred fonts and not their browser/OS preferences.

    Webfonts should behave as suggestion instead of forcing users to use them. This could be made by one of the few suggestions below:
    a. Everyone will have webfonts loaded by default, and an opt-out button visible on the page which will save the user preference in a cookie or his Wikipedia account preferences.
    b. An opt-in button with the title “Can’t see ? Click here” which will load the fonts.
    c. Determine if the user has font support automatically and than load webfonts only if it is required.

    I’d prefer to see the third option being implemented, but this could be impossible at the moment because lack of support from the browsers. If this is the case, I think that wikipedia could help us push further the implementation of such API.

    • 11 aharoni 2012-01-30 at 11:56

      a. We already have a cookie and an opt-out button.

      b. Wikipedias in exotic languages had opt-in messages for years and people didn’t bother clicking them.

      c. Simon says: Impossible according to the standard, considered a security threat. (That’s what i understood, at least.)

      • 12 Tomer Cohen 2012-01-30 at 12:03

        This could be a security (and privacy!) threat, but is valuable to users. If this API will be implemented carefully, it could be less of a threat but a useful feature.

        For example, instead of listing the user fonts, we could provide a boolean function to determine if the browser can display content in certain language, or to list all languages supported by the browser instead.

      • 13 Srikanth 2012-01-30 at 14:01

        Small correction on b.

        Page view stats on font help pages across have been high, but viewing the font help page is one thing, installing the font is totally another. My mom would simply never visit the site again.

  5. 14 Tomer Cohen 2012-01-30 at 11:59

    As for Internet Explorer, I do remember it having a popup message appearing at the first time the user is entering a site without supported font installed in the Windows operating system, and can install a font on the user machine (from Microsoft FTP server) in a click of a button. This could be more useful to make use if it than serving the server fonts every time the user is using Wikipedia, and could cut-down the bandwidth required for serving fonts.

    (Not that I am against webfonts, but I do think there could be better solutions.)

  6. 15 ZeaForUs (@ZeaForUs) 2012-01-30 at 17:08

    Sorry to tell you, but ever thought about Safari? We’re using version 5.1.2 here and it handles the vast majority of non latin symbols very well. If one is missing it’s a piece of cake to add and install.

    For the rest: Bravissimo!

    ZeaForUs

    • 16 aharoni 2012-01-30 at 17:45

      I have 5.1.2 on Windows XP. It had trouble loading the web fonts for Assamese and Bengali, that Firefox and Chrome could load. Furthermore, it has at least two bugs in right-to-left scripts rendering that Firefox doesn’t have. That’s what i found just from two minutes of using it.

      It also has a bug in rendering Arabic and Hebrew diacritic signs; Firefox has it, too, but in Firefox that’s the *only* bug that i found in fonts rendering. I reported it to Mozilla and i can track the progress of its solution; i can’t track bug reports to Apple.

      Most importantly, Safari is not very relevant for anything except Macs, iPhones and iPads – three platforms that are used by few people outside North America and Europe and have *lots* of problems with non-Latin scripts. You may be able to display Bengali, Malayalam and Tamil fonts on an iPad, but currently it will be too hard to type in these languages on this device.


  1. 1 I wanted to use Google Chrome to create this post, but I had to use Safari | Jonathan Jeter - UI Expert & Front-End Web Developer Trackback on 2012-04-03 at 06:54

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s





Follow

Get every new post delivered to your Inbox.

Join 1,705 other followers

%d bloggers like this: