Bug 230156 - WOFF2 fonts not loading
Summary: WOFF2 fonts not loading
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-10 09:20 PDT by Brandon McConnell
Modified: 2021-09-13 15:12 PDT (History)
6 users (show)

See Also:


Attachments
Chrome screenshot (85.42 KB, image/png)
2021-09-10 09:22 PDT, Brandon McConnell
no flags Details
Safari Technology Preview screenshot (90.85 KB, image/png)
2021-09-10 09:22 PDT, Brandon McConnell
no flags Details
Screenshot (1.57 MB, image/png)
2021-09-13 12:58 PDT, Myles C. Maxfield
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Brandon McConnell 2021-09-10 09:20:17 PDT
CanIUse claims that Safari/WebKit supports the WOFF2 font format (https://caniuse.com/woff2). However, this does not appear to be the case, as I am pulling multiple fonts from Google Fonts which load as WOFF2. They render on every browser except WebKit. This can be seen by looking at the title font here: https://codepen.io/brandonmcconnell
Comment 1 Brandon McConnell 2021-09-10 09:22:27 PDT
Created attachment 437880 [details]
Chrome screenshot
Comment 2 Brandon McConnell 2021-09-10 09:22:44 PDT
Created attachment 437881 [details]
Safari Technology Preview screenshot
Comment 4 Kevin Neal 2021-09-10 14:56:03 PDT
Thank you for filing. Please attach a code file that reproduces the issue.
Comment 5 Radar WebKit Bug Importer 2021-09-10 14:56:22 PDT
<rdar://problem/82990860>
Comment 6 Alexey Proskuryakov 2021-09-12 14:26:24 PDT
(In reply to Kevin Neal from comment #4)
> Thank you for filing. Please attach a code file that reproduces the issue.

The test is at <https://codepen.io/brandonmcconnell>. It's better to have an attachment, but a URL is fine too.
Comment 7 Myles C. Maxfield 2021-09-13 12:58:28 PDT
Created attachment 438067 [details]
Screenshot

All browsers seem to render the text the same way, at least on my machine. I attached a screenshot.

(I'm assuming the text in question is the big title in the middle "Brandon McConnell".)
Comment 8 Brandon McConnell 2021-09-13 13:02:46 PDT
I apologize. I was actively trying to troubleshoot more on my machine. Can you refresh again now. In most other browsers, it should appear in Permanent Marker font like my original Chrome screenshot.
Comment 9 Brandon McConnell 2021-09-13 13:06:07 PDT
Actually, I am able to reproduce the issue on another device. Allow me some time to find a method to persistently reproduce the issue only on WebKit.
Comment 10 Myles C. Maxfield 2021-09-13 15:12:57 PDT
Do you have Permanent Marker installed on your local computer? WebKit/Safari won't use locally-installed fonts, because they are a way that users can be fingerprinted and tracked across the whole web. Other browsers will use locally-installed fonts, though.