Шрифт не загружается в Reactjs

Question

Это то, как я загружаю свои файлы шрифтов в responsejs

import styled from 'styled-components';
import fontUrls from './UberMove-Bold.ttf';
import fontUrls1 from './UberMove-Light.ttf';
import fontUrls2 from './UberMove-Medium.ttf';
import fontUrls3 from './UberMove-Regular.ttf';

const Fonts = styled`
    @font-face {
       font-familty: 'UberMove-Light';
       src: url(${fontUrls1}) format('truetype');
    }`;

Это приводит к ошибке при импорте

Uncaught Ошибка: не удается создать styleled-компонент для компонента: @font-f .ace {font-familty: 'UberMove-Light'; src: url (,) format ('trueetype');}.

Answer 1

Вам необходимо глобально загрузить шрифт, а затем использовать его в компонентах:

import { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  body {
    @import url(${fontUrls1});
    font-family: 'UberMove-Light';
  }
`
const App = () => (
  <div>
    <GlobalStyles />

   //...

  </div>
)