homepage/styles/lib/_typography.scss

$normal-weight: 400;
$emphasized-weight: 600;

$comfortaa-weights: (
	'Light': 300,
	'Regular': 400,
	'Medium': 500,
	'Semi-bold': 600,
	'Bold': 700,
);

@mixin setup {
	@each $name, $weight in $comfortaa-weights {
		@font-face {
			font-family: 'Comfortaa';
			font-style: normal;
			font-weight: $weight;
			font-display: swap;
			src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
		}
	}

	@font-face {
		font-family: 'Comfortaa Variable';
		font-style: normal;
		font-display: swap;
		src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
	}

	html {
		$fallback-fonts: Roboto, Arial, sans-serif;

		font-size: 125%; // Scale from 16px to 20px
		font-family: Comfortaa, $fallback-fonts;
		font-weight: $normal-weight;

		@supports (font-variation-settings: normal) {
			font-family: 'Comfortaa Variable', $fallback-fonts;
		}
	}

	body {
		font-size: var(--text-m);
		line-height: var(--scale-m);
	}
}