Playfair Display font look different

I use Playfair Display font from google font in my project, but font is look different from google font. I already search but I can't fix it. I use Next JS and Tailwind in my project.

this is my code

tailwind.config.ts

fontFamily: {
      'prompt':['Prompt', 'sans-serif'],
      'playfair': ['Playfair Display', 'serif'],
    }

cover.tsx

<div className="">
                    <p className="font-normal text-[250px] mt-[-100px] ml-[300px]">PORT</p>
                    <p className="font-playfair italic text-[230px] text-secondary">folio</p>
                </div>

You need to import the font in your global.css page. I usually put it at the very top, so your global.css file will look like this:

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

You can find that import string by clicking "Get Embed Code" on the google font page, then selecting the "@import" radio button. You should also remove the quotation marks around the fontFamily name, so in your case, it should look like this:

fontFamily: {
  prompt:['Prompt', 'sans-serif'],
  playfair: ['Playfair Display', 'serif'],
}

Do those things, and it should work just fine.