W3C CSS validator is giving errors on @font-face unicode-range

Question

Since few days ago W3C CSS validator started to be more strict and started to give errors on this type of CSS3 implementation (this type of CSS3 files are everywhere and they were used for example by Google Fonts):

/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  font-display: fallback;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIO-aBXso.woff2") format('woff2');
  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;
  font-display: fallback;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2');
  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;
  font-display: fallback;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUbuvISTs.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  font-display: fallback;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUb-vISTs.woff2") format('woff2');
  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;
  font-display: fallback;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'), url("fonts/XRXW3I6Li01BKofAjsOUYevI.woff2") format('woff2');
  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;
  font-display: fallback;
}

With the following error on unicode-range: Too many values or values are not recognized

Apparently many developers have used unicode ranges with multiple values and multiples ranges for their fonts because MDN says it is OK, but apparently it is not, since according to W3C docs, the syntax for unicode-range is:

unicode-range: single codepoint | codepoint range | wildcard range | initial | inherit;

That is, apparently many ranges are not possible.

How to tackle this issue?

This seems to be a very strict approach of W3C since many browsers support several ranges, and it indeed saves bandwidth because allows more flexibility on which font files are to be downloaded.

see: https://stackoverflow.com/questions/69585993/error-css-unicode-range-too-many-values-or-values-are-not-recognized-but — Luuk, Oct 24 '21 at 13:36
Does this answer your question? [Error: CSS: unicode-range: Too many values or values are not recognized](https://stackoverflow.com/questions/69516381/error-css-unicode-range-too-many-values-or-values-are-not-recognized) — Luuk, Oct 24 '21 at 13:37
@Luuk no, they just make a workaround, please read my question carefully, thanks — João Pimentel Ferreira, Oct 24 '21 at 13:38
Multiple ranges are definitely valid. The latest W3C recommendation standard gives examples of such in [4.6. Using character ranges to define composite fonts](https://www.w3.org/TR/css-fonts-3/#composite-fonts) as does the latest [Editor's draft](https://drafts.csswg.org/css-fonts/#example-3fd9c28a). I conclude that this is just a bug in the validator. — Alohci, Oct 24 '21 at 21:54
The spec also says of the [unicode-range property](https://drafts.csswg.org/css-fonts/#unicode-range-desc) "This descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range () values." — Alohci, Oct 24 '21 at 22:02
@Alohci, interesting, but W3C CSS validator is giving error on multiple ranges, try yourself: https://jigsaw.w3.org/css-validator/ — João Pimentel Ferreira, Oct 24 '21 at 23:04
I did try. The validator even fails the examples in the spec. Ergo, it's a validator bug. It happens. — Alohci, Oct 25 '21 at 00:09
@Alohci do you know how do I report that to W3C? My whole test suite is failing because we are obliged to use the W3C validation. And BTW, can you make a reply here, such that I set it as the correct answer? Thanks — João Pimentel Ferreira, Oct 25 '21 at 08:56
See https://github.com/w3c/css-validator/issues. I'll write up a full answer later. — Alohci, Oct 25 '21 at 09:33

Luuk · Answer 1 · 2022-04-22T06:31:54.693

1

EDIT: This answer is no longer valid because there was a bug on in the validator, see: https://stackoverflow.com/a/69711789/724039

The correct solution is was to follow the 'docs' at MDN Webdocs: unicode-range

change: unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;

to:

unicode-range: U+0102-0103;
unicode-range: U+0110-0111;
unicode-range: U+1EA0-1EF9;
unicode-range: U+20AB;

edited Apr 22 '22 at 06:31

answered Oct 24 '21 at 13:46

Luuk

12,245
5
22
33

you are GREAT! I read that docs, but I though they were alternatives and that you could not have several `unicode-range` – João Pimentel Ferreira Oct 24 '21 at 14:16
doesn't seem to work, at least on Chrome – João Pimentel Ferreira Oct 24 '21 at 14:52
this doesnt work, it only applies the last unicode-range definition – Luminous_Dev Apr 22 '22 at 00:17
I added info about the defect on the validator which is fixed. (and is the accepted answer to this question) – Luuk Apr 22 '22 at 06:33

Alohci · Accepted Answer · 2021-10-25T17:15:11.140

This is a defect of the validator.

The CSS Fonts Specification defines the unicode-range property as

Value: <urange>#

where <urange> can be any of

single codepoint (e.g. U+416)<br>
    a Unicode codepoint, represented as one to six hexadecimal digits

interval range (e.g. U+400-4ff)<br>
    represented as two hyphen-separated Unicode codepoints indicating the 
     inclusive start and end codepoints of a range

wildcard range (e.g. U+4??)<br>
    defined by the set of codepoints implied when trailing '?' characters 
    signify any hexadecimal digit

And the # means

... that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by white space and/or comments).

The specification underlines this formal definition in prose:

This descriptor defines the set of Unicode codepoints that may be supported by the font face for which it is declared. The descriptor value is a comma-delimited list of Unicode range () values.

It also provides examples. Example 30 is particular useful:

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

If you submit this to the CSS validator, it will report the same error. Since the spec is authoritative, the validator must be in error.

I submitted the bug towards W3C, they will fix it, thanks https://github.com/w3c/css-validator/issues/350 — João Pimentel Ferreira, Oct 26 '21 at 07:21

W3C CSS validator is giving errors on @font-face unicode-range

2 Answers2

This is a defect of the validator.

Linked

Related