> Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

`font-family` rules apply ahead of `@font-face` rules. `@font-face` rules are used to source fonts not already installed on the system.

(ETA: local() is to provide alternate family names when a font may be installed under different family names.)

I think you may be misunderstanding how @font-face rules and font-family names work. (Or else I'm not understanding how you're stating it.)

See https://www.w3.org/TR/css-fonts-3/#font-family-desc:

> If the font family name is the same as a font family available in a given user's environment, it effectively hides the underlying font for documents that use the stylesheet.

Given CSS such as

    body { font-family: Palatino, serif; }
    @font-face { font-family: Palatino; src: url(palatino.ttf); }

this will block the browser from using an installed Palatino font and tell it to load the remote resource instead. So it's possible to use

    @font-face { font-family: Palatino; src: local("Palatino"), url(palatino.ttf); }

to ask for the locally-installed font if present, falling back to the remote resource otherwise.