# Use the System Font Stack

> Switches the site's text to the fonts already installed on each visitor's device (San Francisco, Segoe UI, Roboto), which look native and load instantly.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: fonts, typography, performance, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-system-font-stack/

## Code

```css
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
```

## Notes

Code blocks keep a monospace font. Remove "h1-h6" from the selector to keep your theme's heading font.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Use the System Font Stack" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/