Bug 230156

Summary:

WOFF2 fonts not loading

Product:

WebKit

Reporter:

Brandon McConnell <brandon>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

dino, fred.wang, kevin_neal, koivisto, mmaxfield, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Attachments:

Description	Flags
Chrome screenshot	none
Safari Technology Preview screenshot	none
Screenshot	none

Brandon McConnell

Reported 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

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
View All Add attachment proposed patch, testcase, etc.

Brandon McConnell

Comment 1 2021-09-10 09:22:27 PDT

Created attachment 437880 [details] Chrome screenshot

Brandon McConnell

Comment 2 2021-09-10 09:22:44 PDT

Created attachment 437881 [details] Safari Technology Preview screenshot

Brandon McConnell

Comment 3 2021-09-10 09:23:45 PDT

The font file being pulled in is: https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap

Kevin Neal

Comment 4 2021-09-10 14:56:03 PDT

Thank you for filing. Please attach a code file that reproduces the issue.

Radar WebKit Bug Importer

Comment 5 2021-09-10 14:56:22 PDT

<rdar://problem/82990860>

Alexey Proskuryakov

Comment 6 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.

Myles C. Maxfield

Comment 7 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".)

Brandon McConnell

Comment 8 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.

Brandon McConnell

Comment 9 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.

Myles C. Maxfield

Comment 10 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.

Note You need to log in before you can comment on or make changes to this bug.