Goal: Render the appropriate font weight for font family Proxima Nova in Firefox and (Headless)Chrome on macOS for local visual diff tests of web page.

Info:

• Proxima Nova, and all of its font variants (Thin, Regular, Semibold, Bold, Extrabold, Black, +Italic) are all installed locally in macOS's font book.

• All of the files are also available as opentype fonts (.otf) as part of the web application

• The various font weights are not rendering properly in Firefox & Chrome, but are rendering properly in Safari:

  • Safari (good): (description: title and value in card is in bold)
  • Chrome/Firefox (bad): (description: title and value in card is in regular)

CSS:

index.css

@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 400;
  src:
    local("Proxima Nova"),
    local("ProximaNova"),
    url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Regular.otf")
      format("opentype");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 600;
  src:
    local("Proxima Nova"),
    local("ProximaNova"),
    url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Semibold.otf")
      format("opentype");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: bold;
  src:
    local("Proxima Nova"),
    local("ProximaNova"),
    url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Bold.otf")
      format("opentype");
}
@font-face {
  font-family: "Proxima Nova";
  font-style: normal;
  font-weight: 800;
  src:
    local("Proxima Nova"),
    local("ProximaNova"),
    url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Extrabold.otf")
      format("opentype");
}

(in the component)

font-family: Proxima Nova;
font-style: normal;
font-weight: 900;

In Firefox's CSS inspector:

  font-family: Proxima Nova;
  font-style: normal;
  font-weight: 900;

Versions:

This issue has been tested to be present on the following versions:

• macOS: 11, 12, 13, 14, 15 (latest) -- from BigSur to Sequioa
• Chrome: 83.0, 134.0 (latest) -- 83 tested, 134 tested, but no idea in between
• Firefox: 134.0 (latest) -- no anterior version tested

This issue has been tested NOT to be present (works fine) in the following environments:

• macOS 15 (latest) + Safari: 17.4.1 (latest)
• docker - node:20-slim + HeadlessChrome 83.0
• debian + HeadlessChrome 83.0

Question:

Why is it that the CSS works properly on Linux and on macOS Safari, but not on macOS x Firefox or Chrome? Is it because Firefox/Chrome load the fonts differently than Safari on macOS, and that on Linux the fonts are not installed, and thus are read directly from the otf files?

EDIT while writing the post:

Removing

src:
    local("Proxima Nova"),
    local("ProximaNova"),

from the @font-face blocks solves the issue.

so new question:

Can anyone explain how to correct the local macOS configuration for loading Proxima Nova properly? Is there a way to configure via CLI what font file to use for different weights?