How to register multiple font weights in styled-components?

This is how I was able to do it

import { createGlobalStyle } from 'styled-components'
import { GalanoGrotesqueMedium, GalanoGrotesqueRegular } from 'assets/fonts'

const GlobalStyles = createGlobalStyle`
    @font-face {
        font-family: 'GalanoGrotesqueRegular';
        src: url(${GalanoGrotesqueRegular}) format('truetype');
    }
    @font-face {
        font-family: 'GalanoGrotesqueMedium';
        src: url(${GalanoGrotesqueMedium}) format('truetype');
    }
    * {
        font-family: 'GalanoGrotesqueRegular';
    }
`

export default GlobalStyles

where I am importing .ttf fonts

This is my assets/fonts

export {default as GalanoGrotesqueMedium} from './fonts/GalanoGrotesqueMedium.ttf'
export {default as GalanoGrotesqueRegular} from './fonts/GalanoGrotesqueRegular.ttf'

Based on your code, I would try naming the different fonts and then adding them to the font-families, as such:

export const GlobalStyle = createGlobalStyle`
  @font-face {
     font-family: 'Inter-Regular';
     src: url(${Inter}) format("truetype"),
     url(${InterWoff}) format("woff"),
     url(${InterWoff2}) format("woff2");
     font-weight: normal;
     font-style: normal;
  };
  @font-face {
    font-family: 'Inter-500';
    src: url(${InterMedium}) format('truetype')
    url(${InterMediumWoff}) format('woff'),
    url(${InterMediumWoff2}) format('woff2');
    font-weight: 500;
    font-style: normal;
  };
  @font-face {
    font-family: 'Inter-Bold';
    src: url(${InterBold}) format('truetype')
    url(${InterBoldWoff}) format('woff'),
    url(${InterBoldWoff2}) format('woff2');
    font-weight: bold;
    font-style: normal;
  }
  body {
  margin: 0;
  font-family: 'Inter-Regular', 'Inter-500', 'Inter-Bold', -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;
  }

This is how I do it:

fontsCSS.ts

import { css } from "styled-components";

export const fontsCSS = css`
  @font-face {
    font-family: "Inter";
    src: url('/fonts/Inter-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: "Inter";
    src: url('/fonts/Inter-Semibold.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: block;
  }
`;

GlobalStyles.ts

import { createGlobalStyle } from "styled-components";

import { resetCSS } from "@styles/resetCSS";
import { baseCSS } from "@styles/baseCSS";
import { fontsCSS } from "@styles/fontsCSS";

const GlobalStyles = createGlobalStyle`
  ${resetCSS}
  ${baseCSS}
  ${fontsCSS}
`;

export default GlobalStyles;

App.tsx

import React from "react";
import { theme } from "@styles/theme";
import { ThemeProvider } from "styled-components";
import GlobalStyles from "@styles/GlobalStyles";

interface App {}

const App: React.FC<App> = (props) => {
  console.log("Rendering App...");

  return(
    <ThemeProvider theme={theme}>
      <GlobalStyles/>
      <RestOfTheApp/>
    </ThemeProvider>
  );
};

export default React.memo(App);

1. Use exact font-weights in font-family declarations instead of normal, bold.
2. When using font-family, declare font-weight as well. Browser will pick the correct font file based on the combination of font-family and font-weight.