In CSS, I have something like this:
.header {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</header>I have tested this on different browsers, but the appearance of the text doesn't seem to be consistent. I had a look to see which system font the browsers have picked up. These are the results:
Chrome Version 121.0.6167.140 (Official Build) (32-bit)
Rendered Fonts
Family name: Helvetica Neue
PostScript name: HelveticaNeue-Condensed
Font origin: Local file(15 glyphs)
Edge Version 121.0.2277.106 (Official build) (64-bit)
Rendered Fonts
Family name: Helvetica Neue
PostScript name: HelveticaNeue-Condensed
Font origin: Local file(15 glyphs)
Firefox Version 115.7.0esr (32-bit)
Fonts Used
Helvetica Neue
HelveticaNeue-Medium
Firefox is the result I want. Helvetica Neue Condensed is like a variant of the Helvetica Neue. As a CSS developer, intuitively, I would only want to use "Helvetica Neue Condensed" if I specify font-stretch: condensed;
Just wonder if there is a workaround about making this consistent without supplying the font file online. I want users to stick with system fonts where possible.