How can i fix @fontface issue in my react application?

Question

I am facing an issue with custom fonts. I have created an app using create-react-app and provided the custom font files (.ttf) in public folder so that while building the app, all assests are part of the build. I am able to see the font on my local but not on nginx server. Nginx server has the .ttf support since another application is working fine. What should be the miss? I am not able to find it. Also, firefox is not able to load the same custom font. Here is my stylesheet -

@font-face {
    font-family: 'Simplied';
    src: url('/fonts/simplied-Light.ttf') format('truetype');
  }

which i import in another css file using @import 'stylesheet.css'.

P.S Thanks for the comment. I made the change like this -

//  ./index.css
@font-face {
  font-family: 'Simplified_Lt';
  font-display: block;
  src: local('Simplified_Lt') url(./fonts/Simplified_Lt.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  margin: 0;
  font-family:'Simplified_Lt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

and my fonts folder is under src/fonts/. But i am still not able to use the font.Can you please point out to me what could have been missed or if project structure is correct? I am using create-react-app.

Answer 1

create-react-app (CRA) hashes filenames when it does a production build.

It sounds like you have a setup along these lines:

// index.js
import './index.css`

/* index.css */
@import 'stylesheet.css`;

/* other styling */

/* stylesheet.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

After building with default hashing

When CRA runs a production build, it hashes filenames, and updates references to the hashed files. However, there are limitations to how rename-aware it is at some points.

After a build, your /build folder will contain files named something like this:

index.a31171f2.js
index.a31171f2.css
stylesheet.a31171f2.css

CRA looks through javascript files and updates any imports to include the hash:

// index.a31171f2.js
import './index.a31171f2.css'

However, it doesn't make those same modifications inside static CSS files:

/* index.a31171f2.css */
@import 'stylesheet.css`;

/* other styling */

Since the /build directory has stylesheet.a31171f2.css, and not stylesheet.css, your @import fails.

Solutions

1. Move the @font-face declaration into your index.css, instead of trying to @import it from another file.

/* index.css */
@font-face {
  font-family: 'Simplied';
  src: url('/fonts/simplied-Light.ttf') format('truetype');
}

/* other styling */

2. Directly import both CSS files into your javascript:

// index.js
import './stylesheet.css'
import './index.css`

There are ways to prevent build-time hashing, but it's not generally a good idea, as you lose the benefits of automatic cache-busting.

Lastly, if you have the Simplied font installed on your system, this would explain why it's working locally but not on your remote server. When you're developing locally, the @import is still failing behind the scenes, but your browser is loading the font directly from your system, so you still see the font as expected.