Saving on Letters

Imagine your site has 99% Russian text, and only a couple of English words or one " currency symbol " . Why download a full font file with all world languages?

Solution: unicode-range

This property inside @font-face tells browser: " Download this file ONLY if these specific characters appear on the page " .

@font-face {
  font-family: 'MyFont';
  src: url('cyrillic.woff2') format('woff2');
  unicode-range: U+0400-04FF; /* Cyrillic range */
}

@font-face {
  font-family: 'MyFont';
  src: url('latin.woff2') format('woff2');
  unicode-range: U+0000-007F; /* Latin range */
}