# It's time to ditch BlinkMacSystemFont and -apple-system
> TL;DR: Delete `BlinkMacSystemFont` and `-apple-system` from all your CSS, replace with `system-ui`
When you peek under the hood of a popular site, say GitHub.com, you can probably see a `font-family` declaration like:
font-family: -apple-system, BlinkMacSystemFont, ...[snip]... sans-serif,
Here's a peek into the aforementioned GitHub's source:
## `-apple-system`?
What is this funny looking font? Prefixed with a `-` even?
From what I can tell at some point (MacOS El Capitan) Apple introduced a lovely font called San Francisco and thought iOS and MacOS UIs should have a consistent modern look. And feel. And font. And so `-apple-system` was born. Kinda like: dear developer, you don't need to know the exact actual font, just call `-apple-system` and we'll take care. We may change San Francisco in the future, but don't you worry your pretty head, the generic `-apple-system` will always work.
And so `-apple-system` is not a specific font but acts as a generic family for CSS purposes, just like e.g. `serif`, `monospace` and `sans-serif`. It's not a W3C standard generic family keyword, of course. Who has time to go through a standards body? That's why probably the awkward `-` prefix, just like a non-standard CSS property or value.
El Capitan is ancient history BTW, it was released 2015. This is Safari 9 we're talking. Your site probably doesn't work very well on it. My site (the one you're reading) for example raises an invalid certificate warning in El Capitan (at least in the [browserstack](https://browserstack.com)'s setup). That's how old.
Anyway, moving on.
## `BlinkMacSystemFont`?
At some point (v55) looks like Chrome jumped on the idea. But hey, they can't put an brand name like Apple (`-apple-system`) in their offering. Hence `BlinkMacSystemFont`. *Blink* as in the Chrome's rendering engine, *Mac* as in Macintosh, *System* as in `-apple-system` and *Font* for good measure.
Chrome 55 is old too, released 2016. Your site maybe doesn't work all that great in it.
## `system-ui`
Eventually some sort of reason came into the picture. Maybe an adult entered the room, I don't know. But a W3C-proper generic family name `system-ui` came into being to replace both of `BlinkMacSystemFont` and `-apple-system`. From my testing `system-ui` shows up since Safari 11 in High Siera OS. And in Chrome 56.
That's still ancient history. Both browsers were released in 2017. Remember when you tested your site in Safari 11? I don't either.
Firefox also joined the `-apple-system` madness until version 92 added `system-ui` too.
## Current state
[Here's a test page](https://highperformancewebfonts.com/tests/blonk/blink.html) I loaded in a bunch of browsers.
Today's FF and Safari still support `-apple-system` in addition to `system-ui`. Both of these generic font families render the same `.SF NS` font. They are aliases of each other.
Today's Chrome still supports `BlinkMacSystemFont` in addition to `system-ui`. Both render the same `.SF NS` font.
### What about Windows?
No Windows users were hurt in this whole Apple-specific debacle. On Windows none of `BlinkMacSystemFont` or `-apple-system` ever worked. But `system-ui` works and renders Segoe UI. Ladies and gentlemen, here's my test page rendered in Edge:
## So what's a dev to do?
(If you skimmed the content so far, let me summarize: `system-ui` was added looong time ago to replace both `BlinkMacSystemFont` and `-apple-system`. You don't need these two anymore.)
So.
1. Search all your CSS for occurrences of `BlinkMacSystemFont` and replace with `system-ui` (if not already there).
1. Rinse, repeat the same with `-apple-system`: search all your CSS for occurrences of `-apple-system` and replace with `system-ui` (if not already there).
Results! Cleaner, leaner CSS, no outdated remnants of Web history and no more confusion.
If you're not into fonts and just want a nice sans-serif font, use:
font-family: system-ui, sans-serif;
... and move on with your life. This will make you page work in Chrome 1 and even earlier.
### Bonus random observations
At some point SF (as in the *.SF NS* family name) was standing for *San Francisco*. Now it appears to stand for *System Font*. No biggie.
`.SF NS` is a real font (you can actually locate the file `SFNS.ttf` on your Mac computer) but for some strange reason it cannot be used with `local()`. It's not a valid family name either (`font-family: .SF NS` doesn't work). It's a font that is there but not addressable by name. I hope Apple fixes this and let us use it with `local()` as a nice fallback font for web fonts.
In El Capitan the system font behind the scenes was actually named `.SF NS Text`. Since Catalina it's `.SF NS` (no "Text"). Whoop-de-doo.
Chrome 55 that introduced `BlinkMacSystemFont` also works on Mac OS versions *before* El Capitan, so before the whole system font debacle. What's a browser to use as a "system" font before the "system" fonts were introduced? Just pick another nice sans-serif. In Yosemite that happen to be a font called `.Helvetica Neue DeskInterface` (what's with them `.` dots, may I ask?)
Other generic family names are introduced later, such as `ui-monospace` and `ui-rounded`. That's nice, but the "ui" part turned into a prefix rather than a suffix. So we're "forever" cursed to double-guess ourselves... was it `system-ui` or was it `ui-system`. Welp.
An [article](https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f) by booking.com reveals a funny thing where some IE (remember IE!?) and Edge versions see the `-` in `-apple-system` and decide the whole thing that follows is a non-standard value they can safely ignore. Times New Roman here we come!
### Note
The history bits in this post are my deduction of what happened based on testing. If I got something wrong, please correct me