CODEWITHSUNDEEP
csssass
Milan Milosev
Milan Milosev

Reputation: 256

How to test which @font-face unicode-code version is used on the page?

I am refactoring CSS, and I founded a many @font-face tag instances of the same font. The only difference between them is different unicode-range.

I am wondering how the browser can choose which one to use? How can I do the proper testing? In the network tab is only visible the name of the font, but I would like to see which unicode-range is used.

Is there any better solution when you want to use same the font adapted to multi language?

Here is an example:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  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;

Thanks a lot!

Upvotes: 0

Views: 251

Answers (1)

Mark Fisher
Mark Fisher

Reputation: 1257

The browser chooses which font to download based on the characters used on the page and the Unicode ranges used in the @font-face declarations. If any of the specified characters are used on the page, then the font is downloaded. See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range.

In your case, as the same font is used in each @font-face declaration, the unicode-range properties may be somewhat redundant. If you have other @font-face declarations specifying other fonts for unicode-ranges that do not overlap with the unicode-ranges in your code snippet, then you might want to combine this into one @font-face declaration with all of the above unicode-ranges combined into one.

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url('/assets/fonts/google/RobotoSlab-Light.ttf') format('truetype');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

This is assuming that you are expecting some pages which will not need Roboto Slab Light as they are not using any of the specified characters, but will be using other characters. In this case you will need to cater for those other characters using another font, and have another @font-face declaration for this. Otherwise, you can just remove the unicode-range property altogether.

Upvotes: 1

Related Questions