Bug 246167

Created attachment 462842 [details] Webarchive

Looks much better in Chrome.

Doesn't reproduce on macOS 12.5.1, not even with STP 154.

<rdar://problem/100866227>

This might only look awful on 1x displays.

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; } ```

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 } ```

> They also have two font faces declaration for bold. nope. bold and bold-italic.

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.