Webfont is not being deployed in create-react-app

Question

Having problem with using web-font in CRA, in development mode it loads like this

But when deployed, in production mode it doesn't seemed to be loaded at all. Any ideas guys? Here is my css

    @font-face {
      font-family: 'Noto Sans';
      src: local('Noto Sans KR'), url(./fonts/NotoSansKR-Black.otf) format('opentype');
      font-weight: 900;
    }

    @font-face {
      font-family: 'Noto Sans';
      src: local('Noto Sans KR'), url(./fonts/NotoSansKR-Bold.otf) format('opentype');
      font-weight: 700;
    }

score 0 · Answer 1 · answered Sep 27 '19 at 06:59

0

During production, your fonts get bundled as base64 Uri, if you have code splitting enabled then you can see them in your chunks list with a different hashed name.

answered Sep 27 '19 at 06:59

Anoop Gupta

131
1
5

But still, why the fonts are not being applied in production? – Seong Min Park Sep 27 '19 at 07:10

score 0 · Answer 2 · answered Sep 27 '19 at 09:53

This is the suggested option. It ensures your fonts go through the build pipeline, get hashes during compilation so that browser caching works correctly, and that you get compilation errors if the files are missing.

As described in “Adding Images, Fonts, and Files”, you need to have a CSS file imported from JS. For example, by default src/index.js imports src/index.css:

import './index.css'; A CSS file like this goes through the build pipeline, and can reference fonts and images. For example, if you put a font in src/fonts/MyFont.woff, your index.css might include this:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Notice how we’re using a relative path starting with ./. This is a special notation that helps the build pipeline (powered by Webpack) discover this file. Answered here: How to add fonts to create-react-app based projects?

Did you delete my comment? Anyways, don't copy another person's answer — Seong Min Park, Sep 28 '19 at 06:08

Webfont is not being deployed in create-react-app

2 Answers2