css-tricks.com Open in urlscan Pro
2606:4700:4400::ac40:94eb Public Scan

Back to summary

URL:
https://css-tricks.com/snippets/css/system-font-stack/
Submission: On November 30 via api (November 30th 2024, 4:36:15 pm UTC) from US — Scanned from DE

Form analysis
3 forms found in the DOM

POST

<form action="" method="post" id="commentform" class="comment-form">
  <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p>
  <p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"
      placeholder="New Comment! Use `backticks` for code."></textarea></p>
  <div id="markdown_comment" class="comment-content markdown-comment-preview"></div>
  <div class="preview-buttons" id="preview-buttons"> <a href="#0" id="writeCommentButton" class="commentPreviewButton active">Write</a> <a href="#0" id="previewCommentButton" class="commentPreviewButton">Preview</a></div>
  <p></p>
  <p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required"></p>
  <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p>
  <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url"></p>
  <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time
      I comment.</label></p>
  <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="249514" id="comment_post_ID">
    <input type="hidden" name="comment_parent" id="comment_parent" value="0">
  </p>
  <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="69db2261da"></p>
  <p class="antispam-group antispam-group-q" style="clear: both; display: none;">
    <label>Copy and paste this code: <strong class="antspmpro-input-a">micuno</strong> <span class="required">*</span></label>
    <input type="hidden" name="antspmpro-a" class="antispam-control antispam-control-a" value="micuno">
    <input type="text" name="antspmpro-q-luwele" class="antispam-control antispam-control-q" value="4.1">
  </p>
  <p class="antispam-group antispam-group-e" style="display: none;">
    <label>Leave this field empty</label>
    <input type="text" name="antspmpro-e-email-url-website-luwele" class="antispam-control antispam-control-e" value="">
  </p>
  <p style="display: none !important;" class="akismet-fields-container" data-prefix="ak_"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js"
      value="1732984570756"></p>
</form>

<form id="mktoForm_1402" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 151px;">
  <style type="text/css">
    .mktoForm .mktoButtonWrap.mktoFirefox .mktoButton {
      background-color: #82C43A;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
      background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
      border: none;
      display: inline-block;
      vertical-align: middle;
      margin: 2px;
      font: italic 14px/32px Georgia, Serif;
      text-align: center;
      color: white;
      text-decoration: none;
      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1), 0px 3px 0px rgba(0, 0, 0, 0.1);
      padding: 0px 15px 3px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }

    .mktoForm .mktoButtonWrap.mktoFirefox .mktoButton:hover {
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
      background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
      background-image: linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
    }

    .mktoForm .mktoButtonWrap.mktoFirefox .mktoButton:active {
      position: relative;
      top: 2px;
      -webkit-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 0px rgba(0, 0, 0, 0.1);
    }
  </style>
  <div class="mktoFormRow">
    <div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
      <div class="mktoOffset" style="width: 10px;"></div>
      <div class="mktoFieldWrap mktoRequiredField"><label for="Email" id="LblEmail" class="mktoLabel mktoHasWidth" style="width: 100px;">
          <div class="mktoAsterix">*</div>Email Address:
        </label>
        <div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="Email" name="Email" maxlength="255" aria-labelledby="LblEmail InstructEmail" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired"
          aria-required="true" style="width: 150px;"><span id="InstructEmail" tabindex="-1" class="mktoInstruction"></span>
        <div class="mktoClear"></div>
      </div>
      <div class="mktoClear"></div>
    </div>
    <div class="mktoClear"></div>
  </div>
  <div class="mktoFormRow"><input type="hidden" name="utm_source__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="css-tricks" style="margin-bottom: 10px;">
    <div class="mktoClear"></div>
  </div>
  <div class="mktoButtonRow"><span class="mktoButtonWrap mktoFirefox" style="margin-left: 120px;"><button type="submit" class="mktoButton">Subscribe</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor"
    value="1402"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="113-DTN-266">
</form>

<form novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft" style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1600px;">
</form>

Text Content

Skip to main content
CSS-Tricks
* Articles
* Notes
* Links
* Guides
* Almanac
* Picks
* Shuffle

Search
font-face system fonts typography
Snippets → CSS → System Font Stack

SYSTEM FONT STACK

Geoff Graham on Oct 26, 2022

Defaulting to the system font of a particular operating system can boost
performance because the browser doesn’t have to download any font files, it’s
using one it already had. That’s true of any “web safe” font, though. The beauty
of “system” fonts is that it matches what the current OS uses, so they can be a
comfortable look.

What are those system fonts? At the time of this writing, it breaks down as
follows:

OSVersionSystem FontmacOSMontereySan Francisco Pro (variable)macOSEl CapitanSan
FranciscomacOSYosemiteHelvetica NeuemacOSMavericksLucida GrandeWindowsVistaSegoe
UIWindowsXPTahomaWindows3.1 to MEMicrosoft Sans SerifAndroidIce Cream Sandwich
(4.0)+RobotoAndroidCupcake (1.5) to Honeycomb (3.2.6)Droid SansUbuntuAll
versionsUbuntu

GET TO THE SNIPPET, ALREADY!

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 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif;
}

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 {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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:

:root {
--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.element {
font-family: var(--system-ui);
}

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

Jonathan Neal offers an alternative method where system fonts are declared using
@font-face.

/* 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 {
font-family: "system-ui";
}

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.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based
hosting and services.

COMMENTS

1. Matthew Graybosch
Permalink to comment# January 20, 2017

This makes a lot of sense and I plan to use this in my next website, but
these are all sans-serif fonts. I can’t help but wonder if it’s possible to
create similar stacks for system-default serif and monospace fonts. I might
want to use the serif fonts on headings or blockquotes for emphasis, and
apply monospace to the pre and code elements.

Reply
* Chris Coyier
Permalink to comment# January 20, 2017

Is there any OS that uses a serif for a system font?

* Matthew Graybosch
Permalink to comment# January 24, 2017

Chris Coyier asked:

> Is there any OS that uses a serif for a system font?

Chris, I could be wrong but I don’t think any OS or X11 desktop
environment uses serif fonts as system fonts. However, my original
comment could have been clearer. I was interested in using stacks of
serif and monospace fonts that draw upon fonts that come pre-installed
with various operating systems for use in bundled word processors like
WordPad and terminal emulators like Terminal.app.

For example, Windows comes with Times New Roman and Courier New. OS X
comes with Apple Garamond and Monaco. Prior to version 4.0, Android came
with Droid Serif and Droid Mono in addition to the Droid Sans UI font.

Based on preliminary research I came up with the following “system” serif
and monospace stacks. I’m pulling these out of my Sass variables partial.

$systemSerif: "Apple Garamond", "Baskerville", "Times New Roman", "Droid Serif", "Times","Source Serif Pro", serif;
$systemMonospace: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;

These are only preliminary; I’m nowhere near done testing.

* askgu.us
Permalink to comment# March 14, 2022

There is also one other thing to take into consideration when using
system-font stacking;

Some metrics like ‘ex’ are based on the loading of the first font! This
is important if you need your font to align with your grid.

Otherwise another font’s metrics are used, and you might be in for a
surprise!

2. 0xADADA
Permalink to comment# February 26, 2017

Where does that font name string come from: .SFNSText-Light? I dont see
that name anywhere in the font definition file. Just curious, cheers!

Reply
* AJ Kandy
Permalink to comment# July 4, 2017

I believe that’s the private (system) font name used by the OS. It
doesn’t show up in system or application font pickers, but it can be
manually specified.

* Brandito Designs
Permalink to comment# December 11, 2018

It’s San Francisco (New Sans?) by Apple and used as the System font on
macOS

3. Jakob E
Permalink to comment# March 6, 2017

Using local fonts will use as much network (none) as e.g. sans-serif – why
the second approach seems odd to me. If it’s about typing less I would use
a SCSS variable – like:

$system:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

body {
font-family: $system;
font-weight: 400;
}
.light {
font-weight: 300;
}

Please correct me if I’m wrong :-)

Reply
* cas
Permalink to comment# May 31, 2017

you’re right.

* Chris Langtiw
Permalink to comment# May 11, 2018

Using the @font-face method works without SCSS.

* Brandito Designs
Permalink to comment# December 11, 2018

Yes you do make a request to those fonts locally but you’re not faced
with latency this way.

4. Josh Sadler
Permalink to comment# April 12, 2017

It’s worth noting that system-ui works in place of BlinkMacSystemFont in
newer versions of Chrome.

5. rok
Permalink to comment# May 30, 2017

how about iOS?
Will it support any of these syntaxes?
Will it render using which font?

Reply
* Geoff Graham
Permalink to comment# May 30, 2017

iOS uses San Francisco as the system font, just like OS X El Capitan.
Does it render any differently for you on Mobile Safari than it does on
desktop?

6. Andrew Borstein
Permalink to comment# June 1, 2017

Booking.com wrote about their experience implementing system font stack,
and warned against placing -apple-system first if you use font instead of
font-family.

body {
font: 16px/1.2 BlinkMacSystemFont, -apple-system, “Segoe UI”, Roboto,
Helvetica, Arial, sans-serif;
}

vs.

body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto,
Helvetica, Arial, sans-serif;
}

Maybe there could be an asterisk in here about that. Otherwise, very cool
stuff!

Reply
* Geoff Graham
Permalink to comment# June 1, 2017

Absolutely, good call! In fact, we published a link to the Booking.com
post in another post and should have indicated it here as well. Consider
this post updated!

7. Ben Read
Permalink to comment# June 13, 2017

Please excuse my ignorance, but what benefit is this over using serif or
sans-serif?

Reply
* Chris Coyier
Permalink to comment# June 13, 2017

Those don’t match the system font. For example, on my Mac, if I used
sans-serif I’d get Helvetica, while the system font is San Francisco.

* Chris Tillam
Permalink to comment# July 21, 2017

Hi Ben, take a look at my comment below, and the link.

* Ben Read
Permalink to comment# August 1, 2017

Thanks both, hadn’t realised that … will give it a try!

8. j.j.
Permalink to comment# June 24, 2017

“-apple-system” and “BlinkMacSystemFont” are replaced by the new standard
“system-ui” generic font family.
“system-ui” is also supported by Firefox.

See
https://www.chromestatus.com/feature/5640395337760768

Reply
* bryc
Permalink to comment# December 27, 2017

system-ui is not supported in Firefox 57.0.2 (64-bit) on Win7, but I
can’t say for Win10

9. AJ Kandy
Permalink to comment# July 4, 2017

Is there a similar stack for system monospace fonts? Fairly simple to get
the correct font name for most non-Apple platforms, but it’d be nice to
access SF Mono through a flag like -apple-system-monospace. So far there
doesn’t seem to be any documentation about this.

10. David
Permalink to comment# July 21, 2017

Does this mean that if you don’t use the font-face stack as per Jonathan
Neal’s approach, you’ll have to rely on your browser to “faux” bold and
italic things?

11. Chris Tillam
Permalink to comment# July 21, 2017

I started from scratch again recently, made an html page, and then realised
how many fonts I’d need to upload for this page to be generally available…
so I made a pdf. Maybe it’ll be useful to amateurs like me.

It’s a series of typefaces (sans, serif, humanist, mono) each with a few
lines of identical sample text, arranged by increasing size. Take your
pick: a site I’m working on has a column width of 540px, so that’s the line
width used.

Scale it to 900% (don’t ask!) for an accurate rendition of the html on my
1920 x 1200 mac screen.

Even if the scaling isn’t reproducible, the relative sizes and strengths of
the fonts can be gauged.

wavehands.net/some text examples.pdf

Cheers.

12. riophae
Permalink to comment# July 31, 2017

Seems IE11 can not recognize -apple-system in font-family. IE11 considers
that as an invalid value.

13. Andrew
Permalink to comment# November 7, 2017

Ugh. I am so burned out with Roboto.

14. Jens Oliver Meiert
Permalink to comment# November 21, 2017

A note, GitHub—and they’re still doing this—somehow got the order wrong.
They’re using the generic sans-serif family in the middle of the stack
which should make what follows pointless.

Reply
* Alex Bates
Permalink to comment# December 9, 2017

Notice that what comes after sans-serif are emoji/symbol fonts – if the
browser cannot display a character under sans serif, it’ll carry on to
try these symbol fonts. Good for emoji.

15. Gerhard Großmann
Permalink to comment# April 16, 2018

Do you really want the system font? I’m pretty sure most people actually
just like to have a clean sans serif font like Segoe or SanFranciso. Or
should your Chinese users really get a pixelated font? Should your Ubuntu
users read the little quirky Ubuntu font? No? But that’s exactly their
system font.

Maybe it’s better to choose a specific sans-serif, e.g. Open Sans, Source
Sans Pro or Monserrat, that fits your tone and embed it as a webfont. If
you can’t or don’t want to do this, then you may use this System Font Stack
but better leave system-ui and other unwanted options out.

Also watch out for errors you get by using different fonts on different
platforms. I collected some in my blog article – so better test
extensively.

16. Santiago
Permalink to comment# May 4, 2018

Which are the fonts for Windows 7, 8 and 10?

17. bendem
Permalink to comment# July 11, 2018

Am I the only one wondering why the recommended default fonts are even
needed?

:root {
font-family: sans-serif;
}

18. Yash Ghelani
Permalink to comment# August 27, 2018

This is a great post! I think it would be really helpful to add the system
font stack for monospace fonts as well.

19. davidspectornsrusa
Permalink to comment# November 23, 2018

I found the Chris Coyier comment from June 13, 2017 fascinating. So, for
loading speed and consistency (user comfort), ‘serif’ or ‘sans serif’ are
currently not good enough. It seems to me that this calls for an additional
standard. Then if a particular OS or browser fails to display the proper
font, it will simply be fixed in the next standards-compliant version. This
would follow the same simplifying evolutionary path as we see happening at
the tops of HTML5 Web pages and in character encoding.

20. Brandito Designs
Permalink to comment# December 12, 2018

The @font-face rule at the bottom of the post renders Tahoma for myself on
Google Chrome 71 Windows 10

21. Michael
Permalink to comment# August 19, 2019

But what is the point of a system font stack, why not just use “font:
sans-serif” and be done with it? Or upload a single sans-serif font to your
webspace and use that if you want to maintain continuity or brand image.

Reply
* Chris Coyier
Permalink to comment# August 19, 2019

There are some clear points:

* Match the font that the system users, so it feels extra native to the
user of that platform
* Download nothing
* Take advantage of fonts that are generally nicer than the Arial or
whatever you get sans-serif (like San Francisco and Roboto)

22. Yuming
Permalink to comment# September 17, 2019

In iOS 13, the system font stack setting would display Times New Roman.

23. Tilman
Permalink to comment# November 6, 2019

To me it looks like the macos system font renders too tightly in Chrome,
especially in smaller sizes. The characters are too close to each other. Is
it just me?

24. Stuart
Permalink to comment# January 7, 2020

One thing I’m confused about is that Apple publishes the San Francisco
fonts for download on their website. In my design tool (Sketch app) I use
SF Pro Text, but this font doesn’t seem to match -apple-system,
BlinkMacSystemFont. They look different on macOS (I’ve tried both Chrome
and Safari).

I hate to install SF Pro Text on my website if I don’t need to, but it
really bugs me that they don’t match. I want the version that you can see
on http://www.apple.com

Is there something I’m missing?

Reply
* Geoff Graham
Permalink to comment# January 8, 2020

That’s confused me, too! My thought is that SF Pro is different than SF
Display, which is different from SF UI… the latter of which is the system
font. At least, that’s my un-researched best guess.

* Stuart
Permalink to comment# January 8, 2020

Looks like “SF Pro Display is used for font size 20 pts or above whereas
SF Pro Text is used for font size 19 pts and below. ” The system font
dynamically switches between the two when the font size changes.

However, I’m seeing something very strange that the SF Pro Text that I
downloaded from Apple looks like the SF Pro Display that I see in the
browser and the SF Pro Display that I downloaded looks like the SF Pro
Text that I see in the browser. It’s like they’re swapped. I can tell by
the space between the letters. This is very odd.

* Marc
Permalink to comment# February 20, 2020

Hi Stuart,

I just discovered this too on my site in Chrome and Safari on a Mac.

Did you find a solution, so that it actually shows the San Francisco Font
?

25. Altiano Ruly Gerung
Permalink to comment# April 24, 2020

How about monospace version?

Reply
* Posandu Mapa
Permalink to comment# September 24, 2021

Simple

font-family:monospace;

26. Ahmad
Permalink to comment# November 19, 2021

What is the scenario if some characters are not available in the first
font, but available in the second?

Would the text be mixed from both fonts?

Reply
* Chris Coyier
Permalink to comment# November 19, 2021

> Would the text be mixed from both fonts?

Yep.

27. Robin Than
Permalink to comment# November 28, 2021

Thanks! I have one issue.

Your article does not tell how I should use Segoe UI variable font in CSS
in the system stack. You might know Microsoft introduced that font with
Windows 11 but I don’t know how I can use that in the system stack to make
my website look great on Windows 11 devices. Please guide.

28. Yves
Permalink to comment# April 16, 2022

No need to repeat them all everywhere or use @font-face. Just use CSS
custom properties (“CSS variables”):

--system-fonts: system-ui, "and all others";

Then use that collection everywhere:

font-family: CustomFont, var(--system-fonts);

29. Tommy
Permalink to comment# June 18, 2022

A bit caveat before you switch to system-ui:

https://infinnie.github.io/blog/2017/systemui.html

Reply
* Night
Permalink to comment# September 26, 2022

This is an non-issue. That is the intended default behaviour in Chinese
and should not be considered as a point anymore. See
https://github.com/JLHwung/postcss-font-family-system-ui/issues/210#issuecomment-531519416
and https://github.com/primer/css/issues/1589#issuecomment-919985344 .

30. Yinon Oved
Permalink to comment# August 21, 2022

method 2 won’t support font-size-adjust. correct?

31. Kal
Permalink to comment# August 23, 2022

Does the article need to be updated to say that method 2 simply doesn’t
work anymore? On macOS 12.5, for the given example I get Ubuntu Light in
Firefox and Chrome, and Tahoma in Safari (because of Safari’s
anti-fingerprinting ban on user-installed fonts). In other words, none of
those system font names (starting with a dot) are being recognised at all.

Now, there’s really no need for method 2 if you just want to target the
native system font, as system-ui handles that nicely these days. But if you
want to specifically target the SF system fonts on Apple devices while
falling back to something else on other systems, it looks like you’re still
stuck with -apple-system, BlinkMacSystemFont, "Something Else". It’s a
shame Chrome still refuses to recognise -apple-system.

Reply
* Geoff Graham
Permalink to comment# August 23, 2022

Excellent notes, thanks!

32. Alvaro
Permalink to comment# October 30, 2022

Great post! Kudos

css-tricks.com Open in urlscan Pro 2606:4700:4400::ac40:94eb Public Scan

Form analysis 3 forms found in the DOM

POST

Text Content

css-tricks.com Open in urlscan Pro
2606:4700:4400::ac40:94eb Public Scan

Form analysis
3 forms found in the DOM