How to set up fonts in CSS

When I take on accessibility remediation work, one of the first things I check is how a site loads its fonts. Too often they load straight from Google, raising privacy concerns, or the setup was simply done poorly from the start. Loading fonts locally via CSS fixes both problems and gives you full control over performance and privacy.

In this walkthrough, I show you how to convert your Google fonts to WOFF, add them to your child theme, and write clean CSS that respects accessibility. That includes limiting font weights to the 300–700 range and setting font-display to swap so text stays readable while fonts load.

Transcript is at the end of this blog post.

Font CSS

Font file types

I get my fonts from Google fonts, which gives out fonts as ttf, or true type font files. While we can use these fonts directly, woff type fonts are a bit leaner and faster to load.

There are a lot of online converters to handle the font conversion, CloudConvert is the one I usually use.

How to set up for variable fonts

Below is the CSS to use for truetype variable fonts.

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100-900;
    src: url('/wp-content/themes/kaya-child/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
	font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100-900;
    src: url('/wp-content/themes/kaya-child/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
	font-display: swap;
}

Below is the CSS to use for woff2 variable fonts.

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100-900;
    src: url('/wp-content/themes/kaya-child/fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
	font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100-900;
    src: url('/wp-content/themes/kaya-child/fonts/Montserrat-Italic-VariableFont_wght.woff2') format('woff2');
	font-display: swap;
}

How to set up for standard fonts

Below is the CSS to use for truetype fonts.

@font-face {
	font-family: 'PTSans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'PTSans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'PTSans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

Below is the CSS to use for woff2 fonts

@font-face {
	font-family: 'PT Sans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'PT Sans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'PT Sans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'PT Sans';
	src:  url('/wp-content/themes/kaya-child/fonts/PTSans-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

Transcript

Oftentimes when I’m doing accessibility remediation work, I need to fix how a website loads its fonts. Sometimes this is because the fonts load directly through Google and we have privacy concerns, and sometimes things just got done poorly in the first place. In this video, I’ll walk you through how to load your fonts via CSS.

The first thing I do is grab most of my fonts off of Google, but when they arrive they come as TTF, and we want WOFF. So I just drag and drop them into this converter, Cloud Convert. I’ll put the link to this and the CSS in the description of the video.

Once I have it converted, I come over and add the CSS. The first font is Montserrat, which is a variable weight font, so I’ll walk you through the CSS. First, the font family declares what it’s called. Then the font style: we load both normal and italic.

Then we list the weights available to use. When we’re doing accessibility work, we only want to use 300 to 700 for the weights, but since this is a variable weight font, all of them load. We list the source location where the font can be found.

So I use the converter, then upload the converted file into the fonts folder in my child theme. Finally, we set the font display to swap. I’ve also loaded PTSans, which is a standard font, not a variable font, so I loaded the specific weights of 400 and 700, in both italic and non-italic.

When I don’t have any font style, I can simply omit it and it’s treated as normal. Once those are loaded in, all I have to do is save the file, and I can immediately start using them.