/* ============================================================
geist-mono.css
Self-hosted Geist Mono with NON-SLASHED zero (OpenType ss09)
------------------------------------------------------------
How to use:
1. Keep the "fonts/" folder next to this file.
2. Link this CSS in your :
3. Add the class to any element that should use the font:
const total = 0;
============================================================ */
@font-face {
font-family: 'Geist Mono';
src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations'),
url('fonts/GeistMono-Variable.woff2') format('woff2 supports variations'),
url('fonts/GeistMono-Regular.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* The font + non-slashed zero in one class.
"ss09" 1 = enable Stylistic Set 9 = the non-slashed zero. */
.geist-mono {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-feature-settings: 'ss09' 1; /* non-slashed zero */
}
/* Alternative modern syntax (Chrome 111+, Safari 17.4+, Firefox 126+).
Same result; use instead of font-feature-settings if you like. */
.geist-mono-alternate {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-variant-alternates: styleset('ss09');
}
/* Site-wide option: uncomment to apply the font + non-slashed zero
to all monospace text on the page. */
/*
:where(code, pre, kbd, samp, .geist-mono) {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-feature-settings: 'ss09' 1;
}
*/
/* If you ever want the SLASHED zero back for a specific element,
add this class: font-feature-settings: 'ss09' 0; */
.geist-mono-slashed {
font-feature-settings: 'ss09' 0;
}
/* Demo helper: body.slashed-mode disables ss09 everywhere (used by toggle.js) */
.slashed-mode .geist-mono {
font-feature-settings: 'ss09' 0;
}