2016-06-18 16:19:06 +00:00
---
2017-08-29 16:38:47 +00:00
title: "CSS system fonts"
2016-06-18 16:19:06 +00:00
category: CSS
2017-08-29 16:38:47 +00:00
weight: -3
2017-10-29 16:18:27 +00:00
tags: [Featurable]
2016-06-18 16:19:06 +00:00
---
2017-08-29 15:57:21 +00:00
### System fonts
2016-10-19 14:28:57 +00:00
```css
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
```
2016-06-29 09:50:06 +00:00
2017-08-29 15:57:21 +00:00
This uses whatever system font is available. See: [System shock - Designing Medium ](https://medium.design/system-shock-6b1dc6d6596f?gi=90078e194544 ) _(medium.com)_
### Explanation
2016-06-29 09:55:47 +00:00
| 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 |
2017-10-22 11:08:21 +00:00
| `Cantarell` | Linux, GNOME |
2016-06-29 09:55:47 +00:00
| `Fira Sans` | Firefox OS |
| `Droid Sans` | Android (until 3.2) |
| `Helvetica Neue` | OS X (10.9) |
