3 ms·
> 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 dow
by WorldMaker 4y ago
> 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 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.)
- jfk13 4y agoI 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 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.