Next.js+tailwindcssにgoogleFont読み込ませる！

googleFontをtailwindで使用する為の設定の仕方を紹介します。
こちら課題の一環でLGMTを一定数取らないといけない試験でぜひLGMTを押していただけるとありがたいです。

googlefontでフォントを選択して@importの方でコピーする！

styles/globals.scssに読み込む

@tailwind base;
@tailwind components;
@tailwind utilities;
//読み込む
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans+JP:wght@500&display=swap');

tailwind.config.jsに読み込む

module.exports = {
    theme: {
        extend: {
            fontFamily: {
                roboto: ["Roboto"],
            },
        },
    },
}

使用する。

font-roboto
font-(設定したやつ)で使える

<div className="font-roboto">
テキスト
</div>