Webkit weight and style matching bug

The CSS3 Fonts Module working draft defines the algorithm for matching font styles on a page. This part of the spec is followed by all browsers except for Webkit-based browsers, where a different font matching algorithm is used instead. This different algorithm can sometimes result in installed fonts being used for a font-family with a @font-face rule defined, which should never happen.

Test case:

Included on the page: only the bold italic variation of Arvo

  1. Text set in Arvo with font-weight: normal and font-style: normal
  2. Text set in Arvo with font-weight: normal and font-style: italic
  3. Text set in Arvo with font-weight: bold and font-style: normal
  4. Text set in Arvo with font-weight: bold and font-style: italic

Expected results:

Since a @font-face rule is defined for the font-family name "Arvo" with only one weight and style, all of the list items above should render in the bold italic variation of Arvo. No fallbacks and no installed fonts should appear. This works correctly in all non-Webkit browsers including IE 6-8.

Actual results in Webkit browsers:

In Chrome: The first and third list items render in a fallback font instead of the bold/italic variation of Arvo.

In Safari: The first and third list items render in a synthesized(?) normal and bold width of Arvo.

In Chrome + Safari on Mac OSX with the Arvo font family installed locally: the first, second, and third list items render in the locally installed fonts. According to the spec, local fonts should never be used for a family that is defined via @font-face rules, even if all font data in the family is invalid.

Why this bug is bad: