Back in 2013, Google created the "Noto" project. Its aim? To include "all the world's languages". They wanted to banish "tofu" - the little white blocks □ which indicate a missing character - hence the name "No Tofu" / "Noto".

There was great flurry and excitement which has, thankfully, been sustained over the years. Noto continues to churn out regular updates to their fonts. Android began to use Noto but, for some unknown reason, it only rarely uses the latest versions. This means whole swathes of modern characters are missing from Android.

You can see all the fonts included in the Android Open Source Project. If you want to download them all, run: git clone https://android.googlesource.com/platform/external/noto-fonts

Open up the fonts in your favourite editor, and you'll see just how outdated they are.

For example, Gujarati is stuck on 2013's version (1.03) despite v2.106 being released in 2023

It's a similar story for the technical symbols block - Android is stuck on v1.09 despite a decade of advances.

A few, like Hentaigana were only created recently - and so are on the latest version. But the majority are woefully outdated.

Perhaps that's just a lack of love for AOSP? Not at all. I downloaded the latest beta version of Android 15 and went through all the fonts it included. They're exactly the same⁰.

How bad is it?

I decided to compare all the recently published Noto fonts and those available in AOSP.

I downloaded all the most recent Noto fonts from GitHub. It does take some time for fonts to be tested on phones so, in the spirit of fairness, I grabbed the 2024-01-01 release.

Here's what I found.

Of the 224 non-Emoji fonts in Noto, AOSP only has about 140. About a third are simply missing.

Of the fonts included with Android 15, how many were updated within the last 2 years? Ten. Not a typo.

Despite a regular publishing cadence from another Google project, Android is ignoring the vast majority of updates.

This means Android is missing entire languages, has severely outdated fonts in others, and - most importantly - doesn't include the Unicode Power Symbol.

Noto is a great effort - but Android is failing to keep up.

What now?

I've raised a bug on the AOSP bug tracker¹. And I've published this ranty blog post. If you work for Google, or an Android manufacturer, please give the Android team a nudge and get them to update.

Ideally, Project Treble would allow for these fonts to be updated, so even older versions of Android could benefit from them.

Full List of Fonts, Dates, and Versions

I've generated this based on the 2024-01-01 release of Noto and the AOSP source code from 2024-09-13. I've placed the dates next to each other for ease of comparrison. Empty cells means the font doesn't exist in that release.

I've tried to transcribe all the data accurately. Corrections very much welcome.

Code

This Python code will get all the TTF fonts in a directory, and its sub-directories, and then print a Markdown table of name, version, and copyright date.

import os
import glob

filelist = glob.glob('**/*.ttf', recursive=True)

for file in sorted(filelist):
        filename = os.fsdecode(file)
        if filename.endswith(".ttf"):
                font = ttLib.TTFont(filename)
                ttf_name      = font["name"].getDebugName(1)
                ttf_style     = font["name"].getDebugName(2)
                ttf_version   = font["name"].getDebugName(5).split()[1].split(";")[0]
                ttf_copyright = font["name"].getDebugName(0).split()[1].split("-")[-1]
                print ( f"| {ttf_name} {ttf_style} | {ttf_version} | {ttf_copyright} |")

Atkinson Hyperlegible differentiates common misinterpreted letters and numbers using various design techniques:

There's only one problem, the font was released a few years ago and hasn't been updated since. It covers most of the basic European letters, numbers, accents, and symbols - but not all. I wondered if it was going to receive any updates:

Terence Eden is on Mastodon

@edent

Replying to @BrailleInst@BrailleInst I'd like to help improve the Atkinson Hyperlegible Font - brailleinstitute.org/freefont
Are you open to contributions?

---

Braille Institute

@BrailleInst

Replying to @edent@edent @edent thank you for your interest in the Atkinson font. We don’t presently have any plans for future enhancements but we will be sure to keep you in mind.

---

Sadly not! The font was released under the SIL Open Font Licence V1.0 which allows for remixing - under certain conditions. So that's what I've done!

Introducing Extended Hyperlegible! At the moment, it contains exactly one new character - U+1F12F, the copyleft symbol 🄯.

I hope to add a few more glyphs as an when I have time. Contributions very much welcomed!

How to add new symbols to a font

This was a bit of a learning journey for me. Here are some notes to future-me.

1. Use FontForge to open the original .otf font.
2. Select the copyright symbol and copy it.
   
3. Select an empty symbol and paste it in.
   
4. View the "Glyph Info".
   
5. Edit the Unicode Value to U+1F12F and select "Set From Value". Optionally, edit the "Glyph Name". And hit the OK button.
6. Select the glyph, right click and select "Transform"
   
7. Flip the glyph horizontally.
   
8. In the context menu, choose "Correct Direction".
   
9. Optionally, skew it for the italic version.
10. In "Font Information" you can rename the font and set other metadata.
    
11. Use File → Generate Fonts to save the new font as copyleft.otf
    

Use FontTools

Install FontTools - either using pip3 or apt get

Convert the TTF to TTX format:

fonttools ttx merged.ttf

Edit the new merged.ttx by hand to update the name, copyright, etc.

Save the file as new.ttx

Generate a new OTF by running

fonttools ttx new.ttx

Optionally, run fonttools ttx new.otf to regenerate the TTX.

Optionally, run fonttools ttLib.woff2 compress new.otf to generate a WOFF2 font for the web.

Upload to GitHub and wait for contributors

Well, what are you waiting for? Use or contribute to Extended Hyperlegible today!

The Unifont is a perfect fallback font. If your app or website uses a Unicode character which isn't supported on a device, the user will usually see � - a replacement character. If you include Unifont, they'll see the correct character.

There are two downsides:

1. The TTF font is 12MB.
2. The font design is... Spartan... Each character is a maximum of 16-by-16 pixels.

Good enough for "Latin": "CJK":

and Emoji:

Compression

Using the WOFF2 format, Unifont compresses to a svelte 1.5MB. I am not arguing that you should serve an extra couple of MB on every webpage (although modern sites are so bloated it probably doesn't matter...) - but perhaps you should bundle it with your webview apps.

Use on the web

I've converted it, so you can directly download unifont-12.0.01.woff2 which covers all Basic Multilingual Plane characters. You can also download the Upper Planes for Emoji and more esoteric characters.

If anyone knows how to combine WOFF2 fonts - please let me know!

CSS

@font-face {
    font-family: "unifont";
    src: url("unifont-12.0.01.woff2");
}
@font-face {
  font-family: "unifont-upper";
  src: url("unifont_upper-12.0.01.woff2");
  unicode-range: U+10000-10FFFF;
}

body {
    font-family: "unifont", "unifont-upper"
}

You can use it on your webpage, it is GPLv2 with the font licencing exemption.

Demo!

You can see typography examples on my demo page.

Does it work for every language?

Almost!

Unifont only stores one glyph per printable Unicode code point. This means that complex scripts with special forms for letter combinations including consonant combinations and floating vowel marks such as with Indic scripts (Devanagari, Bengali, Tamil, etc.) or letters that change shape depending upon their position in a word (Indic and Arabic scripts) will not render well in Unifont. In those cases, Unifont is only suitable as a font of last resort. Users wishing to properly render such complex scripts should use full OpenType fonts that faithfully display such alternate forms.

Are you serious?

Pretty much! Like I said earlier, including an extra couple of MB isn't always necessary - but it isn't excessive on complex sites.

Ideally, modern operating systems would include all the characters you'd ever need and be regularly updated. Sadly, that's rarely the case.

One of the best things about Unifont is that it is regularly updated. Usually there are several updates each year - mostly as soon as there's a new Unicode release.

Sure, the font isn't the prettiest in the world. But I will always prefer a pixelated symbol rather than a �.

For example, suppose you don't need to include the русский алфавит - you can immediately drop 66 letters (upper- and lower-case), a whole load of accents, and a bunch of other Cyrillic stuff. That's up to 400 fewer characters - a huge space saving.

Here's how the Font Squirrel Webfont Generator handles subsetting:

Depending on the font you start with and the characters you anticipate you'll need, you can easily optimize your webfont size more than any Brotli compression could hope to manage.

Now, what do all good computer programmers know about Premature Optimization?

So, some clever web designers have realised that they can eke out a few more microseconds of performance if they drop all of the weird characters from their fancy web fonts and stick to good ol' fashioned US-ASCII.

Which has this unfortunate side effect.

As you can see from these two examples, there's a designer somewhere wailing and gnashing their teeth at the sight of these abominations. All that hard work - and cost - of choosing the right font ruined, because someone thought they'd drop support for European accents.

Is this worth it? Let's take a look at the New Athena Unicode font as a good example.

New Athena Unicode is a freeware multilingual font distributed by the American Philological Association. It follows the latest version of the Unicode standard and includes characters for English and Western European languages, polytonic Greek, Coptic, Old Italic, and Demotic Egyptian (and Arabic) transliteration, as well as metrical symbols and other characters used by classical scholars.

The font contains 1825 glyphs - the TTF is 690KB. Once converted into the heavily compressed WOFF2 format, it's 149KB. Using the FontSquirrel subsetter to get just the common English language characters results in a WOFF2 font of 17KB. Tiny!

Ok, that's a pretty decent chunk saved - but at the expense of the most European languages. Adding back in French, German, Italian, Polish, and the Latin set takes the font up to 35KB. Yes, the size has doubled - but I'd argue it's now several times more useful

Be smart. Do you really need extended punctuation like ‰‱′″‴‵‶‷‸‹››※‼‽‾‿⁀⁁⁂⁃⁄⁅⁆⁇⁈⁉⁊⁋⁌⁍⁎⁏⁐⁑⁒⁓⁔⁕⁖⁗⁘⁙⁚⁛⁜?

No, probably not. Strip it out. But take a look at what you do use. There's no "correct" answer for this, by the way. If you're confident that your reporters are never going to interview someone with a Polish name - leave out those letters. Or, have your database regenerate fonts on the fly when it receives a previously unseen character.

But please don't pretend that these "unusual" characters don't exist! You're publishing on the World Wide Web - act like it.

When Android and iOS find Emoji in text, rather than display them as black-and-white fonts, they show them off in gorgeous colour.

For example, the unicode smilie is ☺. Depending on your system, it will look something like this:

From Tim Whitlock

So far, so nifty! But here we hit a snag. Not every computer has a font which contains all the characters we want.

Consider this problem: I want to replace some of the links on my web page with symbols. I've chosen:🏠✉ 🔍♻⚙ℹ

If your system supports all those characters, you should see symbols for home, mail, search, recycle, settings cog, & information.

On Android 4.4, the above look like:

Android Lollipop improves things somewhat - although the mail and recycle symbols both take a retrograde step:

Good enough for what I want to do - but what happens when we look at it on a desktop? The plain nature of the fonts I can live with - the broken characters I cannot.

Fine - let's find a font which has all those symbols. Alexander Lange maintains the excellent Quivira Font, the latest version (4.1) contains 11,053 characters - including all the ones I want. The font is 1.5MB - which is too large for most uses, and particularly unsuitable for mobile. It's possible to subset the font so that it only contains the needed characters.

That gives us this set of symbols:

Ok, not the prettiest pig in the pen - but at least they're fairly consistent.

Here's where I hit my snag. I want devices which recognise those characters to display them with colourful emoji. Any device which doesn't recognise them, should use the symbol font I've created.

I naïvely thought that this CSS would work:

@font-face {
    font-family: 'quiviraregular';
    src: url('quivira.eot');
    src: url('quivira.eot?#iefix') format('embedded-opentype'),
         url('fonts/quivira.woff2') format('woff2'),
         url('quivira.woff') format('woff'),
         url('quivira.ttf') format('truetype');
}

body{
    font-family:sans-serif,quiviraregular;
}

Theoretically, Quivira should only be called if the font is not found in the system's sans-serif set. But it doesn't. I've tried on Android with Chrome, Firefox, and Opera. No dice.

It doesn't matter what I put in that font-family declaration. Once Android detects a font with the glyph, it doesn't fall back to displaying it as an emoji.

I fiddled around with several font-family settings I found around the web "pictograph", "fantasy", "Apple Color Emoji", "Droid Emoji", "emoji" (using this shim) - none of them worked.

It's possible to set a unicode-range for fonts. I couldn't find a way to tell browsers to use their fallback fonts first for a specific range.

I can find the names of the Emoji system fonts - but I can't find a way to reference them.

I've tried every variation I can think of:

@font-face {
    font-family: 'emoji';
    src:  local('Android Emoji'),
    src:  local('NotoColorEmoji'),
    src:  local('NotoColorEmoji.ttf'),
    src:  local('/system/fonts/NotoColorEmoji.ttf'),
    src:  local('Noto Color Emoji'),
    src:  local('Android Emoji');
}
body{
    font-family:emoji,sans-serif,quiviraregular;
}

And

body{
    font-family:'Android Emoji','NotoColorEmoji','NotoColorEmoji.ttf','/system/fonts/NotoColorEmoji.ttf','Noto Color Emoji','Android Emoji',sans-serif,quiviraregular;

Still no difference - it does not show the colourful Emoji. Instead it just falls through to the symbol font I created.

Well, I'm stumped! Does anyone know the answer? I'd really rather use fonts than images.

1. If a browser has an Emoji representation of a character - show it.
2. If not, use the provided font.

If you know, please leave a comment here or on StackOverflow.

For example, this calligraphy style font is 3.4MB.

The beautiful Paper Cut Font weighs in at 14MB!

That file-size is far to heavy to embed on a web page.

Subsetting

Generally speaking, font files like .ttf contain a representation of every single character. 0-9, a-z, A-z, all the punctuation, non-English characters etc.

That's really useful if the font is installed on your computer and you want to write a document which could contain every character. It's less helpful if you want to use a fancy font on your website's headers.

Subsetting is the act of creating a subset of a font. That is, a font file which only contains specific characters.

Let's suppose that we only want a specific phrase rendered in this font.

我很丢脸。我没有吃Fruity Oaty Bar

We only need 19 unique characters - we can get rid of any character which doesn't appear in that heading.

There are sevel font manipulation tools available. I've chosen Font Optimizer which has an excellent live demo page. The source code is on BitBucket.

The command line syntax is really simple

./subset.pl --chars="我很丢脸。我没有吃Fruity Oaty Bar" input.ttf output.ttf

The file size reduction is impressive. My original font was over 14MB. The optimized one is 32KB

14,066,456 input.ttf
   32,084 output.ttf

The process run instantly - fast enough to run as a web service to generate these fonts dynamically, I would think.

One could quite easily create a scrap of JavaScript which read the contents of a block of text and then requested a font which contained only the necessary characters.

Apparently, Monotype have a proprietary and patent-pending solution to this rather trivial application.

Uses

Being able to subset fonts to reduce file size is incredibly useful. Supposing you want a different font for body text, headers, and navigation. Rather than having to load three large font files containing every character in the known universe, you could subset each one for only exactly the relevant characters.

This also has an interesting DRM like effect. Some people don't want their shiny web fonts to be downloaded and used as a regular font. With subsetting, the font only contains the specific characters.