Why isn't my custom font uploading correctly?

Technical Q&A
1

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

gwenlee_1-1660201755607.png
gwenlee_1-1660201755607.png266×264 3.67 KB

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?

2

@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/

3

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

gwenlee_0-1660252261872.png
gwenlee_0-1660252261872.png1094×526 37.8 KB

4

@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.