Webfonts: Making Wikimedia projects readable for everyone

Wikimedia wikis are available in nearly 300 languages, with some of them having pages with mixed-script content. An example is the page on the writing systems of India on the English Wikipedia. We expect users to be able to view this page in full and not see meaningless squares also known as tofu. These tofu squares represent letters written in the language, but cannot be rendered by the web browser on the reader’s computer. This may happen due to several reasons:

  • The device does not have the font for the particular script;
  • The operating system or the web browser do not support the technology to render the character;
  • The operating system or the browser support the script partially. For instance, due to gradual addition of characters in recent Unicode versions for several scripts, the existing older fonts may not be able to support the new characters.

Fonts for most languages written in the Latin script are widely available on a variety of devices. However, languages written in other scripts often face obstacles when fonts on operating systems are unavailable, outdated, bug-ridden or aesthetically sub-optimal for reading content.

Using Webfonts with MediaWiki

To alleviate these shortcomings, the WebFonts extension was first developed and deployed to some wikis in December 2011. The underlying technology provides the ability to download fonts automatically to the user if they are not present on the reader’s device, similar to how images in web pages are downloaded.

The old WebFonts extension was converted to the jquery.webfonts library, which was included in the Universal Language Selectorthe extension that replaced the old WebFonts extension. Webfonts are applied using the jquery.webfonts library, and on Wikimedia wikis it is configured to use the fonts in the MediaWiki repository. The two important questions we need answered before this can be done are:

  1. Will the user need webfonts?
  2. If yes, which one(s)?

Webfonts are provided when:

  • Users have chosen to use webfonts in their user preference.
  • The font is explicitly selected in CSS.
  • Users viewing content in a particular language do not have the fonts on their local devices, or the devices do not display the characters correctly, and the language has an associated default font that can be used instead. Before the webfonts are downloaded, a test currently known as “tofu detection” is done to ascertain that the local fonts are indeed not usable. The default fonts are chosen by the user community.

Webfonts are not applied:

  • when users choose not to use webfonts, even if there exists a valid reason to use webfonts (see above);
  • in the text edit area of the page, where the user’s preference or browser settings are honored.

See image (below) for a graphical description of the process.

‘Tofu’ Detection

The font to be applied is chosen either by the name of the font-family or as per the language, if the designated font family is not available. For the latter, the default font is at the top of the heap. However, negotiating more complex selection options like font inheritance, and fallback add to the challenge. For projects like Wikimedia, selecting appropriate fonts for inclusion is also of concern. The many challenges include the absence of well-maintained fonts, limited number of freely licensed fonts and rejection of fonts by users for being sub-optimal.

Challenges to Webfonts

Merely serving the webfont is not the only challenge that this technology faces. The complexities are compounded for languages of South and South-East Asia, as well as Ethiopia and few other scripts with nascent internationalization support. Font rendering and support for the scripts vary across operating system platforms. The inconsistency can stem from the technology that is used like the rendering engines, which can display widely different results across browsers and operating systems. Santhosh Thottingal, senior engineer for Wikimedia’s Language Engineering team who has been participating in recent developments to make webfonts more efficient, outlines this in greater detail.

Checkbox in the Universal Language Selector preferences to download webfonts

A major impact is on bandwidth consumption and on page load time due to additional overhead of delivering webfonts for millions of users. A recent fallout of this challenge was the change that was introduced in the Universal Language Selector (ULS) to prevent pages from being loaded slowly, particularly when bandwidth is a premium commodity. A checkbox now allows the users to determine if they would like webfonts to be downloaded.

Implementing Webfonts

Several clever solutions are currently in use to avoid the known challenges. The webfonts are prepared with an aim to create comparatively smaller footprints. For instance, Google’s sfntly tool that uses MicroType Express for compression is used for creating the fonts in EOT format (WOFF being the other widely used webfont format). However, the inherent demands of a script with larger character sets cannot always be overridden efficiently. Caches are used to reduce unnecessary webfonts downloads.

FOUT or Flash Of Unstyled Text is an unavoidable consequence when the browser displays text in dissimilar styling or no text at all, while waiting for the webfonts to load. Different web browsers handle this differently while optimizations are in the making. A possible solution in the near future may be the introduction of the in-development WOFF2 webfonts format that is expected to further reduce font size, improve performance and font load events.

Special fonts like the Autonym font are used in places where known textlike a list of language namesis required to be displayed in multiple scripts. The font carries only the characters that are necessary to display the predefined content.

Additional optimizations at this point are directed towards improving the performance of the JavaScript libraries that are used.


Several technical solutions are being explored within Wikimedia Language Engineering and in collaboration with organizations with similar interests. Wikipedia’s sister project Wikisource attempts to digitize and preserve copyright-expired literature, some of which is written in ancient scripts. In these as well as other cases like accessibility support, webfonts technology allows fonts for special needs to be made available for wider use. The clear goal is to have readable text available for all users irrespective of the language, script, device, platform, bandwidth, content and special needs.

For more information on implementing webfonts in MediaWiki, we encourage you to read and contribute to the technical document on mediawiki.org

Runa Bhattacharjee, Outreach and QA coordinator, Language Engineering, Wikimedia Foundation

15 Show

15 Comments on Webfonts: Making Wikimedia projects readable for everyone

viralnowmedia 11 months

Awesome info about webfonts. Thanks for sharing

Raj Abhiyani 11 months

Now We can read wikimedia easily than before. Thanks for implement this settings

Hetal Shah 12 months

First of all thanks for sharing useful article about web font topic. Few days back am finding about web font in internet but notable to gain full knowledge but at last Wikimedia help me to gain full knowledge.

annasmithblogger 1 year

I have started a blog but little confused about the fonts. But Today I got total ideas about which font should I used.
Thank you for clarifying all details about it. :)

Fone Radar 1 year

Nice info, Thanks for sharing. It is good to use webfonts as you can change the fonts of your site easily. There are also lots of good free fonts available on Google fonts.

Azim 1 year

After reading these post, now can say my all question related to Web font are answerable. So thanks wikimedia fro writing these article.

Pradip 2 years

After reading this post , now i have learned, through the help of Webfonts we can easily read wikimedia projects. Thanks to Webfont which make easier to read all wikimedia project with out any barrier..

Krishna Veni 2 years

The Webfonts are one of the important in Website design, thanks to give webfonts in indian language to write in wikipedia.

Nayna 2 years

hi, Thanks to Webfonts which unlock all barrier of reading wikimedia projects. Now it is very much easier to read all stuffs of wikimedia.

thomas 2 years

These is the best and understable articles about web font. Language used in these article is understable. And i totally agree with these articles and thanks alot.

johny milton 2 years

this is really good article about wikimedia projects. I heard about this kind of events first time here. Thanx for informing. :-)

halam jetho 2 years

thanks webfont , this is very useful to me for my next project in my local language Gujarati

Prem 2 years

Thanks to Webfonts which unlock all barrier of reading wikimedia projects. Now it is very much easier to read all stuffs of wikimedia.

Gilles 2 years

I don’t see the point in doing all this work – a lot of Wikipedia pages (and indeed of web pages) appear on my browser as a collection of squares. That is because I have never done the minimal effort to load Chinese, Japanese, etc… fonts. If I did not do this effort, it is because I am not interested : I can’t read one word in these languages, and of course not more in Malayalam or Amharic – if I was, my computer would have been bought in India or Ethiopia and its system would very probably include fonts for these languages.

As a (perhaps non representative) member of the population who meets loads of tiny squares when visiting the web, I can just say that there is not the slightest demande from me for elaborate solutions allowing to see something else : squares or exotic characters are just as impossible to understand for me, and I have no preferrence for the latter over the former.

robert 2 years

this is one of the most understandable article i have ever read till the time and yeah i you are right in some of the page we aren’t able to see fonts so in such issues webfonts will definitely help :)

Leave a Reply

Your email address will not be published. Required fields are marked *