because I keep forgetting, here's a font-face template for CSS
@font-face {
font-family: "Trickster";
src: local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff");
font-display: fallback;
}
font-display: fallback; means that the browser will hide the text for a small period of time, and then display a fallback font until the custom font loads. Here's a more in-depth explanation of all the font-display options: https://css-tricks.com/almanac/properties/f/font-display/.
To help match the fallback font more closely, this is helpful: https://meowni.ca/font-style-matcher/
This is also interesting: https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/
Also, here's a font-face snippet I made for VS Code:
"font-face": {
"scope": "css",
"prefix": "font-face",
"body": [
"@font-face {",
" font-family: '$1';",
" src: url('$2');",
" font-display: fallback;",
"}"
]
}