pages/site/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/STIXTwoText/STIXTwoText_Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/STIXTwoText/STIXTwoText_Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/STIXTwoText/STIXTwoText_Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BodySerif';
    src: url('../assets/fonts/STIXTwoText/STIXTwoText_BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

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

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

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Source_Sans_3/static/SourceSans3-SemiBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'BodySans';
    src: url('../assets/fonts/Source_Sans_3/static/SourceSans3-SemiBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/CommitMonoUnfancyDevNV143/CommitMonoUnfancyDevN-350-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/CommitMonoUnfancyDevNV143/CommitMonoUnfancyDevN-350-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/CommitMonoUnfancyDevNV143/CommitMonoUnfancyDevN-700-Regular.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Mono';
    src: url('../assets/fonts/CommitMonoUnfancyDevNV143/CommitMonoUnfancyDevN-700-Italic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

:root {
    --base-font-size: 1.2rem;
}

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

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

.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: normal;
}

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

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

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

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

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

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

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