7

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.

Rahul
  • 235
  • 2
  • 5
  • 14

2 Answers2

10

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


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

simmer
  • 2,639
  • 1
  • 18
  • 22
  • Thanks for the comment. I have made the change as suggested and updated my question but still unable to load the font. Can you please see if i have missed something? – Rahul Jun 11 '20 at 21:15
  • Other things to check: 1) are your font files being copied to the `/build` directory when you run `yarn build`? 2) if they are, is `./fonts/Simplified_Lt.ttf` the correct path to those files from the compiled CSS file? 3) Look in your web inspector's Network pane: are you getting a simple `404` for your font file, or is there a different status code? – simmer Jun 12 '20 at 04:19
  • 1
    Thanks this worked for me 'Directly import both CSS files into your javascript' – usertest Jan 06 '21 at 11:52
  • hi, i uploaded my font to firebase storage and they are working when i access my website on a browser. my problem occurs when i try to access website on mobile they dont get loaded – kd12345 Sep 29 '22 at 13:39
  • @kd12345 please create a new Stack Overflow post for your issue. – simmer Oct 06 '22 at 20:52
0

i had the same issue in react. i made @font-face in style tag on the index.html and thats my fault. so it does not work

Solutions

removed @font-face from index.html style tag and add it in my App.css file then it works fine...

starterProgrammer
  • 109
  • 1
  • 11