How to import local Font (woff) in react direflow app

Question

I am facing an issue to load local woff font in Direflow react application

here is my sample code

font.tsx


import {createGlobalStyle} from 'styled-components';


export default createGlobalStyle`
@font-face{
  font-family:'27 Sans';
  src: local('27 Sans'), local('27Sans'),
  url('./27Sans-Light.woff') format('woff'),
  font-weight:300;
  font-style:normal;

}`;


in app.tsx 

import GlobalFonts from "./../../fonts/fonts";
const App: FC<IProps> = (props) => {
 return (
 <GlobalFonts />
  );
}

app.css 

.content {

  font-family: 27Sans;
}

Still not able to use the font please suggest for the direflow react application using material-UI

Answer 1

In your React project, create a folder in your src folder and name it 'fonts'. In this folder create a file which you call fonts.js - this will contain the imports for your fonts and will later make them available to the rest of your app.

In the same folder, now place the two font files you have just downloaded. This will make them accessible for your app to import them correctly. After doing this, your file structure should look similar to this:

In your fonts.js file import the { createGlobalStyle } from 'styled-components'. This is a handy little helper that handles global css styles in your app. If you want to to dive in, visit createGlobalStyle on the styled components documentation. After doing that, you have to import the fonts into your file and declare them in a font-face declaration.

import { createGlobalStyle } from 'styled-components';

import NameOfYourFontWoff from './nameOfYourFont.woff';
import NameOfYourFontWoff2 from './nameOfYourFont.woff2';

export default createGlobalStyle`
    @font-face {
      font-family: 'Font Name';
      src: local('Font Name'), local('FontName'),
      url(${NameOfYourFontWoff2}) format('woff2'),
      url(${NameOfYourFontWoff}) format('woff');
      font-weight: 300;
      font-style: normal;
     }
  `;

At the top of the App.js file, after importing React, write

import GlobalFonts from './fonts/fonts';

// assuming you places fonts in your src folder as described above.

Somewhere in the App.js file, preferably just below a normal styled component that would typically contain site layout or similar and doesn't need any font styles, place the GlobalFonts component in your return of the render:

render() {
return (
    <Wrapper> 
        <GlobalFonts />
// ...
    </Wrapper>
);
}

After doing this, you are free to use your font anywhere in your styles as you choose. In any styled-components file, just declare (for example):

const AwesomeHeadline = styled.h1`
font-family: 'Font Name';
`;

export default AwesomeHeadline;