Hey everyone. Having some trouble getting custom fonts to work in an up to date copy of Dawn.
I’m seeing the font load from dev tools in Chrome, but it’s not displaying - I’ve triple checked the syntax a few hundred times, and it all seems fine. I don’t see any 404 errors in the network tab of dev tools. I’ve even tried multiple font files assuming perhaps something was corrupt.
I’ve also tried uploading the font woff files into settings > files, as well as assets directly in the theme - no luck.
Preview link of the theme - https://rally-beer.myshopify.com/?key=0077112c58b0c7d0552793a85b0c17078bb37e5200189d12c199958d5a8da557
In the CSS, nav menu items and buttons should be Space Mono - but it’s using a fallback monospace font. All RTE text should be Space Grotesk, but it’s not working either.
Font files in CSS:
@font-face {
font-family: “Space Mono”;
src: url({{ “SpaceMono-Regular.woff” | asset_url }}) format(“woff”);
}
@font-face {
font-family: ‘Space Grotesk’;
src: url({{ “https://cdn.shopify.com/s/files/1/0555/2793/1956/files/SpaceGrotesk-Regular.woff?v=1639531455” | asset_url }}) format(‘woff’);
}
And classes with the font family deceleration:
.contact-button,
.featured-collection-button,
.cart-empty-button {
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-family: “Space Mono”, monospace !important;
text-transform: uppercase;
padding: 0.9rem 3rem 1.1rem;
text-decoration: none;
border: 0.1rem solid transparent;
border-radius: 0;
background-color: rgba(var(–color-button), var(–alpha-button-background));
box-shadow: 0 0 0 0.1rem rgba(var(–color-button), var(–alpha-button-border));
color: #FFFFFF;
min-width: 12rem;
min-height: 4.5rem;
transition: box-shadow var(–duration-short) ease;
-webkit-appearance: none;
appearance: none;
}
None of this syntax seems to be an issue; but I can provide the other classes I’ve added the font family to. Staff accounts would be tricky to grant access to but I appreciate any help.