Adding local fonts to Quartz

I was looking to add Geist as the header and body font and Cascadia Code as the code font for my personal garden webpage deployed using Quartz. As those fonts weren’t available in Google Fonts, I had to add them from my locally installed font base. The following documents the steps I had to take to add locally installed fonts to Quartz

I added the desired font files to /quartz/static/fonts. After that, I heade over to custom.scss (I edited this file in VS Code, so I used Ctrl + P and searched for the file by name to quickly retrieve it) and added the following lines of code

@use "./base.scss";
 
// put your custom CSS here!
@font-face {
	font-family: "Geist";
	src:
		url("/static/fonts/Geist_Regular.ttf");
	font-weight: normal;
	font-style: normal;
}
 
@font-face {
	font-family: "Geist";
	src:
		url("/static/fonts/Geist_Regular.ttf");
	font-weight: normal;
	font-style: italic;
}
 
@font-face {
	font-family: "Geist";
	src:
		url("/static/fonts/Geist_Bold.ttf");
	font-weight: bold;
	font-style: normal;
}
 
@font-face {
	font-family: "Cascadia Code";
	src:
		url("/static/fonts/Cascadia_Code_Regular.ttf");
}

This adds the fonts in the TTF files into Quartz, which can then be set in quartz.config.ts as usual

const config: QuartzConfig = {
	...
	theme: {
		fontOrigin: "local",
		cdnCaching: false,
		typography: {
			header: "Geist",
			body: "Geist",
			code: "Cascadia Code",
		},
	...
	}
	...
}