WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
177039
[FreeType] Font variations not working for some fonts declared with CSS @font-face
https://bugs.webkit.org/show_bug.cgi?id=177039
Summary
[FreeType] Font variations not working for some fonts declared with CSS @font...
Michael Catanzaro
Reported
2017-09-16 13:45:33 PDT
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/
Attachments
Simple HTML used to reproduce the issue
(689 bytes, text/html)
2023-03-02 05:54 PST
,
Adrian Perez
no flags
Details
WOFF2 variable font referenced by the HTML reproducer
(163.86 KB, application/octet-stream)
2023-03-02 05:56 PST
,
Adrian Perez
no flags
Details
View All
Add attachment
proposed patch, testcase, etc.
michael
Comment 1
2020-11-02 05:44:49 PST
Is there any update on this, it still appears to be an issue on Linux.
Adrian Perez
Comment 2
2020-11-02 05:54:35 PST
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 :)
michael
Comment 3
2020-11-02 06:06:22 PST
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
Comment 4
2020-11-02 06:43:03 PST
(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
michael
Comment 5
2020-11-02 07:22:03 PST
(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
Comment 6
2023-02-15 09:26:14 PST
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
Comment 7
2023-03-02 05:51:21 PST
(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
Comment 8
2023-03-02 05:53:28 PST
(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
Comment 9
2023-03-02 05:54:09 PST
Created
attachment 465258
[details]
Simple HTML used to reproduce the issue
Adrian Perez
Comment 10
2023-03-02 05:56:10 PST
Created
attachment 465259
[details]
WOFF2 variable font referenced by the HTML reproducer
Michael Catanzaro
Comment 11
2023-03-02 07:37:54 PST
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
Comment 12
2023-03-02 11:25:13 PST
(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
Comment 13
2023-03-06 04:36:23 PST
Pull request:
https://github.com/WebKit/WebKit/pull/11104
EWS
Comment 14
2023-03-13 02:52:19 PDT
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
Comment 15
2023-03-13 02:53:16 PDT
<
rdar://problem/106635029
>
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug