This will certainly only be applied to users on an iOS or macOS device. For example, the first font defined is always -apple-system. We do this by starting with the most specific fonts possible, and moving on to fonts that are less guaranteed to be tied to a specific device. This means that we have to craft the stack in such a way that the first font available to the user is their system font, and not some font they have installed on their machine. Because we are just passing font names to the property, the font that will be used is the first font available on the user's machine that matches that name. The order in which the fonts are defined in the font-family property is very important. These are the different fonts that have been used, and the devices (and browsers) they target - Font However, the fonts used by different sites, although not exactly the same, overlap. The Font Stack #Īt the moment, there is not one universally-used sequence of fonts for this system font stack. With this method, the fonts used by different systems are explicitly called themselves in the font-family property. Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. This means that we cannot use it in a list of font families with fallbacks or as a fallback itself. These keywords can be useful, but they also have some drawbacks, the main one being that they only work with the shorthand font property. The system font stack you have included is one of the first versions created, since then the preferred system font stack changed a lot, maybe you should just update your approach.A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser). These two variants are working well for me: This bug happens on and GitLab CE Possible fixes
use the system font, in my case "Lato" in the right font-weight.Install Roboto on Ubuntu Gnome 16.04 and open in firefox? What is the current bug behavior? (2) "Roboto" matches the 700 font-weight on my system, so the regular text is bold everywhere.
Roboto is detected, cause it's locally installed.
Font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
0 kommentar(er)
