Font file assets not loading in website

Purchased the following domain from godaddy, whenichra.xyz, successfully transferred it to Cloudflare DNS, and created a Cloudflare Page (https://whenichra.pages.dev/).

When I create a new deployment I’m including a fonts file with the standard formats in the primary assets folder:
Screen Shot 2024-05-29 at 11.10.52 PM

Here is the initial css code:

@font-face {
  font-family: 'Realce'
    src: 
       url('fonts/Realce.woff2') format('woff2'),
       url('fonts/Realce.woff') format('woff'),
       url('fonts/Realce.ttf') format('truetype'),
       url('fonts/Realce.otf') format('opentype');
    }

body {
  font-family: 'Realce' !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #424AFB;
  background-image: url(https://arc.net/noise-light.png);
}

When I have the font, Realce, installed in my Mac Font Book application the font loads correctly, but when I disable it or visit the website on a different device the Realce font does not appear.

I’m not seeing any of these font files load in the Inspect > Network tool.

Things that didn’t work:

  • Storing fonts in the main folder and not a sub ‘fonts’ folder
  • Purge Everything in cache
  • Turning on Development Mode
  • Turning on Always Use HTTPS

This is my first website build so any help would be appreciated!

The font is loading for me… and, no, I don’t have it installed on my PC.

Apologies @GeorgeAppiah, I should have posted a picture of what the font looks like as it doesn’t appear to match your screenshot

The problem is in your CSS code. You’re missing a semicolon in your @font-face rule. I’m sorry I didn’t take a closer look at this earlier.

@font-face {
  font-family: 'Realce';  // You're missing this semicolon
  src:
    url('fonts/Realce.woff2') format('woff2'),
    url('fonts/Realce.woff') format('woff'),
    url('fonts/Realce.ttf') format('truetype'),
    url('fonts/Realce.otf') format('opentype');
}
2 Likes

Amazing! Thank you @GeorgeAppiah! I was really hoping it would be something harder to figure out :upside_down_face:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.