/* ---------------------------------------------------------------------------
fonts — the opt-in webfont sidecar
---------------------------------------------------------------------------
NOT imported by src/index.css, and that is the point. The shipped package is
still a tag and nothing else: system stacks, zero network, zero FOUT,
zero third parties. This file is the second link a consumer adds when they
need the page to look the same on every machine:
Link order does not matter. The hook is a custom property read at each use
site, not a rule that has to win a cascade.
What it does
------------
Two things, and nothing else:
1. Declares the @font-face faces, under five family names of our own.
2. Sets one --webfont-* hook per typeface, each to one family name and a
trailing comma.
tokens.css builds every typeface as `var(--webfont-inter, ) var(--stack-sans)`,
so setting the hook prepends the face and leaves the system stack behind it as
the fallback. Unset — the default, because this file is not imported — the
hook substitutes to nothing and the typeface IS its fallback stack. That is
why this file needs no copy of the stacks, and a second copy of a stack is a
copy that drifts.
The five typefaces here are the five [data-font] presets in tokens.css. They
are named after the faces, not after roles, because three of them are sans and
a role name cannot tell those three apart.
The layer
---------
The five hook declarations sit in @layer tokens, the same layer tokens.css
uses, so they carry the same weight as the rest of the system and a
consumer's unlayered CSS still beats them. @font-face is not layered — it is
not a style rule and has no cascade position — so those sit outside.
THE COST, STATED PLAINLY
------------------------
ponytail: the faces load from jsDelivr, so linking this file makes the page
depend on a third party at runtime and discloses every viewer's IP address to
that CDN. Nothing else in @arag has a runtime dependency, and the shipped
path still has none — but a consumer who links this file has taken one on,
and in a jurisdiction with consent rules that is a decision for someone other
than the person writing the link tag.
The upgrade path is deliberately short. Download the files below into
src/fonts/ (their names are already in the URLs), rewrite each `src:` to
`url("./fonts/.woff2")`, and nothing else in this file or anywhere else
in the package changes — the family names, the unicode-ranges, the hooks and
every consumer's markup all stay exactly as they are. Ship the OFL text
beside them.
Every URL is pinned to an exact version. An unpinned CDN URL is a third party
with write access to your typography.
THE OTHER COST: Plex Mono is static
-----------------------------------
ponytail: every face here is a variable font except IBM Plex Mono, which has
no variable cut upstream — not on Google Fonts, and there is no
@fontsource-variable/ibm-plex-mono package to point at. It is therefore
declared as four static weights (400/500/600/700, the four --weight-* tokens)
across four subsets: sixteen @font-face blocks, against eight each for Inter,
Literata and Plex Sans (four subsets, roman and italic) and four for
Geologica, which has no italic cut upstream.
What that actually costs at runtime is small, and worth stating so nobody
"fixes" it in a panic: a page only fetches the weights it renders, so a Latin
page with code at one weight fetches one file either way. The cost is a second
file when a page renders mono at two weights, and sixteen blocks of source
here. The upgrade path is one line per block: if a variable Plex Mono is ever
published, collapse the sixteen to four with `font-weight: 100 700`.
Why these five
--------------
Inter for UI and body, Geologica for a technical display voice, Literata for
long-form reading, IBM Plex Sans for a humanist third voice, IBM Plex Mono for
the mono role. All five are SIL Open Font License 1.1, and all five have
verified Cyrillic AND Cyrillic Extended coverage — which is the only
non-negotiable, because Latin and Cyrillic pages need both (see below).
Say the tradeoff out loud, because it replaced a real advantage. This set is
five faces from four foundries, where the previous set was one Noto
superfamily. A superfamily guarantees that the three presets cannot disagree
about how Cyrillic looks; four foundries do not. Plex Sans and Plex Mono
share a design, and the other three do not share it or each other's. Check a
Cyrillic paragraph in each preset before shipping a page that switches between
them — the Latin pairs cleanly, and that is not evidence about the Cyrillic.
The subsets, and why cyrillic-ext is the one that matters here
-------------------------------------------------------------
Each family is split by unicode-range, so a page only fetches the ranges it
actually renders: an all-Latin page never downloads the Cyrillic files, and a
Cyrillic page never downloads Greek.
Read the ranges before deleting any of them. `cyrillic` is U+0400-045F plus
four strays — it does NOT contain U+04E9 or U+04AF. Both live in
`cyrillic-ext` (U+0460-052F). Drop the cyrillic-ext blocks as "the extended
one, probably not needed" and every affected page falls back to the system
face for exactly those characters, mid-word, which is the precise defect
this package's font stacks were ordered to avoid.
The four ranges below are byte-identical across all five families, because
they are Google's subset definitions and not any one font's idea. That is why
they can be repeated here without being a source of drift: upstream owns them.
greek, greek-ext, vietnamese, math and symbols are available upstream and are
deliberately not declared. Nothing this system ships is written in them, and
each one is a block that would never match.
Variable fonts, weight axis only
--------------------------------
The `-wght-` files are the weight-axis-only cut; upstream also publishes
`-standard-`, `-opsz-`, `-wdth-`, `-slnt-`, `-crsv-`, `-shrp-` and `-full-`
variants, which are larger and buy nothing here.
Each `font-weight` range below is the face's REAL axis, not a copy-pasted
`100 900`. They differ, and declaring a range the file does not have is how a
weight silently snaps to the wrong end:
Inter 100 900
Geologica 100 900
Literata 200 900 axis starts at 200
IBM Plex Sans 100 700 axis stops at 700
IBM Plex Mono static 400 / 500 / 600 / 700
Every --weight-* token (400 regular, 500 medium, 600 semibold, 700 bold) is
inside all five, so nothing in the system clamps. A consumer asking for 900 on
Plex Sans gets 700, which is the correct and only possible answer.
Geologica and Plex Mono are declared roman-only: Geologica has no italic cut
upstream, and a mono role has no use for one. A synthesised oblique on a
monospace face is worse than none.
font-display: swap, deliberately. `block` hides text for up to three seconds
and `optional` means a page can silently never get the face it
asked for. swap accepts a flash and always renders text, which is the right
trade for reading material — and the fallback it flashes is the system stack
this package was already designed around, not a placeholder.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Arag Inter — Inter Variable 5.3.0, weight axis 100-900.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-latin-ext-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-cyrillic-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* U+04E9 and U+04AF are in HERE, not in the cyrillic block above. */
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-cyrillic-ext-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-latin-wght-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-latin-ext-wght-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-cyrillic-wght-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Inter";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5.3.0/files/inter-cyrillic-ext-wght-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ---------------------------------------------------------------------------
Arag Geologica — Geologica Variable 5.3.0, weight axis 100-900. Roman only;
upstream publishes no italic cut, and the slnt axis is not a substitute.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Arag Geologica";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/files/geologica-latin-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Geologica";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/files/geologica-latin-ext-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Geologica";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/files/geologica-cyrillic-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Geologica";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/geologica@5.3.0/files/geologica-cyrillic-ext-wght-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ---------------------------------------------------------------------------
Arag Literata — Literata Variable 5.3.0. The weight axis starts at 200, not
100, and is declared honestly as 200 900 — every --weight-* token is inside it.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-latin-wght-normal.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-latin-ext-wght-normal.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-cyrillic-wght-normal.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-cyrillic-ext-wght-normal.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-latin-wght-italic.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-latin-ext-wght-italic.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-cyrillic-wght-italic.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Literata";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/literata@5.3.0/files/literata-cyrillic-ext-wght-italic.woff2") format("woff2");
font-weight: 200 900;
font-style: italic;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ---------------------------------------------------------------------------
Arag Plex — IBM Plex Sans Variable 5.3.0. The weight axis tops out at 700,
not 900, and is declared as 100 700 — --weight-bold (700) is its ceiling.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-cyrillic-wght-normal.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-cyrillic-ext-wght-normal.woff2") format("woff2");
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-latin-wght-italic.woff2") format("woff2");
font-weight: 100 700;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-latin-ext-wght-italic.woff2") format("woff2");
font-weight: 100 700;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-cyrillic-wght-italic.woff2") format("woff2");
font-weight: 100 700;
font-style: italic;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex";
src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/ibm-plex-sans@5.3.0/files/ibm-plex-sans-cyrillic-ext-wght-italic.woff2") format("woff2");
font-weight: 100 700;
font-style: italic;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ---------------------------------------------------------------------------
Arag Plex Mono — IBM Plex Mono 5.3.0. STATIC, four weights: there is no
variable cut of Plex Mono upstream. See THE OTHER COST in the header.
Roman only, matching the shape a mono role wants.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-ext-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-ext-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-ext-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-latin-ext-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Arag Plex Mono";
src: url("https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/files/ibm-plex-mono-cyrillic-ext-700-normal.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@layer tokens {
/* The trailing comma belongs to the value. See the --family-* block in
tokens.css for why that is legal and why it is the whole mechanism.
To take only some of the five faces, delete the other lines. Deleting a
hook is safe — what is left behind it is the system stack, unchanged — and
the @font-face blocks it orphans cost nothing, because a face nothing
references is never fetched.
Deleting --webfont-inter does NOT leave the page without a body face: it
leaves it on --stack-sans, which is what the whole package is designed
around. That is the difference between this file being optional and it
being a dependency. */
:root {
--webfont-inter: "Arag Inter",;
--webfont-geologica: "Arag Geologica",;
--webfont-literata: "Arag Literata",;
--webfont-plex: "Arag Plex",;
--webfont-plex-mono: "Arag Plex Mono",;
}
}