reactjs - 反応するダイアフローアプリでローカルフォント（woff）をインポートする方法

Question

Direflow 反応アプリケーションでローカル woff フォントをロードする際に問題に直面しています

これが私のサンプルコードです

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

まだフォントを使用できません。マテリアル UI を使用して direflow 反応アプリケーションを提案してください