Why isn't my custom font working on the Dawn theme?

[MadisonD12]

I have uploaded the following custom code to base.css

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: Carefree Serif Hairline !important;
font-style: var(–font-heading-style);
font-weight: var(–font-heading-weight);
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;

and the following to theme.liquid:

h1, .h1-style, h2, h3, h4, h5, h6, .heading-font
@font-face {https://cdn.shopify.com/s/files/1/0804/4894/6457/files/CarefreeSerifHairline.woff?v=1692662984}
font-family: ‘Carefree Serif Hairline’; !important
src: url(https://admin.shopify.com/store/401396/content/files?selectedView=all) format(‘woff2’),
url(https://admin.shopify.com/store/401396/content/files?selectedView=all) format(‘woff’);
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {https://cdn.shopify.com/s/files/1/0804/4894/6457/files/CarefreeSerifHairlineItalic.woff?v=1692662995}
font-family: ‘Carefree Serif Hairline Italic’; !important
src: url(https://admin.shopify.com/store/401396/content/files?selectedView=all) format(‘woff2’),
url(https://admin.shopify.com/store/401396/content/files?selectedView=all) format(‘woff’);
font-weight: normal;
font-style: italic;
font-display: swap;
}

but it still is not working. Please advise!

This is what it should look like:

[PageFly-Noah]

Hi @MadisonD12

This is Noah from PageFly - Shopify Page Builder App

When i tried to click on your font link, and i got this error

This means, the link to your font is undefined, and that’s why the font cannot work.

In this case please re-upload your font to Shopify Content again, then copy a new URL which direct to your font.

Hope this can help you solve the issue

Best regards,

Noah | PageFly