Bug 246167

Summary: REGRESSION: Sennhesier's website navigation bar uses synthetic bold and looks awful
Product: WebKit Reporter: Myles C. Maxfield <mmaxfield>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: fantasai.bugs, karlcow, mmaxfield, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screenshot
none
Webarchive
none
rendering in safari, firefox, chrome none

Myles C. Maxfield
Reported 2022-10-06 11:07:21 PDT
Created attachment 462841 [details] Screenshot https://en-us.sennheiser.com Screenshot attached 22A369
Attachments
Screenshot (8.60 KB, image/png)
2022-10-06 11:07 PDT, Myles C. Maxfield
no flags
Webarchive (8.00 MB, application/x-webarchive)
2022-10-06 11:07 PDT, Myles C. Maxfield
no flags
rendering in safari, firefox, chrome (147.32 KB, image/png)
2022-10-06 16:43 PDT, Karl Dubost
no flags
Myles C. Maxfield
Comment 1 2022-10-06 11:07:48 PDT
Created attachment 462842 [details] Webarchive
Myles C. Maxfield
Comment 2 2022-10-06 11:08:05 PDT
Looks much better in Chrome.
Alexey Proskuryakov
Comment 3 2022-10-06 12:58:47 PDT
Doesn't reproduce on macOS 12.5.1, not even with STP 154.
Radar WebKit Bug Importer
Comment 4 2022-10-06 12:59:03 PDT
Myles C. Maxfield
Comment 5 2022-10-06 13:36:05 PDT
This might only look awful on 1x displays.
Karl Dubost
Comment 6 2022-10-06 16:43:32 PDT
Created attachment 462847 [details] rendering in safari, firefox, chrome I like also how the width is different from browser to browser. ```css body, * { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .se-header__nav-1 .menu-list-items .menu-links > li > a { font-family: "sh-new-bold", Arial, "Helvetica Neue", Helvetica, sans-serif; color: #000; transition: color 0.3s ease-in-out, border 0.3s ease-in-out; font-weight: normal; letter-spacing: -0.5px; } .se-header__nav-section .mega-menu .menu-links.menu-top-links > li > a { line-height: 30px; font-size: 16px; border-bottom: none; font-weight: 600; padding: 0 !important; } ```
Karl Dubost
Comment 7 2022-10-06 16:57:39 PDT
A weird part of it is that they call sh-new-bold which is a bold font already. And they changed the font-weight. Also I don't know if it's a limitation of the Web Inspector. Firefox devtools font panel shows that it is using "Sennheiser Neue Bold" but Web Inspector says: "Sennheiser Neue" And Chrome says: "Sennheiser Neue—Network resource(8 glyphs)" which is vague. They also have two font faces declaration for bold. Defined by https://en-us.sennheiser.com/assets/v4r/custom-new-font/sh-new-bold-bb4284adf3f2e5590e6e1b5742b7f62441137e1df20eb9303edf56ddd621d385.woff in https://en-us.sennheiser.com/assets/v4r/application_v4r-51d808f1b42b078d97bffeba4b8e452391029a80ffb56ddbdf8f55730aa26019.css ``` @font-face { font-family:'sh-new-bold'; src:local("sh-new-bold"), url(/assets/v4r/custom-new-font/sh-new-bold-bb4284adf3f2e5590e6e1b5742b7f62441137e1df20eb9303edf56ddd621d385.woff) format("woff"), url(/assets/v4r/custom-new-font/sh-new-bold-f49e782f0029f5b5a9d6524fbf12eb8aa4be936bed2720a541249ec2c0aef950.eot) format("embedded-opentype"), url(/assets/v4r/custom-new-font/sh-new-bold-e98040100f51cac5eb61d4f24ceceaee15a9e049f6a6e5fd3d5339d0ba4862cb.otf) format("opentype"); font-weight:normal; font-style:normal; font-display:swap } @font-face { font-family:'sh-new-bold'; src:local("sh-new-bold"), url(/assets/v4r/custom-new-font/sh-new-bold-italic-4898bca0bb85ee92f3a3725257a06f066d48cc42f314756fab802747f52a8521.woff) format("woff"); font-weight:normal; font-style:italic; font-display:swap } @font-face { font-family:'sh-new-medium'; src:local("sh-new-medium"), url(/assets/v4r/custom-new-font/sh-new-medium-5571968c91623129732a0f84d1c5f636f4085d0cdea1ad4c36c1b4c5f41c7ccf.woff) format("woff"), url(/assets/v4r/custom-new-font/sh-new-medium-0e99119e7aa758bae71524ffaaf8acc8d1eb06faf045216ccb146fc3bc552402.eot) format("embedded-opentype"), url(/assets/v4r/custom-new-font/sh-new-medium-e5f05f718b9ff017587dde8cb0884a5640886d8d3cf597dbd126b35741e6efa1.otf) format("opentype"); font-weight:normal; font-style:normal; font-display:swap } @font-face { font-family:'sh-new-medium'; src:local("sh-new-medium"), url(/assets/v4r/custom-new-font/sh-new-medium-italic-123291afa1833dd5735b177c060059cd0f626d46a8640e4a1fa979c207502a41.woff) format("woff"); font-weight:normal; font-style:italic; font-display:swap } @font-face { font-family:'sh-new-regular'; src:local("sh-new-regular"), url(/assets/v4r/custom-new-font/sh-new-regular-089cc19028aa74419f5ec32f0ff31b96b7a6bf922f6a2694ec51412c8b7eb430.eot) format("embedded-opentype"), url(/assets/v4r/custom-new-font/sh-new-regular-e32c133d3b370920c518ebdde8c89ab02a0ca0fe3d1cd90d26aa1a31cf7646c9.woff) format("woff"), url(/assets/v4r/custom-new-font/sh-new-regular-5c3b43cb5e29ffa60f86be8eb9e5dd8560a0e387b2000789b6dc88928581afed.otf) format("opentype"); font-weight:normal; font-style:normal; font-display:swap } @font-face { font-family:'sh-new-regular'; src:local("sh-new-regular"), url(/assets/v4r/custom-new-font/sh-new-regular-italic-19562116c0b15f5039fa1f28f3f8519a9654dfe8a76f43da0f21c6f235ca7890.woff) format("woff"); font-weight:normal; font-style:italic; font-display:swap } @font-face { font-family:'sh-new-light'; src:local("sh-new-light"), url(/assets/v4r/custom-new-font/sh-new-light-803ec3904894ef689871680221276f660a8470d084b29b07f7510b327da43bee.woff) format("woff"), url(/assets/v4r/custom-new-font/sh-new-light-68453745f532890ec5572b02bc3d2bbdc32596777cb0fa78e50b90890f1ea498.eot) format("embedded-opentype"), url(/assets/v4r/custom-new-font/sh-new-light-5e2f56d37da47ab999d33d58c504eb5a5545c5bf254b4ced2620436fa37006ca.otf) format("opentype"); font-weight:normal; font-style:normal; font-display:swap } @font-face { font-family:'sh-new-light'; src:local("sh-new-light"), url(/assets/v4r/custom-new-font/sh-new-light-italic-ef7667b3c1e5d2ed62f04cc969a8793527b572c8698afd7b17c1cdead4aab9c7.woff) format("woff"), url(/assets/v4r/custom-new-font/sh-new-light-italic-08a65d633f788c5cb437745bb91a586b63c0b76e3731c84a38823082c83199de.eot) format("embedded-opentype"), url(/assets/v4r/custom-new-font/sh-new-light-italic-ceffea8431c68d15e1077ceb48842201501f25a40f483069503b3c338d382133.otf) format("opentype"); font-weight:normal; font-style:italic; font-display:swap } @font-face { font-family:'sh-new-monospaced'; src:local("sh-new-monospaced"), url(/assets/v4r/custom-new-font/sh-new-monospaced-28fe4b34d77c1a82a3f6fb223cde5a7b2c13373962639c05b60b696ed2b93eda.woff) format("woff"); font-weight:normal; font-style:normal; font-display:swap } @font-face { font-family:'sh-new-condensed'; src:local("sh-new-condensed"), url(/assets/v4r/custom-new-font/sh-new-condensed-9cd228e9c47f49975d00e64eaa2ff323eac4ee69c20d904678b48acdcbdd5dac.otf) format("opentype"); font-weight:normal; font-style:normal; font-display:swap } ```
Karl Dubost
Comment 8 2022-10-06 19:43:35 PDT
> They also have two font faces declaration for bold. nope. bold and bold-italic.
fantasai
Comment 9 2024-07-26 14:32:37 PDT
If they want `sh-new-bold` to be interpreted as bold, then they shouldn't be labelling it as not-bold. Changing `font-weight: normal` to `font-weight: bold` in that @font-face rule fixes the problem.
Note You need to log in before you can comment on or make changes to this bug.