How to subset Basic Latin (128 glyphs) with the Unicode range descriptor

Question

I'm trying to subset a font-face for Basic Latin (128 glyphs) with the Unicode-range descriptor, but I'm not seeing results with the few variations I have tried.

From a resource about reducing web font size, it gives an example of setting a unicode range for Latin glyphs as U+000-5FF. Wikipedia says the unicode range for Basic Latin is U+0000 to U+007F.

I've tried a few variations of the following (in SASS):

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
    url("#{$montserrat-font-path}/Montserrat-SemiBold-woff2.woff2") format("woff2"),
    url("#{$montserrat-font-path}/Montserrat-SemiBold-woff.woff") format("woff");
    font-display: swap;
    unicode-range: U+0000-007F; /* Basic Latin, 128 glyphs */
}

What does the range need to be? Is there a configuration required on the server (Sitecore/.Net)? Am I inspecting file size in the proper way? How can I reduce the file size?

Also... [Side question] I haven't come across server compatibility for this feature. It seems like the server would have to be involved in deciding which glyphs to serve. Should we assume all modern servers can do this?

Answer 1

You can't reduce the amount of data transferred with unicode-range. It's only used for deciding if a font should be loaded at all:

"If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded"

So no special server configuration is needed beyond just serving the font files as-is for unicode-range to function.

If you want to only download certain characters you need to create a whole new font file that only has certain characters. When I've needed to create optimized font subsets, I've done so manually by editing the font with FontForge to remove glyphs I don't need. You could also automate the process with software such as pyftsubset.

Answer 2

As @Smitop already mentioned unicode-range won't subset/reduce your already compiled font-file.

Workaround 1: fetch google webfont subsets via &text query parameter

Your character range would be something like this:

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

You need to urlencode this string - so the google fonts API URL would be:

https://fonts.googleapis.com/css2?family=Montserrat&text=%21"%23%24%25%26%27%28%29%2A%2B%2C-.%2F0123456789%3A%3B<%3D>%3F%40ABCDEFGHIJKLMNOPQRSTUVWXYZ%5B%5C%5D%5E_%60abcdefghijklmnopqrstuvwxyz%7B%7C%7D~

I've generated the above unicode range string using this helper: onlineunicodetools.com

Workaround2: Use a converter with subsetting features

You could for instance use transfonter

You can use both text strings as well as unicode ranges to subset the glyphs range.

Final glyph table

Besides, you should definitely avoid local src references, since they are likely to introduce conflicts with locally (OS based) installed fonts.

Especially Firefox might not display local fonts due to security settings. However you can adjust this setting as described here.