/*! PolyFishCSS-Fonts.css | v1.0.0-rc.2-rc.1-rc.1-rc.1-rc.1-rc.1 | polyfish.org | MIT
*
* Optional module: @font-face declarations for the three families Core names
* in its font stacks, served from your own origin.
*
* Depends on: nothing. Load it before or after Core, it does not matter.
* Load order: anywhere. It declares faces, it does not apply them.
*
* WHY SELF-HOST
* Security - no third-party origin means no third party to trust, and the
* Content-Security-Policy can drop every remote allowance.
* Privacy - visitor IPs are never handed to a font CDN.
* Speed - no extra DNS lookup, TLS handshake or connection to a second
* origin before the first glyph paints.
*
* WEIGHTS SHIPPED
* Bricolage Grotesque 700, 800 display
* Inter 400, 500, 600, 700 body and interface
* IBM Plex Mono 400, 500 code and eyebrows
*
* Latin subsets only, roughly 176 KB for the set. Add a weight by dropping
* the .woff2 in /fonts and copying a block below; the framework never asks
* for a weight that is not declared here.
*
* SKIPPING THIS FILE
* Everything still works. Core's stacks fall back to Trebuchet/system-ui,
* system-ui and ui-monospace respectively. The scale, spacing and layout are
* unchanged; only the letterforms differ.
*
* PRELOAD
* The two faces above the fold are worth preloading in :
*
*
*/
@layer polyfish.core, polyfish.grid, polyfish.headers, polyfish.content, polyfish.forms, polyfish.components, polyfish.footers, polyfish.space, polyfish.effects, polyfish.utilities, polyfish.fonts, polyfish.compat;
/* ==========================================================================
CASCADE LAYER
==========================================================================
Everything below sits in `polyfish.fonts`. The layer order is declared in
every module, so it holds no matter which order you link the files in.
Why this matters to you: unlayered CSS beats layered CSS regardless of
specificity. Your own stylesheet overrides any framework rule with a plain
class selector — no `!important`, no specificity arms race, no worrying
about whether Utilities loaded last.
If you want your CSS layered too, name a layer after the framework's:
@layer polyfish, app;
@layer app { .card { background: rebeccapurple; } }
========================================================================== */
@layer polyfish.fonts {
/* font-display: swap - text paints immediately in the fallback and is
repainted when the face arrives. Never invisible, never blocking. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/inter-latin-400-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/inter-latin-500-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/inter-latin-600-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/inter-latin-700-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
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+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ========================================================================
FALLBACK METRICS
========================================================================
The gap between a fallback face rendering and the web font arriving is
where layout shift comes from: Arial is shorter and wider than Inter, so
every line box changes height and every heading rewraps when the swap
happens.
These faces are Arial with Inter's and Bricolage's metrics forced onto
it. The browser lays the page out with the fallback at the right line
height and the right average width, then the real font lands into a box
that already fits.
The numbers are measured from the woff2 files in this directory with
fontTools, not estimated:
Inter unitsPerEm 2048, ascent 1984 (96.9%), descent 494 (24.1%),
avgCharWidth 610/1000
Bricolage unitsPerEm 1000, ascent 930 (93.0%), descent 270 (27.0%),
avgCharWidth 539/1000 at weight 700
IBM Plex Mono
unitsPerEm 1000, ascent 1025 (102.5%), descent 275 (27.5%)
Arial, the reference: unitsPerEm 2048, avgCharWidth 1024 (500/1000).
size-adjust is the ratio of the two average widths.
======================================================================== */
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
ascent-override: 96.9%;
descent-override: 24.1%;
line-gap-override: 0%;
size-adjust: 122%;
}
@font-face {
font-family: "Bricolage Fallback";
src: local("Arial");
ascent-override: 93%;
descent-override: 27%;
line-gap-override: 0%;
size-adjust: 107.8%;
}
@font-face {
font-family: "Plex Mono Fallback";
src: local("Courier New");
ascent-override: 102.5%;
descent-override: 27.5%;
line-gap-override: 0%;
size-adjust: 97.7%;
}
}