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.