Custom font not loading in react direflow application

Question

I have created a javascript direflow application. I am trying to load a local font but haven't been able to.

Below are the details and code snippets I have applied.

Folder Structure

font.css

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

direflow-components/testing-component/index.js

plugins: [
    {
      name: 'font-loader',
      options: {
        custom: {
          families: ['MyLocalFont'],
          urls: ['/fonts.css']
        },
      },
    },
  ],

App.css

.header-title {
  font-size: 34px;
  color: #5781C2;
  font-family: 'MyLocalFont';
}

The font files doesn't load. Please help.

Note: Built a react app using create-react-app there with @font-face changes the fonts load. Something with direflow is not working.

try create a build and then try again, sometimes the files don't get copied to your assets and as a result they don't get served. — Mudasir Zahoor
– Mudasir Zahoor, Commented Dec 23, 2020 at 10:44
There is no need to serve font files in .eot anymore, unless you're aiming for some backward compatibility of extreme level (caniuse.com/?search=eot). Also, in your css, you are referencing your woff2 file as if it was .woff and not .woff2 — Capagris
– Capagris, Commented Dec 23, 2020 at 17:11
@Capagris Thank you for pointing that out. I have corrected the WOFF file and font name but still, I don't see the fonts loading. — Darshna Rekha
– Darshna Rekha, Commented Dec 24, 2020 at 4:25

Darshna Rekha · Accepted Answer · 2020-12-24 08:06:30Z

3

I resolved the issue seems like the plugin font-loader is not required. I removed it from direflow-components/testing-component/index.js.

Another change I made is removed the single quotes from the font-family.

App.css

.header-title {
    font-family: MyLocalFont;
}

answered Dec 24, 2020 at 8:06

Darshna Rekha

1,1317 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HiRenS Over a year ago

Hey @Darshna Rekha, This doesn't seem to be working for me. The fonts are not even bundling in production build of direflow. Could you please help or provide code sample that you have?

Darshna Rekha Over a year ago

Consider this is the path for the fonts for me testing-component/src/direflow-components/testing-component/fonts/Caveat-Bold.woff, I have added the font-face in testing-component/src/direflow-components/testing-component/App.css at the top of the page.

Collectives™ on Stack Overflow

Custom font not loading in react direflow application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related