Add subsets for montserrat font-family to include "→" character

[vadikmash]

Closes #91.

---

Used glyphhanger tool (version 5.0.0) to create subsets. To subset fonts in the future, please use the following commands:

# Installation
npm install -g glyphhanger
# Additional installation for working with woff2 format
pip install brotli

# Usage
glyphhanger --subset="*.woff2" --formats=woff2 --LATIN --whitelist=→      

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:

• emoji-unicode-range to get current unicode range for emoji.
• Unicode Range Interchange to exclude emoji unicode range from fallback non-subset fonts declarations.

Current emoji unicode range: emoji-unicode-range.txt.

[iamakulov]

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?

• Re-subset Montserrat to include missing characters?
  • But what are these characters? May this be due to emojis on the page? (In the past, once or twice, I’ve seen glyphhanger log warnings about emojis, saying that emojis would cause the full font to download because they aren’t covered by specified unicode-ranges.)
  • If this is due to emojis, we’ll probably have to
  • wrap them with <span style="font-family: sans-serif">
  • or find a way to do the above automatically
  • (perhaps the easiest approach) or make the 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
• Subset the full font to only include non-latin characters so it’s smaller?
• (Any other things we could do?)

[vadikmash]

@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.

[iamakulov]

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).

[vadikmash]

@iamakulov, looks like Netlify checks have been fixed!