Lara L. Schenck

When loading custom fonts with @font-face, you must include an src property that requires both a url() pointing to the font file and for the format() which identifies the type of font file it is. You can add multiple sets of urls and formats in order to support different browsers.

My current understanding is that woff and woff2 are the most modern, preferred font file formats for the web – excluding variable fonts which I, sadly, do not know very much about at the time of this writing.

The parameter accepted by the format function for both woff and woff2 is the same as the file extension, so you might have something like this:

@font-face {
	font-family: 'EksellDisplayLarge';
	src: url( './EksellDisplayLarge.woff' ) format( 'woff' ), 
	     url( './EksellDisplayLarge.woff2' ) format( 'woff2' );
}

For a redesign project I am working on now – code-named Project Blueberry, and the next push forward for the PMC design system, Larva – uses a couple of fonts that were only delivered as .otf and .ttf files, which is not ideal, but usable. I choose my battles carefully.

So, my @font-face rules were set up like so:

@font-face {
	font-family: 'Schnyder Cond M';
	src: url( './SchnyderCondM-Demi.ttf' ) format( 'ttf' );
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Domaine Display Narrow';
	src: url( './DomaineDisplayNarrow-Bold.otf' ) format( 'otf' );
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

I used the Webfont loader package for loading the fonts asynchronously. We had one additional font loaded via Typekit and that one was working fine, but these custom fonts continued to be inactive…

Can you spot the problem? I figured it out already, but I’m going to leave this blog post hanging and will update it later.

Also, regarding debugging at the end of the day, how long is too long?