---
title: "CSS system fonts"
category: CSS
weight: -3
tags: [Featurable]
---

### 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)             |