Why isn't my custom font uploading correctly?

[gwenlee]

Hi I tried to upload my customed fonts as I uploaded on the code below

And added my css code below to "Assets" > "base.css" with 

@font-face {
  font-family: "Roobert-SemiBold";
  src: url("{{"Roobert-SemiBold.woff2" | asset_url}}") format("woff2"),
    url("{{"Roobert-SemiBold.woff" | asset_url}}") format("woff");
}

@font-face {
  font-family: "Roobert-Medium";
  src: url("{{"Roobert-Medium.woff2" | asset_url}}") format("woff2"),
    url("{{"Roobert-Medium.woff" | asset_url}}") format("woff");
}
      
h1, h2, h3, h4, h5, h6, body, p, a {
  font-family: "Roobert-SemiBold", "Roobert-Medium"  !important;
}

But it seems that the theme is not rendering the fonts. I double checked the file is working or not on other platforms and they were working fine - what am I missing?

[oscprofessional]

@gwenlee ,

Have you added link on header file ?

Or have you upload the font file in asset?

refer this article.

https://www.oscprofessionals.com/blog/how-to-add-and-edit-a-custom-fonts-to-your-shopify-store/

[gwenlee]

I did. and uploaded the assets like I referred to the last photo image. 😞

[cfx · Accepted solution]

@gwenlee This is a problem with how Shopify's new theme code editor processes file uploads. While we're waiting for a fix, I recommend uploading your custom font files via Settings -> Files and then use the file_url filter (instead of asset_url). That should get your custom font working as expected.