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

Thu Mar 2 05:51:21 PST 2023

https://bugs.webkit.org/show_bug.cgi?id=177039

--- Comment #7 from Adrian Perez <aperez at igalia.com> ---
(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 ��️

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230302/30ae9ee3/attachment-0001.htm>