title: custom font is loaded but not applying in react typescript
body: <p>I've developing react typescript project and trying to load custom font.
  But I can see font is loaded in Network tab but font is still not changed to what I want.
  I tried many related post in StackOverflow but still the same.
  The last I did is <a href="https://dev.to/alaskaa/how-to-import-a-web-font-into-your-react-app-with-styled-components-4-1dni" rel="nofollow noreferrer">this link</a>.
  Here's my current code I added for font.</p>
  <p>assets/fonts/globalfonts.ts</p>
  <pre><code>import { url } from 'inspector';
  import {createGlobalStyle} from 'styled-components';
  
  export const GlobalFonts = createGlobalStyle`
    @font-face {
      font-family: 'Trixie Plain';
      font-style: normal;
      font-weight: 400;
      src: url(&quot;./assets/fonts/Trixie-Plain.otf&quot;) format('opentype')
    }
  `
  </code></pre>
  <p>src/components/TopBar/components/Nav.tsx</p>
  <pre><code>import React from 'react'
  import { NavLink } from 'react-router-dom'
  import styled from 'styled-components'
  import { GlobalFonts } from '../../../assets/fonts/globalfonts'
  
  const Nav: React.FC = () =&gt; {
    return (
      &lt;StyledNav&gt;
        &lt;GlobalFonts /&gt;
        &lt;StyledLink exact activeClassName=&quot;active&quot; to=&quot;/&quot;&gt;
          Home
        &lt;/StyledLink&gt;
      &lt;/StyledNav&gt;
    )
  }
  
  const StyledNav = styled.nav`
    align-items: center;
    display: flex;
    font-family: 'Trixie Plain';
  `
  </code></pre>
  <p><a href="https://i.stack.imgur.com/gsn6e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gsn6e.png" alt="enter image description here" /></a></p>
  <p>[<img src="https://i.stack.imgur.com/S8jH6.png" alt="css][1]" /></p>