Bug 213938

Summary: Google Fonts don't render properly if font weights not imported
Product: WebKit Reporter: stuart.shapiro+webkitbugzilla
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: bfulgham, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Safari vs Chrome font screenshots none

Description stuart.shapiro+webkitbugzilla 2020-07-03 13:28:47 PDT 
Created attachment 403476 [details]
Safari vs Chrome font screenshots

When viewing a website that uses Google Fonts, the font does not render properly if the weight is not specifically called in the @import or <link> code.

Example site:
https://www.transportation.gov/briefing-room/us-department-transportation-issues-enforcement-notice-clarifying-air-carrier-refund

The Lato font renders incorrectly in both Safari (and Firefox 78.0.1 if that helps with debugging). In Chromium-based browsers, the font still renders properly even without the weight specifically mentioned.

In the CSS for the site, it uses this code:

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");

Manually adding code to the <head> with the font weight makes the font render properly:

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
</style>

I'm also noticing this issue in Office Online sites (where it's importing Segoe UI). I'm unable to find the code responsible for importing the font, but I imagine it's a similar issue.
Comment 1 Radar WebKit Bug Importer 2020-07-06 09:47:16 PDT 
<rdar://problem/65135680>