css - Não é possível carregar a fonte usando os estilos globais em styled components

Eu gostaria de usar Inter como uma fonte global para toda a aplicação. Estou usando React, Typescript e Styled Component. A fonte foi baixada do serviço Fontsquirrel e está carregada no arquivo globalStyles.

No Firefox, tenho o seguinte erro. Não acho que os arquivos estejam de alguma forma corrompidos.

downloadable font: rejected by sanitizer (font-family: "Inter" style:normal weight:400 stretch:100 src index:0) source: http://localhost:3000/fonts/Inter-Regular.ttf

No Chrome

Failed to decode downloaded font: http://localhost:3000/fonts/Inter-Regular.ttf

Arquivo de estilos globais que é usado no arquivo raiz do React.

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-Bold.ttf') format("truetype");
  }
  @font-face {
    font-family: 'Inter';
     src: url('../fonts/Inter-Medium.ttf') format("truetype");
  }
  @font-face {
    font-family: 'Inter';
     src: url('../fonts/Inter-Regular.ttf') format("truetype");

  }
  body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
`;