I’ve added the font Lufga Extra Bold for headings in the theme.liquid and base.css. Whilst this has worked and its showing the correct typeface, it isn’t displaying as the correct weight.
Does anyone have an ideas as to why this might be happening?
The following is in theme.liquid:
@font-face {
font-family: ‘LufgaExtraBold’;
src: url(https://cdn.shopify.com/s/files/1/0798/2972/9570/files/lufgaEB.woff2) format(‘woff2’);
}
I’ve added the following in the base.css.
h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: ‘LufgaExtraBold’ !important;
font-style: var(–font-body-style);
font-weight: var(–font-body-style);
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;
}
Here is a rough comparison of the font weight on site (red) and what it should look like (black).
