pages/css/fonts.css

@font-face {
    font-family: 'Heading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadRegular-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Heading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadItalic-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Heading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadBold-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Heading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadBoldItalic-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Subheading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadMedium-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Subheading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadMediumItalic-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Subheading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadBold-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Subheading';
    src: url('../assets/fonts/LiterataTT/LiterataTT-SubheadBoldItalic-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Regular-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Italic-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Bold-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-BoldItalic-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Regular-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Italic-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Bold-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-BoldItalic-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-feature-settings: "lnum" 1, "kern" 1, "liga" 1;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-LightItalic-Subset.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-Regular-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-RegularItalic-Subset.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-SemiBold-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-SemiBoldItalic-Subset.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Quote";
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Italic.ttf') format('woff2');
}

@font-face {
    font-family: 'Math';
    src: url('../assets/fonts/STIXTwo/STIXTwoMath-Regular.woff2') format('woff2');
}

:root {
    --base-font-size: 16pt;
}

html {
    font-size: var(--base-font-size);
}

/* Setting the line height here apparently stops "normal" from varying
   across the course of <body>. */
body {
    font-size: var(--base-font-size);
    line-height: var(--read-spacing);
    font-display: swap;
}

.font-hidpi body {
    font-family: "BodySerif", sans-serif;
}

.font-lodpi body {
    font-family: "BodySans", serif;
}

h1 {
    font-family: "Heading";
    font-style: italic;
    line-height: normal;
    font-optical-sizing: auto;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Subheading";
    font-style: italic;
    font-weight: normal;
    line-height: var(--ui-spacing);
    font-optical-sizing: auto;
}

:root {
    --head-mult: 0.88; /* This is pairwise fixed, Literata + Alegreya. */
}

h1 {
    margin-block: 0.67em;
    font-size: calc(2.3 * var(--base-font-size) * var(--head-mult));
}

h2 {
    font-size: calc(1.8 * var(--base-font-size) * var(--head-mult));
}

h3 {
    font-size: calc(1.6 * var(--base-font-size) * var(--head-mult));
}

h4 {
    font-size: calc(1.4 * var(--base-font-size) * var(--head-mult));
}

h5 {
    font-size: calc(1.2 * var(--base-font-size) * var(--head-mult));
}

h6 {
    font-size: calc(1.0 * var(--base-font-size * var(--head-mult)))
}

code, pre code {
    font-family: "Mono";
    font-size: calc(0.84 * var(--base-font-size));
}

math {
  color: black;
  font-family: "Math";
  font-size: calc(0.96 * var(--base-font-size));
}