Responsive social links profile using React

What are you most proud of, and what would you do differently next time?

Completing the project, first time using vite to setup a react project.

What challenges did you encounter, and how did you overcome them?

Deploying to github pages, required adding a workflow, followed instructions on the vite documentation site

What specific areas of your project would you like help with?

Not sure how to use Inter-VariableFont_slnt,wght.ttf font file in fonts. I tried using it in @font-face in css:

@font-face {
  font-family: 'Inter';
  font-display: swap;
  src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

But it would not render Inter fonts but Times New Roman instead, I got around by having multiple font faces: Inter-Bold.ttf/Inter-Regular.ttf etc.

Any help on how to use this ttf file, so that I only have to import 1 font-face only and change their font-weight would be appreciated!