Closed vadikmash closed 1 year ago
Darn, this is great!
Qq: while testing on the home page, I noticed that the full “Bold” font is downloaded in addition to the subsetted one:
(See rows 3 and 4.)
Is there anything we can do to optimize this?
glyphhanger
log warnings about emojis, saying that emojis would cause the full font to download because they aren’t covered by specified unicode-range
s.)<span style="font-family: sans-serif">
unicode-range
in @font-face
cover only the actual glyphs the font supports, not U+0-FFFF
. For this, tools like https://wakamaifondue.com/ (use it to see supported glyphs) or https://www.zachleat.com/unicode-range-interchange/ (use it to add/substract unicode ranges) might be useful@iamakulov, hey!
I've fixed fallback non-subsetted fonts loading issue by excluding emoji unicode range from fallback @font-face
declarations.
Also, updated PR description with more detailed explanation of how I did it and instructions for further font subsetting. Lmk if I missed anything or if you need more descriptive instructions.
Gah, the builds are now failing due to https://answers.netlify.com/t/builds-failing-because-they-started-using-npm-instead-of-yarn/79495. Will merge this in a couple days (hopefully the issue is fixed by that date).
@iamakulov, looks like Netlify checks have been fixed!
Closes #91.
Used glyphhanger tool (version 5.0.0) to create subsets. To subset fonts in the future, please use the following commands:
This would create font subsets for all
.woff2
fonts and output them in the same format with-subset
postfix. It would also output unicode ranges, that you can use in your@font-face
declarations in css.To prevent unnecessary loading of fallback non-subset fonts on pages with certain types of emoji, I've used the following tools:
Current emoji unicode range: emoji-unicode-range.txt.