title: How to use @font-face in styled-components with React and Typescript?
body: <p>I'm trying to get fonts to work in <code>React</code> with <code>TypeScript</code> and <code>styled-components</code>.</p>
  <p>The <code>GlobalStyle.ts</code> looks the following:</p>
  <pre><code>import { createGlobalStyle } from &quot;styled-components&quot;;
  
  const GlobalStyle = createGlobalStyle`
     @font-face {
       font-family: 'Roboto';
       font-style: normal;
       font-weight: 300;
       src: url('./fonts/roboto-v27-latin-300.eot'); /* IE9 Compat Modes */
       src: local(''),
            url('./fonts/roboto-v27-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./fonts/roboto-v27-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
            url('./fonts/roboto-v27-latin-300.woff') format('woff'), /* Modern Browsers */
            url('./fonts/roboto-v27-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
            url('./fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
     }
  
     *{
          color: red;
          font-family: &quot;Roboto&quot;;
     }
     `;
  
  export default GlobalStyle;
  </code></pre>
  <p><code>My index.tsx</code> looks like this:</p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  import GlobalStyle from &quot;./GlobalStyle&quot;;
  
  ReactDOM.render(
      &lt;React.StrictMode&gt;
          &lt;GlobalStyle /&gt;
          &lt;App /&gt;
      &lt;/React.StrictMode&gt;,
      document.getElementById(&quot;root&quot;)
  );
  
  </code></pre>
  <p>I removed some lines from both files that were unnecessary in this context.
  Both files are at the same level in the directory.
  The files for the fonts are all downloaded in a folder called &quot;fonts&quot;</p>
  <hr />
  <p>&quot;Normal&quot; styling works like the &quot;color: red;&quot; in <code>GlobalStyles.ts</code>.
  However, I simply cannot get the font to load. Does anyone know how to fix this? If you need any more information, just tell me and I will provide it!</p>