Skip to navigationSkip to content
Portrait of Rasmus
Rasmus Johansson

Use the right font for the job

Something that I seem to find on a lot of websites that bothers me is when the wrong font-weight is used. No, I’m not talking about someone using a font-weight I don’t think works but when someone uses a font-weight that is not available for the typeface or when they’ve loaded a specific weight but then changed the font-weight with CSS. This makes the text look odd and usually, it also makes it look a bit jagged.

Here is an example of where things have gone wrong. Inter is loaded via @font-face and assigned to a font family called Inter Black, this is a weight 900 font. But later on for the .button-class, the font is used but ‘transformed’ into a weight 300 which manipulates the font to look thinner.

css
@font-face {
	font-family: 'Inter Black';
	src: url('inter-black.woff2') format('woff2');
}

.button {
	font-family: 'Inter Black';
	font-weight: 300;
}

Instead what would have been better is to define all weights needed to a collective font family called Inter and then grab the correct font file based on the assigned weight.

css
@font-face {
	font-family: 'Inter';
	src: url('inter-black.woff2') format('woff2');
	font-weight: 900;
}

@font-face {
	font-family: 'Inter';
	src: url('inter-light.woff2') format('woff2');
	font-weight: 300;
}

.button {
	font-family: 'Inter';
	font-weight: 300;
}