Не удается загрузить .ttf в React - PullRequest
Новая
       21

Не удается загрузить .ttf в React

1 голос
/ 21 октября 2019

Выдает DOM EXCEPTION

файл стилей 

  import { fontUrls1 } from './Fonts/Amaranth-Bold.ttf';

  const GlobalStyle = createGlobalStyle`
       @font-face {
       font-family: 'Amaranth-Bold';
       src: url('${fontUrls1}') format('truetype'); 
       }

       body {
          font-family: 'Amaranth-Bold';
       }

       body.fontLoaded {
          font-family: 'Amaranth-Bold' ;
       }'

Мой файл app.js 

     const openUberMoveLightObserver = new FontFaceObserver('Amaranth- 
      Bold',{});

При выполнении этой строки выдается ошибка. 

 openUberMoveLightObserver.load().then(() => {
    document.body.classList.add('fontLoaded');
  });

Uncaught (в обещании) DOMException

Ответы [ 2 ]

0 голосов
/ 21 октября 2019

Вам необходимо добавить определенный загрузчик для загрузки шрифта. Например, если вы используете веб-пакет, вы можете использовать url-загрузчик, как показано ниже: 

{
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    exclude: path.resolve(__dirname, "node_modules"),
    use: [
      {
        loader: "url-loader",
        options: {
          prefix: "font",
          limit: 10000,
          mimetype: "application/octet-stream"
        }
      }
    ]   }
0 голосов
/ 21 октября 2019

Вам не нужно импортировать шрифты для добавления в стили .... Вы можете сделать это, просто передав URL-адрес таким шрифтам, как это ..... 

export const MyFonts = createGlobalStyle` 
@font-face { 
  font-family: 'Metropolis';
  src: url(/static/fonts/Metropolis-ExtraLight.ttf);
  src: url(/static/fonts/Metropolis-Light.ttf);
  src: url(/static/fonts/Metropolis-LightItalic.ttf);
  src: url(/static/fonts/Metropolis-Medium.ttf);
  src: url(/static/fonts/Metropolis-Regular.ttf);
  src: url(/static/fonts/Metropolis-SemiBold.ttf);
}
`;

ИЛИ 

export const MyFonts = createGlobalStyle` 
  @import url('/static/fonts/Metropolis-ExtraLight.ttf');
  @import url('/static/fonts/Metropolis-Light.ttf');
  @import url('/static/fonts/Metropolis-LightItalic.ttf');
  @import url('/static/fonts/Metropolis-Medium.ttf');
  @import url('/static/fonts/Metropolis-Regular.ttf');
  @import url('/static/fonts/Metropolis-SemiBold.ttf');
`;

Вы можете использовать этот шрифт, импортировав в свой компонент 

import React from 'react';
import MyFonts from './MyFonts';

function Example(){
    return (
        <div>
            <MyFonts />
            ....
        </div>
    )
}

export default Example
...