title: Why is my local font not being applied with Emotion global styling?
body: <p>I am trying to use a locally hosted font in a React project that utilizes Emotion, and its <a href="https://emotion.sh/docs/globals" rel="nofollow noreferrer">Global component</a>. This method works great for web fonts, like <a href="https://fonts.google.com/" rel="nofollow noreferrer">Google Fonts</a>, but when I downloaded that same font and tried to apply it as a local <code>.ttf</code> file using <code>@font-face</code>, I couldn't achieve the same result.</p>
  
  <p>Here's the important file, <strong><code>App.js</code></strong>:</p>
  
  <pre><code>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&amp;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 (
      &lt;div className="App"&gt;
        &lt;Global styles={GlobalStyles} /&gt;
        &lt;FromGoogle&gt;This text's font family is from Google.&lt;/FromGoogle&gt;
        &lt;FromLocal&gt;
          This text's font family should be the same, except it comes from a local
          font file, and it's not working.
        &lt;/FromLocal&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>For some reason, the text in <code>FromGoogle</code> uses the Google font fine, while the text from <code>FromLocal</code> doesn't. My first thought was that it's an issue with the path, but if it is, I couldn't tell.</p>
  
  <p>Here's the <a href="https://github.com/TrevLev/react-emotion-local-font" rel="nofollow noreferrer">full project on GitHub</a>. I used Create React App, and removed all the irrelevant boilerplate.</p>