Why is the font in figma different than the one on the web

Question

I am having a problem that i can't resolve, i am using 'Poppins' font family. I have the design in figma , so i copied the exact same font weight same font size and all, but still on the web it is different it seems bolder or more blurry i can't explain it well.

Figma design:

Web design:

css:

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Thin.ttf) format('truetype');
    font-style: normal;
    font-weight: 100;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-ExtraLight.ttf) format('truetype');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Medium.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-SemiBold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 600;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Bold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 700;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-ExtraBold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 800;
}

@font-face {
    font-family: 'Poppins';
    src: url(fonts/Poppins-Black.ttf) format('truetype');
    font-style: normal;
    font-weight: 900;
}
  
* {
    font-family: 'Poppins',sans-serif;
}