Bug 177039 – [FreeType] Font variations not working for some fonts declared with CSS @font-face

• Component: Text
• Status: RESOLVED FIXED

[Michael Catanzaro]

Our stack will soon have all the plumbing necessary to support font variations [1], and Apple ports already do. We should, too.

[1] https://blogs.gnome.org/mclasen/2017/09/16/fun-with-fonts/

Is there any update on this, it still appears to be an issue on Linux.

[Adrian Perez]

Font variations are supported since WebKitGTK 2.24:

  https://webkitgtk.org/2019/03/13/webkitgtk2.24.0-released.html

Browsing e.g. https://v-fonts.com has worked perfectly after 2.28.0; at
some point there were a couple of some small bugs with font variations
which got fixed after the initial support debuted in 2.24 :)

Check out https://tobiasbernard.com/ and https://hostbend.com with WebKitGTK, you'll see that it works for whatever font gets picked before Inter is downloaded. Then when the fonts swap during page load, everything gets de-bolded.

[Adrian Perez]

(In reply to michael from comment #3)
> Check out https://tobiasbernard.com/ and https://hostbend.com with
> WebKitGTK, you'll see that it works for whatever font gets picked before
> Inter is downloaded. Then when the fonts swap during page load, everything
> gets de-bolded.

Right, I can confirm that the issue happens here as well, using both
a recent build from “trunk” and 2.30.2, thanks for pointing this out!

Let's reopen the bug and repurpose it for the particular case. It should
not be hard to try if this happens only for WOFF2 fonts, or whether it is
a more general problem for any @font-face declaration that is using the
the names of registered axes.

For the record, according to MDN [1] one should use “woff2-variations”
instead of “woff2” as the format for variable fonts. This is missing
from the CSS served by the tobiasbernard.com site; I tried applying the
change locally but the issue persists.


[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide

(In reply to Adrian Perez from comment #4)
> (In reply to michael from comment #3)
> > Check out https://tobiasbernard.com/ and https://hostbend.com with
> > WebKitGTK, you'll see that it works for whatever font gets picked before
> > Inter is downloaded. Then when the fonts swap during page load, everything
> > gets de-bolded.
> 
> Right, I can confirm that the issue happens here as well, using both
> a recent build from “trunk” and 2.30.2, thanks for pointing this out!
> 
> Let's reopen the bug and repurpose it for the particular case. It should
> not be hard to try if this happens only for WOFF2 fonts, or whether it is
> a more general problem for any @font-face declaration that is using the
> the names of registered axes.
> 
> For the record, according to MDN [1] one should use “woff2-variations”
> instead of “woff2” as the format for variable fonts. This is missing
> from the CSS served by the tobiasbernard.com site; I tried applying the
> change locally but the issue persists.
> 
> 
> [1]
> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/
> Variable_Fonts_Guide

Awesome! I own the https://hostbend.com website and have updated it to use a different declaration for now, but I would like to get this fixed for future projects. :)

[Commenter25]

This still seems to have issues. Changing font-variation-settings directly appears to work, however, the standardized axis names such as "wght" and "wdth" do not map to the proper CSS shorthands. 

There are multiple examples on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide. Testing with Epiphany 44.beta-12-g103ea77fe+ (the latest canary build), anything other than font-variation-settings declarations do not work.

Another real world example is on https://design.ubuntu.com/font. The font tester changes the weight via an inline font-weight, but always displays the normal weight. If you manually add "font-variation-settings: 'wght' 900" in devtools, it will display the maximum boldness.

[Adrian Perez]

(In reply to Commenter25 from comment #6)
> This still seems to have issues. Changing font-variation-settings directly
> appears to work, however, the standardized axis names such as "wght" and
> "wdth" do not map to the proper CSS shorthands. 
> 
> There are multiple examples on
> https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/
> Variable_Fonts_Guide. Testing with Epiphany 44.beta-12-g103ea77fe+ (the
> latest canary build), anything other than font-variation-settings
> declarations do not work.
> 
> Another real world example is on https://design.ubuntu.com/font. The font
> tester changes the weight via an inline font-weight, but always displays the
> normal weight. If you manually add "font-variation-settings: 'wght' 900" in
> devtools, it will display the maximum boldness.

We are hitting this in the WPE WebKit website, we have an issue reported:

  https://github.com/Igalia/wpewebkit.org/issues/149

I have been able to verify that the following HTML triggers the issue:

  <!DOCTYPE html>
  <html>
    <head>
      <style type="text/css">
        @font-face {
          font-family: 'Source Sans 3 VF';
          font-weight: 200 700;
          src: url(https://wpewebkit.org/assets/SourceSans3VF-Roman.ttf.woff2)
            format('woff2-variations');
        }
        p { font-family: 'Source Sans 3 VF' }
      </style>
    </head>
    <body>
      <p>Test paragraph, with <strong>strong</strong> and <b>bold</b> elements.</p>
      <p style="font-weight: bold">Bold test paragraph.</p>
      <p style="font-variation-settings: 'wght' 400">Test paragraph w/ font-variation-settings</p>
      <p style="font-variation-settings: 'wght' 675">Bold test paragraph w/ font-variation-settings</p>
    </body>
  </html>

There are two failure modes depending on whether the font is locally installed:

  * Font NOT locally installed: The two last paragraphs are displayed correctly.
  * Font IS locally installed: all the paragraphs are displayed correctly.

When locally installed, the output from “fc-list” is as follows:

  % fc-list | grep 'Source Sans 3 VF'    
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Regular
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Light
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF:style=Light Italic
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF:style=Semibold Italic
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Bold
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF:style=Black Italic
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Roman,Regular
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF:style=Bold Italic
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Semibold
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF:style=Italic
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Italic.otf: Source Sans 3 VF
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF:style=Black
  /usr/share/fonts/adobe-source-sans/SourceSans3VF-Roman.otf: Source Sans 3 VF
  %

Give these results, my hypothesis is that trying to resolve e.g. “font-weight: bold”
when the font is locally installed things works because Fontconfig will provides matches
for the bold weight--even if the mapping from “font-weight” to the “wght” is not done
by WebKit itself 🤔️

[Adrian Perez]

(In reply to Adrian Perez from comment #7)
 
> I have been able to verify that the following HTML triggers the issue:
> 
>   <!DOCTYPE html>
>   <html>
>     <head>
>       <style type="text/css">
>         @font-face {
>           font-family: 'Source Sans 3 VF';
>           font-weight: 200 700;
>           src:
> url(https://wpewebkit.org/assets/SourceSans3VF-Roman.ttf.woff2)
>             format('woff2-variations');
>         }

Correction:

  src: local('Source Sans 3 VF'),
       url(https://wpewebkit.org/assets/SourceSans3VF-Roman.ttf.woff2)
          format('woff2-variations');

The “local()” is what makes WebKit try to get installed fonts using
Fontconfig.

[Adrian Perez]

Created attachment 465258 [details]
Simple HTML used to reproduce the issue

[Adrian Perez]

Created attachment 465259 [details]
WOFF2 variable font referenced by the HTML reproducer

[Michael Catanzaro]

Part of the problem is that arbitrary locally-installed fonts are visible to the web at all. There's little point in trying to protect users from other fingerprinting vectors if we don't fix such an obvious one. Only a few allowlisted fonts should be visible to WebKit. I wonder if we have a different bug report for that or not....

[Commenter25]

(In reply to Michael Catanzaro from comment #11)
> Part of the problem is that arbitrary locally-installed fonts are visible to
> the web at all. There's little point in trying to protect users from other
> fingerprinting vectors if we don't fix such an obvious one. Only a few
> allowlisted fonts should be visible to WebKit. I wonder if we have a
> different bug report for that or not....

I have to agree, I see little value in exposing local fonts. The only possible benefit is potential bandwidth savings in the likely uncommon chance someone has your font installed. And the cost is one of the biggest fingerprinting vectors on the web.

Even if we ignore fingerprinting, it encourages inconsistent website designs. I have seen developers place very particular stylized fonts in a font-family without distributing that font themselves. This looks fine to the developer with this font on their system, but to most users who likely don't have that font, it will not appear as the author intended. Limiting local fonts would encourage developers to make a consistent experience for users by distributing the font directly, and making a fallback with a standardized font people are expected to have.

There is also the possibility of someone having a font installed with the same name but is not actually the same font. A likely example is using a variable font on your website, but someone only has static versions installed, so any variable features become broken. An extreme example would be someone happening to have a font installed with the same name, but it is something completely different, like a fancy cursive font or even an icon font rather than a simple sans-serif font. 

There are already generally agreed upon "web safe" fonts and system fonts that everyone likely has. Perhaps setting a standard for people to only use these fonts would be for the better. This is just my take of course, this seems like a big decision with many nuances that should be discussed elsewhere. In particular, which specific fonts to allow is something to carefully consider.

[Vitaly Dyackhov]

Pull request: https://github.com/WebKit/WebKit/pull/11104

[EWS]

Committed 261566@main (2d385163e7ce): <https://commits.webkit.org/261566@main>

Reviewed commits have been landed. Closing PR #11104 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/106635029>