@font-face {
    font-family: Metropolis-TI;
    src: url('../fonts/Metropolis-ThinItalic.ttf');
  }
  
  @font-face {
    font-family: Metropolis-T;
    src: url('../fonts/Metropolis-Thin.ttf');
  }
  
  @font-face {
    font-family: Metropolis-LI;
    src: url('../fonts/Metropolis-LightItalic.ttf');
  }
  
  @font-face {
    font-family: Metropolis-L;
    src: url('../fonts/Metropolis-Light.ttf');
  }
  
  @font-face {
    font-family: Metropolis-R;
    src: url('../fonts/Metropolis-Regular.ttf');
  }
  
  @font-face {
    font-family: Metropolis-M;
    src: url('../fonts/Metropolis-Medium.ttf');
  }
  
  @font-face {
    font-family: Metropolis-SB;
    src: url('../fonts/Metropolis-SemiBold.ttf');
  }
  
  @font-face {
    font-family: Metropolis-B;
    src: url('../fonts/Metropolis-Bold.ttf');
  }
  
  @font-face {
    font-family: SF-SB;
    src: url('../fonts/SF-Pro-Display-Semibold.otf');
  }

  @font-face {
    font-family: SF-B;
    src: url('../fonts/SF-Pro-Display-Bold.otf');
  }

  @font-face {
    font-family: SF-H;
    src: url('../fonts/SF-Pro-Display-Heavy.otf');
  }

  @font-face {
    font-family: SF-L;
    src: url('../fonts/SF-Pro-Display-Light.otf');
  }

  @font-face {
    font-family: SF-LI;
    src: url('../fonts/SF-Pro-Display-LightItalic.otf');
  }

  @font-face {
    font-family: SF-T;
    src: url('../fonts/SF-Pro-Display-Thin.otf');
  }

  @font-face {
    font-family: SF-M;
    src: url('../fonts/SF-Pro-Display-Medium.otf');
  }