Bug 113715 – @font-face downloads all external fonts of same name, regardless of weight

• Component: CSS
• Status: NEW

[Tom Genoni]

Created attachment 196003 [details]
Shows webkit downloading all external fonts

Given the following CSS:

body {
  font-family: "Source Sans Pro";
  font-weight: 200;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url("SourceSansPro-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url("SourceSansPro-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

...the expected behavior is that the browser only downloads "SourceSansPro-ExtraLight.woff" but both "SourceSansPro-ExtraLight.woff" and "SourceSansPro-Light.woff" are downloaded. Mozilla only downloads the "SourceSansPro-ExtraLight.woff" font.

[Tom Genoni]

Created attachment 196005 [details]
HTML example.

[Glenn Adams]

Could you point out the spec text the defines the "correct" behavior?

[Tom Genoni]

(In reply to comment #2)
> Could you point out the spec text the defines the "correct" behavior?

http://www.w3.org/TR/css3-fonts/#font-face-loading
"User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant."

[Brad Vogel]

Cross-filed for blink - https://code.google.com/p/chromium/issues/detail?id=226849

[Radar WebKit Bug Importer]

<rdar://problem/22612942>

[Myles C. Maxfield]

See also: https://bugs.webkit.org/show_bug.cgi?id=42154

[Ahmad Saleem]

All browsers differ - I look into Chrome Bug mentioned in Comment 04, which got fixed in the past and then took the tests and changed them into following JSFiddles:

Link - https://jsfiddle.net/t9qrmnhs/show

Link - https://jsfiddle.net/o1hnL89a/show

Link - https://jsfiddle.net/8gp0h1d4/show

I am getting different behaviour across all browsers and not sure, which is aligned with web-spec but just wanted to share updated results. Thanks!