pages/css/fonts.css

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

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

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

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

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

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

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

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

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/Alegreya/static/Alegreya-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Alegreya_Sans/AlegreyaSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@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.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

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

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

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

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/JuliaMono/JuliaMono-SemiBoldItalic.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;
}

/* 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-hidpi body {
    font-family: "BodySerif", sans-serif;
}

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

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

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

:root {
    --head-mult: 0.88; /* This is pairwise fixed, JuliaMono + 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));
}