Add fonts to page:

/* Inter Variable */
@font-face {
	font-weight: 100 900;
	font-family: 'Inter Variable';
	font-style: oblique 0deg 10deg;
	font-display: swap;
	src: url('/fonts/inter-variable.woff2') format('woff2');
}

/* Inter Static */
@font-face {
	font-weight: 400;
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	src:
		url('/fonts/inter-regular.woff2') format('woff2'),
		url('/fonts/inter-regular.woff') format('woff');
}

@font-face {
	font-weight: 400;
	font-family: 'Inter';
	font-style: italic;
	font-display: swap;
	src:
		url('/fonts/inter-italic.woff2') format('woff2'),
		url('/fonts/inter-italic.woff') format('woff');
}

@font-face {
	font-weight: 700;
	font-family: 'Inter';
	font-style: normal;
	font-display: swap;
	src:
		url('/fonts/inter-bold.woff2') format('woff2'),
		url('/fonts/inter-bold.woff') format('woff');
}

/* Neue Machina */
@font-face {
	font-weight: normal;
	font-family: 'Neue Machina';
	font-style: normal;
	font-display: swap;
	src:
		url('/fonts/neue-machina.woff2') format('woff2'),
		url('/fonts/neue-machina.woff') format('woff');
}

/* JetBrains Mono */
@font-face {
	font-weight: normal;
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-display: swap;
	src:
		url('/fonts/jetbrains-mono.woff2') format('woff2'),
		url('/fonts/jetbrains-mono.woff') format('woff');
}

/* Variables */
:root {
	--font-family-text: 'Inter', sans-serif;
	--font-family-heading: 'Neue Machina', sans-serif;
	--font-family-code: 'JetBrains Mono', monospace;
}

@supports (font-variation-settings: normal) {
	:root {
		--font-family-text: 'Inter Variable', sans-serif;
	}
}