CSS system fonts

### System fonts

```css
font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
```

This uses whatever system font is available. See: [System shock - Designing Medium](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544) _(medium.com)_

### Explanation

| Font                 | OS                      |
| ----                 | --                      |
| `-apple-system`      | OS X (10.11+), iOS (9+) |
| `BlinkMacSystemFont` | OS X, Chrome            |
| `Segoe UI`           | Windows                 |
| `Roboto`             | Android 4.0+            |
| `Oxygen`             | Linux, KDE              |
| `Ubuntu`             | Linux, Ubuntu           |
| `Cantarell`          | Linux, GNOME            |
| `Fira Sans`          | Firefox OS              |
| `Droid Sans`         | Android (until 3.2)     |
| `Helvetica Neue`     | OS X (10.9)             |


Font	OS
`-apple-system`	OS X (10.11+), iOS (9+)
`BlinkMacSystemFont`	OS X, Chrome
`Segoe UI`	Windows
`Roboto`	Android 4.0+
`Oxygen`	Linux, KDE
`Ubuntu`	Linux, Ubuntu
`Cantarell`	Linux, GNOME
`Fira Sans`	Firefox OS
`Droid Sans`	Android (until 3.2)
`Helvetica Neue`	OS X (10.9)

CSS system fonts Cheat Sheet in April 2024

Last Updated: 7 April 2024

README.md

System fonts

Explanation

338+ more cheat sheets for you in April 2024

101

Absinthe

Activeadmin

Adb

Analytics

Angularjs

Animated gif

Ansi

Ansible examples

Ansible guide

Ansible modules

Ansible roles

Ansible

Appcache

Applescript

Applinks

Arel

Atom

Awesome redux

Awscli

Backbone

Bash

Blessed

Bluebird

Bolt

Bookshelf

Bootstrap

Browser sync

Browserify

Bulma

Bundler

C preprocessor

Camp

Canvas

Capybara

Cask index

Subscribe to our Newsletter

Company

Follow Us

Subscribe to our Newsletter