---
url: https://developer.youcan.shop/themes/fonts.md
---
# Fonts

Your theme chooses its own fonts. The platform adds one family on top: `yc-sans`.

## What `yc-sans` is

`yc-sans` holds the glyphs that system fonts do not have yet. Today it holds one
glyph: the Saudi riyal sign, `U+20C1` (⃁). The Unicode Consortium added this sign
in Unicode 17.0 in September 2025, so older devices have no glyph for it and show
an empty box instead of the currency symbol.

The platform declares the `@font-face` in the head of every page. You do not have
to load a file or add markup. You only name the family in your font stack.

## How to use it

Name `yc-sans` **last** in your font stack:

```css
:root {
  --font-family: 'Inter', sans-serif, 'yc-sans';
}
```

The stack must **start with a named font**, not with a generic keyword. A stack
that starts with `system-ui` or `ui-sans-serif` stops at the system font and never
reaches `yc-sans`:

```css
/* works */
font-family: 'Cairo', sans-serif, 'yc-sans';

/* does not work: the stack starts with a generic keyword */
font-family: system-ui, sans-serif, 'yc-sans';
font-family: ui-sans-serif, 'yc-sans';
```

The named font must also load. A browser stops at the generic keyword when no font
before it resolves, so a stack that names a font you never load behaves like a
stack that starts with a generic.

If your theme uses Tailwind, set a named font first in your `sans` stack.

## What it does to your design

Nothing, apart from the riyal sign. Each `yc-sans` face sets a `unicode-range`,
so the browser can only use it for the glyphs in that range. Every other character
still comes from your own fonts. The browser downloads the file (about 1.3 KB)
only when a page paints one of those glyphs.

A device whose system fonts already have the glyph draws it in the surrounding
font and never uses `yc-sans`. So `yc-sans` changes what old devices show, and
changes nothing on current ones.

## If you do not add it

Prices still render. On a current device the system font draws the riyal sign. On
an older device the customer sees an empty box where the currency symbol belongs.