Как я могу импортировать локальный шрифт в Reactjs со стилизованными компонентами?

Question

import { createGlobalStyle } from "styled-components";

createGlobalStyle`
  @font-face {
    font-family: 'Segoe Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: url('SegoePro-Regular.woff') format('woff');
}`

После этого я добавляю import "./components/GlobalStyles"; в index.js

Я пытался использовать его в некоторых компонентах с font-family: Segoe Pro Regular;, но он не работает

---

Я такжепробовал с импортом

import Font from "./SegoePro-Regular.woff"
import { createGlobalStyle } from "styled-components";

    createGlobalStyle`
      @font-face {
        font-family: 'Segoe Pro Regular';
        font-style: normal;
        font-weight: normal;
        src: url(${Font}) format('woff');
    }`

Answer 1

font-family: Segoe Pro Regular; неверный код, попробуйте:

font-family: 'Segoe Pro Regular';

Вот рабочий пример для справки:

import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import MajorMonoTTF from './MajorMonoDisplay-Regular.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Major Mono Display';
    src: url(${MajorMonoTTF}) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
  }
  h1 {
    font-family: 'Major Mono Display';
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <h1>Cool Title</h1>
  </>
);

ReactDOM.render(<App />, document.getElementById('root'));