System Font Stack
The reason for the preface is that it shows how deep you may need to go back to support system fonts. Additionally, it helps show that with new system versions, come new fonts, and thus the possibility of needing to update your font stack.
Method 1: System Fonts at the Element Level
Chrome and Safari have recently shipped “system-ui” which is a generic font family that can be used in place of “-apple-system” and “BlinkMacSystemFont” in the following examples. Hat tip to J.J. for the info. One method for applying system fonts is by directly calling them on an element using the font-family property. GitHub uses this method on their site, applying system fonts on the body element:
/* System Fonts as used by GitHub */ body
Both Medium and the WordPress admin use a similar approach, with a slight variation, most notably support for Oxygen Sans (created for the GNU+Linux operating system) and Cantarell (created for the GNOME operating system). This snippet also drops support for certain types of emoji and symbols:
/* System Fonts as used by Medium and WordPress */ body
More recently, Chrome and Safari shipped a system-ui , which is a generic font family that can replace -apple-system and BlinkMacSystemFont . That means the GitHub snippet could be reduced to this:
/* System Fonts with system-ui */ body
Note: Booking.com published a thorough write-up that warns against using the snippets that start with -apple-system on the font shorthand property because some browsers may view the leading font as a vendor prefix that will be ignored. Use the font-family property instead, or replace -apple-system and BlinkMacSystemFont with system-ui . The obvious limitation here is that you have to call that long list of fonts each time you want to apply it to an individual element. Over time, that could become cumbersome and make your code more bloated than it ought to be. Instead, you might consider making a CSS variable for it:
This is certainly easier to read but is also more maintainable if the stack ever needs updating. Change it once and it applies everwhere!
Method 2: System Font Stacks
/* Define the "system" font family */ @font-face < font-family: system-ui; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); >/* Now, let's apply it on an element */ body The snippet has not been updated in some time as of this writing and might result in different fonts, but the reason we’re including it here is that it illustrates the capability to define variations of the system-ui font family that is defined in the snippet above to account for italics, bolding, and additional weights. If we didn’t have CSS variables, this would be a much more effciient way to write and update the code.
- OS Specific Fonts in CSS – which includes a JavaScript method for testing the font in use.
- System Fonts in SVG
- Implementing system fonts on Booking.com — A lesson learned – Booking.com shares how they learned using a system font stack on the font shorthand does not work as expected.
Tiger Oakes
Windows 11 introduced a new system font called Segoe UI Variable. This new font is a variable font that replaces the older Segoe UI font in Windows 10 and below.
Many sites use the system font when rendering sans-serif text, since it’s quick to load (already installed in your device) and looks like other apps on your device. You might see a CSS rule like this:
body font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; >This is used often enough that browsers introduced the system-ui font-family to replicate the same behaviour. However, even though Segoe UI Variable is the new system font in Windows 11, it’s not used if you set the font-family to system-ui . So how do you use it?
How to load it with CSS
The intuitive way doesn’t work.
body /* Doesn't work in any browser as of May 2022 */ font-family: 'Segoe UI Variable'; >Segoe UI Variable isn’t available, even though you can see it in the system font list. The browser will just fall back to another font like Times New Roman. The only way to use it with this name is to download a webfont, which adds to your site’s download size.
So how do you use Segoe UI Variable? I spent a few days asking around at Microsoft trying to find out. Ian Prest, who’s working on fonts in Microsoft Edge, let me know that you need to use one of the following 3 names:
body font-family: 'Segoe UI Variable Text'; font-family: 'Segoe UI Variable Small'; font-family: 'Segoe UI Variable Display'; >Why the different names?
However, the version of Segoe UI Variable that comes with Windows 11 doesn’t have optical size variation (or it doesn’t work in web browsers). So you have to specify the version you want separately. (Hopefully this is fixed in a future version of Windows.)
.small-text font-family: 'Segoe UI Variable Small'; font-size: 10px; > .medium-text font-family: 'Segoe UI Variable Text'; font-size: 16px; > .big-text font-family: 'Segoe UI Variable Display'; font-size: 36px; >How to use this with a web font fallback
What if you wanted every user to see Segoe UI Variable? Windows 11 users should use the local copy, and other users should automatically download a copy of the font from the web. This is what I’m currently working on for Microsoft Loop.
(Note: Segoe UI is copyrighted by Microsoft, so you should only do this when working on a Microsoft site.)
The downloadable version of Segoe UI Variable has all 3 optical size axis bundled into one file. So how do you use that with 3 different font names? The final CSS looks like this.
@font-face font-family: 'Segoe UI Variable Small'; src: local('Segoe UI Variable Small'), url('/fonts/SegoeUIVF-all.tff') format('truetype-variations'); font-variation-settings: 'opsz' 1; font-weight: 300 700; font-style: normal; > @font-face font-family: 'Segoe UI Variable Text'; src: local('Segoe UI Variable Text'), url('/fonts/SegoeUIVF-all.tff') format('truetype-variations'); font-variation-settings: 'opsz' 10.5; font-weight: 300 700; font-style: normal; > @font-face font-family: 'Segoe UI Variable Display'; src: local('Segoe UI Variable Display'), url('/fonts/SegoeUIVF-all.tff') format('truetype-variations'); font-variation-settings: 'opsz' 36; font-weight: 300 700; font-style: normal; >The font-variation-settings property is the key here and lets you specify the optical size of the variable font. While SegoeUIVF-all.ttf is loaded for every font family, it uses a different axis of variation depending on the name.
The other properties font-weight and font-style list the range of supported weights and styles for the font. It’s important to place these properties after the font-variation-settings property, otherwise they’ll be overriden by font-variation-settings .
Want to read more?
On this site I try to write about interesting and weird projects, and my newsletter is no different! It includes early access to upcoming posts and access to special bonus content. No spam, unsubscribe at any time. contact @tigeroakes.com
AndrewCraswell / gist:106143d1bb5d4162689b9e1d89a2d0fb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| @font-face |
| font-family: SegoeUI; |
| src: |
| local(«Segoe UI Light»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format(«woff2»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format(«woff»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format(«truetype»); |
| font-weight: 100; |
| > |
| @font-face |
| font-family: SegoeUI; |
| src: |
| local(«Segoe UI Semilight»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format(«woff2»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format(«woff»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format(«truetype»); |
| font-weight: 200; |
| > |
| @font-face |
| font-family: SegoeUI; |
| src: |
| local(«Segoe UI»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format(«woff2»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format(«woff»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format(«truetype»); |
| font-weight: 400; |
| > |
| @font-face |
| font-family: SegoeUI; |
| src: |
| local(«Segoe UI Bold»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format(«woff2»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format(«woff»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format(«truetype»); |
| font-weight: 600; |
| > |
| @font-face |
| font-family: SegoeUI; |
| src: |
| local(«Segoe UI Semibold»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format(«woff2»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format(«woff»), |
| url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format(«truetype»); |
| font-weight: 700; |
| > |