ui-monospace: What It Actually Is (And Why You Can't Download It)

Key takeaways >- ui-monospace is a CSS keyword, not a font. There is no file to download, no licence to buy, and no @font-face rule to write. It tells the browser "use whatever this operating system uses for code."- It has 15.99% global browser support (Can I use, retrieved 1 September 2026). Safari 13.1+ and iOS Safari 13.4+ implement it. Chrome, Firefox and Edge do not.- That sounds fatal and is not. Browsers ignore generic family keywords they do not recognise, so ui-monospace first in a stack costs nothing and upgrades Safari users to SF Mono.- On Windows there is no real default monospace beyond Courier New, so the fallback you write after ui-monospace is the font most of your users will actually see. That part of the stack is doing the work.

If you searched ui-monospace font download, this page exists for you. The short answer is that there is nothing to download, and that is by design rather than an oversight.

Is ui-monospace a font?

No. ui-monospace is a generic font family — the same category of thing as serif, sans-serif, and monospace. MDN defines it in one line: "The default user interface monospace font." It is a pointer, not a typeface.

Generic families name a role and let the platform resolve it to a real font. When you write font-family: serif, you are not shipping Times New Roman; you are asking for whatever the reader's system considers a serif. ui-monospace does the same thing for the monospaced font the operating system uses in its own interface — the one you see in the terminal and in system code views.

It belongs to a group of four added alongside it:

On macOS and iOS, ui-monospace is the only way to reach SF Mono from CSS. Apple does not distribute SF Mono as a webfont, and its licence does not permit you to self-host it. The keyword is the door.

Which browsers support ui-monospace?

This is the fact that decides everything, and it is missing from most pages that mention the keyword. Support is 15.99% globally (Can I use, retrieved 1 September 2026):

Both Chromium and Firefox have open bug reports tracking the feature. Neither has shipped it.

So ui-monospace is, in practice, a Safari feature. If you are testing on a Mac in Safari and it looks right, you are seeing SF Mono. Open the same page in Chrome on the same machine and you are seeing whatever comes next in your stack.

Then why do people put it first?

Because an unrecognised generic family is skipped, not fatal.

A browser walks a font-family list left to right and uses the first entry it can resolve. Chrome does not know what ui-monospace means, so it moves on. It does not error, and it does not fall back to the default. That makes the keyword a free upgrade: Safari users get the native system mono, everyone else continues down the list as if it were not there.

This is why Tailwind CSS ships it at the front of its default font-mono stack:

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             'Liberation Mono', 'Courier New', monospace;

Read that stack as three groups. ui-monospace and SFMono-Regular catch Apple platforms. Menlo and Monaco are older macOS defaults. Consolas, 'Liberation Mono' and 'Courier New' cover Windows and Linux, and the bare monospace at the end is the guaranteed floor.

What Windows users actually see

Here is the part worth planning for. Windows has no default monospace font beyond Courier New. Cascadia Code and Segoe UI Mono both exist and both look considerably better, but neither is guaranteed to be installed, so neither is a safe bet in a stack.

The practical consequence: on Windows, most readers land on Consolas if it is present and Courier New if it is not. Courier New is thin, small on the body, and noticeably lighter than the surrounding text. If your code blocks look weak on Windows and fine on your Mac, this is why — and no amount of reordering the Apple end of the stack changes it.

If cross-platform consistency matters more than native feel, ui-monospace is the wrong tool. Self-host one webfont and let every platform render the same thing.

ui-monospace vs a self-hosted webfont

The honest rule: use the system stack for interface monospace — table figures, timestamps, IDs, input fields, short inline code — where a few pixels of difference between platforms costs nothing. Use a self-hosted webfont when the monospace text is the content, such as a documentation site or a code tutorial, where ligatures and consistent line length actually matter.

For choosing that webfont, our monospace font roundup covers the free options, and font licensing covers what you are allowed to self-host.

A stack you can paste

:root {
  --font-mono:
    ui-monospace,           /* Safari on macOS + iOS -> SF Mono */
    SFMono-Regular,         /* older Safari */
    Menlo, Monaco,          /* legacy macOS */
    'Cascadia Mono',        /* Windows, if installed */
    Consolas,               /* Windows, usually present */
    'Liberation Mono',      /* Linux */
    'Courier New',          /* last real font */
    monospace;              /* guaranteed floor */
}
 
code, pre, kbd, samp {
  font-family: var(--font-mono);
}

Two notes on using it. Quote any family name containing a space, as with 'Cascadia Mono'. And always end on the bare monospace keyword — it is the only entry in the list that cannot fail.

Frequently asked questions

Can I download the ui-monospace font? No. ui-monospace is a CSS generic family keyword, not a font file. It resolves to a font already installed on the reader's operating system — SF Mono on Apple platforms. There is nothing to download, host, or license.

Why does ui-monospace not work in Chrome? Chrome has not implemented it. Support sits at 15.99% globally and is limited to Safari 13.1+ and iOS Safari 13.4+. A Chromium bug tracks the request. Chrome skips the keyword and uses the next font in your stack.

Is ui-monospace the same as SF Mono? Not quite. On macOS and iOS it resolves to SF Mono, and it is the only CSS-reachable way to get that typeface, since Apple does not license it for self-hosting. On any other platform it resolves to that system's UI monospace font, or to nothing at all where it is unsupported.

Should I still use it if only Safari supports it? Yes. Unsupported browsers skip a generic family they do not recognise, so it costs nothing and adds nothing to your page weight. Put it first and write a real fallback chain behind it.

What is the difference between ui-monospace and monospace? monospace is the reader's browser default monospace font, which users can change in browser settings and which is often Courier New. ui-monospace is the operating system's interface monospace font, which is generally the better looking of the two. Use ui-monospace first and monospace as the final fallback.

What we ship

We measured the typefaces actually used across 33 production Framer templates and published the dataset — template font usage. Monospace appears far less often than design-Twitter would suggest: it shows up in interface details and code samples, almost never in body copy. That matches the advice above. A system stack is enough for the job monospace usually does on a marketing site.

Sources

• MDN Web Docs — font-family, generic family definitions. Retrieved 1 September 2026.
• Can I use — ui-serif, ui-sans-serif, ui-monospace, ui-rounded, 15.99% global support. Retrieved 1 September 2026.
• Tailwind CSS — Font Family, default font-mono stack. Retrieved 1 September 2026.