/* COPY of identity/system/fonts.css, made by site/tools/build-assets.mjs. One change: the font URLs point to ../fonts/ (this file sits in assets/css/). Do not edit: change the identity and run the build. */
/* ==========================================================================
Cyber City ยท self-hosted fonts v1
GENERATED by tools/build-fonts.py: change the script and rebuild, do not edit this file by hand.
Three variable fonts, SIL Open Font License 1.1 (fonts/licenses/). No request leaves the site.
Archivo headlines and text 43.5 KB wght 400 to 800, wdth 100 to 112
Martian Mono labels and data 19.8 KB wght 400 to 600, wdth 87.5 to 100
Doto readouts 4.6 KB wght 400 to 900
total 67.9 KB
Doto's ROND axis is pinned at 0: square pixels. The axis is not in the built file, so
`font-variation-settings: "ROND" ...` changes nothing. The shape is one constant, DOTO_ROND in
tools/build-fonts.py (0 = square, 100 = round), and a rebuild.
Preload in , before the stylesheets. Only the text face and the label face; Doto is small and
only draws readouts, so it loads when the first readout is laid out. `crossorigin` is required even
on the same origin, or the browser downloads the file twice. Paths are relative to this file:
========================================================================== */
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-latin-v1.woff2") format("woff2");
font-weight: 400 800;
font-stretch: 100% 112%;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201D, U+2022, U+2026, U+2122, U+2190-2193;
}
@font-face {
font-family: "Martian Mono";
src: url("../fonts/martian-mono-latin-v1.woff2") format("woff2");
font-weight: 400 600;
font-stretch: 87.5% 100%;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201D, U+2022, U+2026, U+2122, U+2190-2193;
}
@font-face {
font-family: "Doto";
src: url("../fonts/doto-latin-v1.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B0, U+00B4, U+00B6-00B8, U+00BA-00BB, U+00BF-00FF, U+2013-2014, U+2018-201A, U+201C-201D, U+2022, U+2026, U+2122;
}
/* --------------------------------------------------------------------------
Fallback faces: system fonts resized to the metrics of ours, so the swap moves nothing.
size-adjust = our average character width / the system font's; the three overrides are our own
ascent, descent and line gap divided by that size-adjust. Measured from the real files
(Arial 7.00, Arial Bold 7.00, Consolas 7.00, Courier New 6.92) by tools/build-fonts.py.
Archivo changes width with weight and with its width axis, so its fallback has one face per type
recipe; the browser picks by font-weight and font-stretch exactly as it does for the real font.
-------------------------------------------------------------------------- */
@font-face { /* text: body-lg, body, small (400 at 100%) */
font-family: "Archivo Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 400 499;
font-stretch: 100% 102%;
size-adjust: 98.02%;
ascent-override: 89.58%;
descent-override: 21.42%;
line-gap-override: 0%;
}
@font-face { /* medium: chips, facts, emphasis (560 at 100%) */
font-family: "Archivo Fallback";
src: local("Arial"), local("ArialMT");
font-weight: 500 599;
font-stretch: 100% 102%;
size-adjust: 101.05%;
ascent-override: 86.89%;
descent-override: 20.78%;
line-gap-override: 0%;
}
@font-face { /* strong: buttons, nav (620 at 100%) */
font-family: "Archivo Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 600 900;
font-stretch: 100% 102%;
size-adjust: 95.3%;
ascent-override: 92.13%;
descent-override: 22.04%;
line-gap-override: 0%;
}
@font-face { /* h3, product names (620 at 104%) */
font-family: "Archivo Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 600 900;
font-stretch: 102.01% 106%;
size-adjust: 99.59%;
ascent-override: 88.16%;
descent-override: 21.09%;
line-gap-override: 0%;
}
@font-face { /* h2 (620 at 108%) */
font-family: "Archivo Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 600 900;
font-stretch: 106.01% 109%;
size-adjust: 103.9%;
ascent-override: 84.51%;
descent-override: 20.21%;
line-gap-override: 0%;
}
@font-face { /* h1, display, display-xl (640 at 110%) */
font-family: "Archivo Fallback";
src: local("Arial Bold"), local("Arial-BoldMT");
font-weight: 600 900;
font-stretch: 109.01% 112%;
size-adjust: 106.57%;
ascent-override: 82.38%;
descent-override: 19.7%;
line-gap-override: 0%;
}
@font-face { /* width 87.5%, any weight */
font-family: "Martian Mono Fallback";
src: local("Consolas");
font-weight: 400 600;
font-stretch: 87.5% 93.75%;
size-adjust: 118.22%;
ascent-override: 84.59%;
descent-override: 16.92%;
line-gap-override: 0%;
}
@font-face { /* width 100%, any weight */
font-family: "Martian Mono Fallback";
src: local("Consolas");
font-weight: 400 600;
font-stretch: 93.76% 100%;
size-adjust: 127.32%;
ascent-override: 78.54%;
descent-override: 15.71%;
line-gap-override: 0%;
}
@font-face { /* width 87.5%, any weight */
font-family: "Martian Mono Fallback Courier";
src: local("Courier New"), local("CourierNewPSMT");
font-weight: 400 600;
font-stretch: 87.5% 93.75%;
size-adjust: 108.32%;
ascent-override: 92.32%;
descent-override: 18.46%;
line-gap-override: 0%;
}
@font-face { /* width 100%, any weight */
font-family: "Martian Mono Fallback Courier";
src: local("Courier New"), local("CourierNewPSMT");
font-weight: 400 600;
font-stretch: 93.76% 100%;
size-adjust: 116.65%;
ascent-override: 85.73%;
descent-override: 17.15%;
line-gap-override: 0%;
}
@font-face { /* any weight */
font-family: "Doto Fallback";
src: local("Consolas");
font-weight: 400 900;
size-adjust: 109.13%;
ascent-override: 87.05%;
descent-override: 22.91%;
line-gap-override: 0%;
}
@font-face { /* any weight */
font-family: "Doto Fallback Courier";
src: local("Courier New"), local("CourierNewPSMT");
font-weight: 400 900;
size-adjust: 99.98%;
ascent-override: 95.02%;
descent-override: 25%;
line-gap-override: 0%;
}
/* --------------------------------------------------------------------------
The stacks that use these faces are tokens: --ecc-f-text, --ecc-f-mono and --ecc-f-dot in tokens.css
(from tokens.json). This file declares no custom property. Load it together with tokens.css; a page
that loads it alone has to name the families itself, fallback families included:
--ecc-f-text: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--ecc-f-mono: "Martian Mono", "Martian Mono Fallback", "Martian Mono Fallback Courier", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--ecc-f-dot: "Doto", "Doto Fallback", "Doto Fallback Courier", ui-monospace, monospace;
When a face is added or renamed here, tools/build-fonts.py stops until tokens.json names it.
-------------------------------------------------------------------------- */