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.

Answer 1

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.

Answer 2

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;