next js 14 + tailwindCSS폰트적용하기 2

이번에 포트폴리오 사이트를 만들면서 로컬 폰트가 아닌 눈누에서 제공하는 폰트는 어떻게 사용해야되나

하면서 여기저기 찾아보다가 방법을 터득해서 까먹을까봐 작성합니다.

 

 

globals.css

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


@font-face {
  font-family: "PretendardVariable";
  src: url(/src/app/_fonts/PretendardVariable.woff2);
}

@font-face {
  font-family: "LOTTERIACHAB";
  src: url(/src/app/_fonts/chab.otf);
}

@font-face {
  font-family: "LeferiPoint-BlackA";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-BlackA.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

위에 두개는 로컬경로고

아래는 눈누에서 가져온 경로

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        pre: ["--font-PretendardVariable"],
        gothic: ["DOSGothic"],
        chabb: ["LOTTERIACHAB"],
        leferi: ["LeferiPoint-BlackA"],
        nexon: ["NEXON Lv1 Gothic OTF"],
        dnf: ["DNFBitBitv2"],
      },
      colors: {
        bgblack: "#121212",
        customgreen: "#06df72",
        customorange: "#ff5500",
        custompurple: "#694aff",
        custompink: "#ff80ee",
      },
    },
  },
  plugins: [],
};

 

theme -> extend -> fontFamily 작성해주고

내가 사용할 이름을 설정해줍니다

대괄호 안에 있는 이름은 globals.css에 font-family에 사용한 이름 그대로 작성해주면 됩니다

 

설정이 끝났다면 font까지만 치면 자동완성으로 뜹니다

 

정말 쉽고 간다합니다... 리액트 + 테일윈드css도 이런식으로 설정하면 끝.

로컬폰트도 이런식으로 설정할수있음

 

아마 넥스트Js에서 제공하는 최적의 방법이랑은 좀 달라서 본인이 선호하는 방법으로 사용하면 되지않을까 싶습니다.

 

끝!