Subset the ZillaSlab and OpenSans fonts for different language support

mdn / sprints

Archived: MDN Web Docs issues are tracked in the content repository.

https://github.com/mdn/content

Creative Commons Zero v1.0 Universal

150 stars 142 forks source link

Subset the ZillaSlab and OpenSans fonts for different language support #254

Closed atopal closed 6 years ago

atopal commented 6 years ago

Tasks:

[x] Identify correct subset for each locale
[x] generate subsetted files
[x] reference subsetted files accordingly for each locale
[x] document process
[x] measure and record performance impact

Acceptance Criteria:

[ ] We're only loading the necessary subset for reach locale
[ ] confirm each font file contains only the specified subset
[ ] process documented
[ ] performance impact reported

tkadlec commented 6 years ago

Looks like we use the Zilla font on the following locales (once we exclude the locales that will be removed in https://github.com/mdn/sprints/issues/449):

Svenska (sv-SE)
Portugues (pt-PT) and (pt-BR)
Polski (pl)
Nederlands (nl)
Melayu (ms)
Taqbaylit (kab)
Italiano (it)
Bahasa Indonesia (id)
magyar (hu)
Francais (fr)
suomi (fi)
Espanol (es)
Deutsche (de)
Catala (ca)
English (en-US)

tkadlec commented 6 years ago

Couldn't find a reliable resource about exactly which characters each individual locale would need in order to create a separate subset for each locale listed.

That being said, I created a Latin character subset that appears to support all the above languages and makes the combined weight of the Bold and Regular fonts less than a single variant today.

Font	Before	After
Zilla Regular	67kb	33kb
Zilla Bold	67kb	33kb
Total	134kb	66kb

It's a little more conservative than trying to get each language individually, but I also safer and a nice boost.

tkadlec commented 6 years ago

The documentation around pyftsubset is....not great. BUT, once you play with it it's pretty slick. To create the Latin subset, I created a file that contains the unicode ranges to include. There are other shortcuts to go to certain subsets, but I like the clarity this gives us in case we edit the subset in the future:

# Basic Latin
U+0020-007F

# Latin-1 Supplement
U+00A0-00FF

# Latin Extended-A
U+0100-017F

# Latin Extended-B
U+0180-024F

# General Punctuation
U+2000-206F

# Currency Symbols
U+20A0-20CF

Then you run the commands:

pyftsubset ZillaSlab-Bold.ttf --unicodes-file=latin-characters --flavor=woff2
pyftsubset ZillaSlab-Bold.ttf --unicodes-file=latin-characters --flavor=woff
pyftsubset ZillaSlab-Regular.ttf --unicodes-file=latin-characters --flavor=woff2
pyftsubset ZillaSlab-Regular.ttf --unicodes-file=latin-characters --flavor=woff