4 ms·
> Browsers have always loaded a font from the system over a web font if it has a font of that name. This isn't actually accurate. It's possible for a CSS autho
by jfk13 4y ago
> Browsers have always loaded a font from the system over a web font if it has a font of that name.
This isn't actually accurate. It's possible for a CSS author to write @font-face rules that behave in this way (by including local(...) sources ahead of remote-font URLs), but that's by no means universal practice.
- 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.