Почему мой локальный шрифт не применяется с глобальным стилем Emotion? - PullRequest
Новая
       47

Почему мой локальный шрифт не применяется с глобальным стилем Emotion?

0 голосов
/ 09 февраля 2020

Я пытаюсь использовать локально размещенный шрифт в проекте React, который использует Emotion и его Глобальный компонент . Этот метод отлично подходит для веб-шрифтов, таких как Google Fonts , но когда я скачал этот же шрифт и попытался применить его как локальный файл .ttf с использованием @font-face, я не смог добиться того же результата .

Вот важный файл, App.js: 

import React from "react";

import { Global, css } from "@emotion/core";
import styled from "@emotion/styled";

const GlobalStyles = css`
  @import url("https://fonts.googleapis.com/css?family=Dancing+Script&display=swap");

  @font-face {
    font-family: "Local Font";
    src: url("fonts/DancingScript-Regular.ttf");
  }

  * {
    text-align: center;
  }
`;

const FromGoogle = styled.h1`
  font-family: "Dancing Script";
`;

const FromLocal = styled.h1`
  font-family: "Local Font";
`;

function App() {
  return (
    <div className="App">
      <Global styles={GlobalStyles} />
      <FromGoogle>This text's font family is from Google.</FromGoogle>
      <FromLocal>
        This text's font family should be the same, except it comes from a local
        font file, and it's not working.
      </FromLocal>
    </div>
  );
}

export default App;

По некоторым причинам, текст в FromGoogle использует шрифт Google отлично, а текст от FromLocal нет. Моей первой мыслью было, что это проблема с путем, но если это так, я не могу сказать.

Вот полный проект на GitHub . Я использовал приложение Create React и удалил все ненужные шаблоны.

...