Search code examples
cssreactjscreate-react-appfont-face

Custom font not loading in react direflow application

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 enter image description here

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.

Solution

  • 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;
}