Custom font upload code not working on broadcast theme

Store Design
, ,
1

Hello, I am trying to upload 2 fonts in various weights to try which one I would like to use and where on the broadcast theme. Shopify dev blog recommends to upload in files and link it from there (and not use the assets upload and assets url). however the code suggested isn’t working.. I pasted the following code under {%- style -%} in the theme.liquid under the layout section. Please let me know how I can fix this and get it to work?

@font-face {
font-family: ‘TRJNDaVinci-Display’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/TRJNDaVinci-Display.woff2?v=1718886348’) format(‘woff2’);
}

@font-face {
font-family: ‘TRJNDaVinci-Text’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/TRJNDaVinci-Text.woff2?v=1718886348’) format(‘woff2’);
}

@font-face {
font-family: ‘TRJNDaVinciItalic-Display’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/TRJNDaVinciItalic-Display.woff2?v=1718886348’) format(‘woff2’);
}

@font-face {
font-family: ‘Kern_Standard_Trial_Regular’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/Kern_Standard_Trial_Regular.woff2?v=1718886348’) format(‘woff2’);
}

@font-face {
font-family: ‘Kern_Standard_Trial_Medium’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/Kern_Standard_Trial_Medium.woff2?v=1718886348’) format(‘woff2’);
}

@font-face {
font-family: ‘Kern_Standard_Trial_Bold’;
src: url(‘https://cdn.shopify.com/s/files/1/0799/2052/9684/files/Kern_Standard_Trial_Bold.woff2?v=1718886348E’) format(‘woff2’);
}

body {
font-family: ‘Kern_Standard_Trial_Regular’, sans-serif;
font-weight: 400;
font-style: regular;
}

h1 {
font-family: ‘TRJNDaVinci-Display’, serif;
}

h2, h3 {
font-family: ‘TRJNDaVinci-Text’, serif;
}

.medium-text {
font-family: ‘Kern_Standard_Trial_Medium’; sans-serif;
font-weight: 500;
font-style: medium;
}

.bold-text {
font-family: ‘Kern_Standard_Trial_Bold’; sans-serif;
font-weight: 700;
font-style: bold;
}

.italic-text {
font-family: ‘TRJNDaVinciItalic-Display’, serif;
font-weight: 400;
font-style: italic;
}

I even tried pasting this at the top of the code above

h2, h3, { font-family: "TRJNDaVinci-Text" !important; font-size: 5em !important; } body, { font-family: "Kern_Standard_Trial_Regular" !important; font-size: 3em !important; }

Thanks!