Missing Google font subsets

[quanglam2807]

typefaces-* packages only support Latin while Google fonts support many different subsets. The project relies on https://google-webfonts-helper.herokuapp.com/api/fonts/ which only downloads Latin fonts by default.

[ghost]

Yes, please add support for latin-ext or other character sets!

[KyleAMathews]

PRs welcome! Won't have time to work on this anytime soon.

[mvasilkov]

Latin only :(

I wish it was mentioned in the README of corresponding npm packages, since they look genuinely useful (I discovered this project using the npm package search). Then again, doing a pull request stating "This here npm package is for use in 1985 and earlier, when everything was set in One True Americanski Language" in every README is kinda passive-aggressive.

What an unfortunate turn of events. I hope you resume the development of this project eventually, since there is clearly a demand for it.

[erykpiast]

Hey, I can see stagnation here, maybe some brainstorm is needed?

What about adding additional entrypoints like typeface-thefont/latin-ext, typeface-thefont/cyrillic etc.? The default would be /latin so it's fully backward compatible solution. Sounds quite easy to use as well as to implement I think. I'd like to contribute if you like the idea, @KyleAMathews ?

[KyleAMathews]

@erykpiast Adding additional entry points has been my main idea as well.

@mvasilkov happy to take a PR adding a less passive-aggressive notice that the packages are latin only.

[erykpiast]

@KyleAMathews To be honest I cannot find any other idea, this one seems straightforward. Shall we go on with this?

[alexghi]

Yes please, we need Latin Extended and the Cyrillic and/or Cyrillic Extended

[erykpiast]

Guys, I've made PR for this: https://github.com/KyleAMathews/typefaces/pull/45. It's very dirty but works. I guess it'd be nice to have some tests, I didn't write any though, as there was no infrastructure prepared for this so far and I didn't want to make it too big.

[koutsenko]

Hello all. Can i use cyrillic subset of typeface-roboto now?

[adipascu]

CSS unicode-range could be used to optimize download size.

[xuhcc]

There is a fork of typefaces project which supports different character sets: https://github.com/bedlaj/openfonts

@koutsenko You can use @openfonts/roboto_cyrillic or @openfonts/roboto_all packages as a substitutes to typeface-roboto.

[Abdull]

CSS unicode-range could be used to optimize download size.

Absolutely,

here's how Google Fonts splits glyph ranges up in separate small files:

/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('cyrillic-ext.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('cyrillic.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('greek-ext.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('greek.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('vietnamese.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('latin-ext.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('latin.woff2') format('woff2'), url('all.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

• all.woff (80 KB) is the woff1 fallback.
• vietnamese.woff2 (6 KB)
• cyrillic-ext.woff2 (7 KB)
• greek-ext.woff2 (8 KB)
• latin-ext.woff2 (15 KB)
• greek.woff2 (9 KB)
• latin.woff2 (16 KB)
• cyrillic.woff2 (10 KB)

Browser will lazy-load the required woff2 file only on demand. I.e., if a website doesn't use greek letters, the greek woff2 files will not be requested at all.

These few additional bytes of CSS are no problem bandwidth wide. The benefit of supporting more glyphs than latin only are on the other hand tremendous.