Uploaded font not taking effect for Dawn 8.0.0

Store Design
,

Topic summary

A user is attempting to implement a custom “Proxima Nova” font on their Dawn 8.0.0 theme but it’s not displaying correctly, despite successfully implementing Arial using the same method.

The Problem:

  • The uploaded Proxima Nova font files (.woff and .woff2) aren’t rendering on the site
  • Arial implementation works fine as a reference point
  • Code includes @font-face declarations and CSS selectors targeting product titles and paragraphs

Solution Provided:
GemPages support identified syntax errors in the CSS code:

  • Malformed @font-face declarations with incorrect URL syntax (mixing Liquid template tags with direct URLs)
  • Extraneous HTML markup mixed into CSS code
  • Missing proper format declarations

Corrected approach:

  • Use direct CDN URLs instead of Liquid filters: url("https://cdn.shopify.com/s/files/1/0687/5090/1548/files/Proxima_Nova_Font.woff?v=1677116655")
  • Remove HTML tags from CSS file
  • Ensure CSS is placed in the correct location within the theme

The issue appears resolved pending proper code implementation.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

hi I am trying to change some titles on my website to an uploaded font of mine “Proxima-nova” I have successfully done this with Arial no problem but when I do the same thing with this font it seems to not work. Can anyone please provide assistance? My code is here:

@font-face {
  font-family: "ArialMT";
  src: url("{{ 'ArialMT' | https://cdn.shopify.com/s/files/1/0687/5090/1548/files/ArialMT.woff?v=1677036761 }}") format("woff"),
  url("{{ 'ArialMT' | https://cdn.shopify.com/s/files/1/0687/5090/1548/files/ArialMT.woff2?v=1677036761 }}") format("woff2");
}

   <p><span style="font-weight: 400;">p { font-family: "ArialMT"!important; }</span></p> 

@font-face {
  font-family: "Proxima_Nova_Font";
  src: url("{{ 'Proxima_Nova_Font' | https://cdn.shopify.com/s/files/1/0687/5090/1548/files/Proxima_Nova_Font.woff?v=1677116655 }}") format("woff"),
  url("{{ 'Proxima_Nova_Font' | https://cdn.shopify.com/s/files/1/0687/5090/1548/files/Proxima_Nova_Font.woff2?v=1677116655 }}") format("woff2");
}
   <p><span style="font-weight: 400;">h1 { font-family: "Proxima_Nova_Font"!important; }</span></p> 

.p{
  font-size: 10px !important;
  font-family: "ArialMT"!important;
}

.product__title h1 {
    font-size: 9px !important;
    font-family: "Proxima_Nova_Font"!important;
}

link to my store is: https://droughtinc.myshopify.com/products/explorer-shirt-1-1

I attached a screenshot of what the font should look like vs what it’s showing up as

Screenshot 2023-02-22 at 5.52.29 PM.png
Screenshot 2023-02-22 at 5.52.29 PM.png640×574 36 KB

Screenshot 2023-02-22 at 5.57.23 PM.png
Screenshot 2023-02-22 at 5.57.23 PM.png2472×696 178 KB

2

Hello @harrisness

After checking, I see some mistakes in your code above.
These codes must be removed from your CSS code:

GemPages_0-1677119946902.png
GemPages_0-1677119946902.png1666×812 55.2 KB

Code should be like this:

@font-face {
      font-family: "ArialMT";
      src: url("https://cdn.shopify.com/s/files/1/0687/5090/1548/files/ArialMT.woff?v=1677036761") format("woff"),
      url("https://cdn.shopify.com/s/files/1/0687/5090/1548/files/ArialMT.woff2?v=1677036761") format("woff2");
    }
    
    p { font-family: "ArialMT"!important; }
    
    @font-face {
      font-family: "Proxima_Nova_Font";
      src: url("https://cdn.shopify.com/s/files/1/0687/5090/1548/files/Proxima_Nova_Font.woff?v=1677116655") format("woff"),
      url("https://cdn.shopify.com/s/files/1/0687/5090/1548/files/Proxima_Nova_Font.woff2?v=1677116655") format("woff2");
    }
    h1 { font-family: "Proxima_Nova_Font"!important; }
    
    
    .p{
      font-size: 10px !important;
      font-family: "ArialMT"!important;
    }
    
    .product__title h1 {
        font-size: 9px !important;
        font-family: "Proxima_Nova_Font"!important;
    }

You also need to make sure to add this CSS code in the correct place.

Best regards,
GemPages Support Team