Naming your font-family

It’s your business what you call the fonts in your CSS.

Using a font I use in this site as an example, I can make the LTR Limited Grotesque font available with CSS @font-face:

@font-face {
    font-family: "LTRLimitedGrotesque";
    src: url("/css/LTRLimitedGrotesqueVariable-Regular.woff2");
    font-weight: 400 800;
    font-style: normal;
}

Then to apply the font, use the name of the font in font-family:

h1, h2, h3 {
	font-family: "LTRLimitedGrotesque", sans-serif;
	font-variation-settings: "wght" 600;
}

I do wonder though, how many folks realise – like pets, you can call your fonts whatever you fancy.

@font-face {
    font-family: "DisplayFace";
    src: url("/css/LTRLimitedGrotesqueVariable-Regular.woff2");
    …
}

h1, h2, h3 {
	font-family: "DisplayFace", sans-serif;
	font-variation-settings: "wght" 600;
}

This is a practical example. I’ve saved "BoatyMcFontFace" as en exercise for the reader.