Split font to be used with unicode-range

[edouard-lopez]

Building sliced font could help user experience

Noto Sans SC Sliced (Chinese Simplified)

The experience for Chinese webfont users can be improved if the file size and webfont latency are reduced: In any large corpus of documents, there are patterns in character usage. By scanning webpages in Chinese, we model which characters are most likely to appear together, which informs a static subset slicing strategy that sorts all 44,683 glyphs into 102 slices.

Using this method, the entire web page will seem to be using Noto Sans SC while only loading the set of font slices required for that page, which we expect to be much faster than loading the whole font…

https://fonts.google.com/earlyaccess#Noto+Sans+SC+Sliced

Usage

Simple

@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}

Real one

@font-face {
  font-family: 'Noto Sans SC Sliced';
  font-weight: 300;
  src: url('//fonts.gstatic.com/ea/notosansscsliced/v2/NotoSansSCSliced-Light.0.woff2')
      format('woff2'),
    url('//fonts.gstatic.com/ea/notosansscsliced/v2/NotoSansSCSliced-Light.0.woff')
      format('woff'),
    url('//fonts.gstatic.com/ea/notosansscsliced/v2/NotoSansSCSliced-Light.0.otf')
      format('opentype');
  unicode-range: U+2252, U+30c3, U+5c83-5c94, U+5c9c-5ca8, U+5caa-5cac,
    U+5cae-5cb2, U+5cb4-5cb7, U+5cb9-5cc0, U+5cc2-5cc3, U+5cc5-5cd8, U+5cdb-5ce0,
    U+5ce2-5ce7, U+5ce9-5cec, U+5cee-5cef, U+5cf1-5cfa, U+5cfc-5d06, U+5d08-5d0d,
    U+5d0f-5d13, U+5d15, U+5d17-5d1a, U+5d1c-5d28, U+5d2a-5d2c, U+5d2e-5d4b,
    U+5d4d-5dc4, U+5dc6-5dcc, U+5dce-5ddc, U+5ddf-5de0, U+5de3-5de4, U+5dea,
    U+5dec-5ded, U+5def-5df0, U+5df5-5df6, U+5df8-5dfd, U+5dff-5, U+5e4, U+5e7,
    U+5e9-5b, U+5d-5f, U+5e12-5e14, U+5e17, U+5e19-5e1b, U+5e1e-5e25,
    U+5e28-5e2c, U+5e2f-5e36, U+5e39-5e3c, U+5e3e-5e44, U+5e46-5e54, U+5e56-55ee,
    U+67d1, U+6cba, U+9569-956b, U+958a-958b;
}

Resources

• Example
• Browser support is excellent
• MDN unicode-range