/* ==========================================================================
Colophon — optional self-hosted faces
NOT linked by any page by default. A site with no font files in
assets/fonts/ must not ask for them: this file exists so that shipping the
faces is one , and not shipping them costs nothing.
To enable, put the five .woff2 subsets in assets/fonts/ and add, in ,
BEFORE colophon.css:
Both families are open licence and may be self-hosted:
EB Garamond SIL Open Font License 1.1 — github.com/octaviopardo/EBGaramond12
IBM Plex Mono SIL Open Font License 1.1 — github.com/IBM/plex
Subset to latin + latin-ext before shipping, and weigh what you add. The
budget is 100 KB transferred per page; the site without any font file is
about 17 KB gzipped on its heaviest page, so roughly 80 KB is left.
Three faces fit and five do not. Ship the first, third and fourth rule below
— Garamond regular, Garamond italic, Plex Mono regular — and drop the two
500 weights: colophon.css sets font-synthesis-weight: none, so a missing 500
renders at 400 and the headings keep their hierarchy from size and spacing,
which is where it actually comes from. Measure after subsetting, before
committing.
local() comes first on purpose: a reader who already has the face installed
downloads nothing.
========================================================================== */
@font-face {
font-family: "EB Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("EB Garamond"), local("EBGaramond-Regular"),
url("fonts/ebgaramond-400.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
font-family: "EB Garamond";
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: local("EB Garamond Medium"), url("fonts/ebgaramond-500.woff2") format("woff2");
}
@font-face {
font-family: "EB Garamond";
font-style: italic;
font-weight: 400;
font-display: swap;
src: local("EB Garamond Italic"), url("fonts/ebgaramond-400i.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: local("IBM Plex Mono"), url("fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: local("IBM Plex Mono Medium"), url("fonts/plexmono-500.woff2") format("woff2");
}