Unicode Range Interchange

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Last week an issue came in from polarbirke on Twitter that the web font we use for our titles was overly aggressively subset! Oh no!

I thought it might be instructive to go through how I would go about adding a character or set of characters to an existing subset web font. I’ll be using a new unicode-range calculator tool I shipped this week called Unicode Range Interchange.

Behind the scenes, Unicode Range Interchange uses an awesome library from Bram Stein called characterset. I’ve used it for many web font things over the years—super useful.

1. Find the existing unicode-range value in your CSS @font-face block. 11ty.dev uses BenchNine and is subset with unicode-range: U+20-7E,U+2014,U+2019.
2. Plug this into the first text input field on Unicode Range Interchange. It shows you the characters and the size of the set (in this case, 97 characters).
3. Leave the Union operator selected. We want to combine our unicode-range with the new characters we’re adding.
4. Type the characters you’d like to add into the next text field. You don’t need to use a unicode-range if you don’t want, although it is supported.
5. Optionally you can use glyphhanger to parse a page to find the unicode-range of all the characters in use on that page. It can even search for nodes using a specific font-family! I used glyphhanger http://localhost:8080/authors/ --family='BenchNine' to find all the characters used by the BenchNine font-family on my locally running site. glyphhanger returned U+20,U+21,U+23,U+26,U+2A,U+2C-2E,U+30-3B,U+41-57,U+59,U+5A,U+5F,U+61-7B,U+7D,U+E9,U+F4,U+F6,U+F8,U+15A,U+200B,U+2014,U+2026 (82 characters). I put this value into the second input field on Unicode Range Interchange.
6. The output will now show a new unicode-range, combining and simplifying the first two! My result was U+20-7E,U+E9,U+F4,U+F6,U+F8,U+15A,U+200B,U+2014,U+2019,U+2026 (104 characters)

It looked like this:

Try it out for yourself: Unicode Range Interchange

Then you can use glyphhanger to modify your web font files with the new unicode-range value.

glyphhanger --whitelist=U+20-7E,U+E9,U+F4,U+F6,U+F8,U+15A,U+200B,U+2014,U+2019,U+2026 --formats=woff2 --subset=BenchNine-Bold.ttf

If you’d like you can also use pyftsubset (which glyphhanger uses behind the scenes):

pyftsubset "BenchNine-Bold.ttf" --output-file="BenchNine-Bold-subset.woff2" --flavor=woff2 --unicodes=U+20-7E,U+E9,U+F4,U+F6,U+F8,U+15A,U+200B,U+2014,U+2019,U+2026

Now you have a new WOFF2 web font file, with a few new characters added (and importantly, no characters removed).

This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

Print Share Comment Cite Upload Translate Updates

APA

Zach Leatherman | Sciencx (2021-03-04T06:00:00+00:00) Unicode Range Interchange. Retrieved from https://www.scien.cx/2021/03/04/unicode-range-interchange/

MLA

" » Unicode Range Interchange." Zach Leatherman | Sciencx - Thursday March 4, 2021, https://www.scien.cx/2021/03/04/unicode-range-interchange/

HARVARD

Zach Leatherman | Sciencx Thursday March 4, 2021 » Unicode Range Interchange., viewed ,<https://www.scien.cx/2021/03/04/unicode-range-interchange/>

VANCOUVER

Zach Leatherman | Sciencx - » Unicode Range Interchange. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/04/unicode-range-interchange/

CHICAGO

" » Unicode Range Interchange." Zach Leatherman | Sciencx - Accessed . https://www.scien.cx/2021/03/04/unicode-range-interchange/

IEEE

" » Unicode Range Interchange." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2021/03/04/unicode-range-interchange/. [Accessed: ]

rf:citation

» Unicode Range Interchange | Zach Leatherman | Sciencx | https://www.scien.cx/2021/03/04/unicode-range-interchange/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.