font looks different on website than on Google font website

Question

I am currently trying to use the 'Josefin Sans' font in a website I am developing using TailwindCSS, NextJS and Typescript. The font looks noticeably different on my website than on my Figma design wireframe and the Google fonts website. I have attached two images to show the difference in appearance font in Google fonts, font in my website.

Can anyone give an explanation on why this is happening and/or a solution on how to fix it?

I have imported the font from google using the @import option

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Red+Hat+Display&family=Red+Hat+Text:wght@400;500&display=swap');

and extending it in tailwind.config.ts:

  theme: {
    extend: {
      fontFamily: {
        josefin: ["Josefin Sans", "sans-serif"],
      },
    },
  },

and using it as so: <p className='font-josefin text-7xl font-normal text-black text-center'>Example</p>

Answer 1

The key should be sans.not josefin

fontFamily:{
    sans: ["Josefin Sans", "sans-serif"]
}