Javascript/NextJs

NextJs 14.1.0에서 TailwindCss NotoSans Font 설정하기

kimc 2024. 1. 20. 22:53

 

 

이번 글을 통해 배워갈 내용

  1. Next JS Tailwind css Font 설정

 

 

1. nextjs 설치

먼저 nextjs를 설치합니다

npx create-next-app@latest

 

2. NotoSans Font 다운로드

Noto Sans Korean Font를 다운로드합니다

https://github.com/bswsw/noto-sans-korean-webfont

 

GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer

Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creating an account on GitHub.

github.com

 

다운로드한 Font는 public fonts에 이동했습니다

 

3. CSS 설정

CSS 설정을 해줍니다

 

global.css

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

@layer base {
  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 100;
    font-style: normal;
    src: url("/fonts/NotoSans-Thin.eot?") format("eot"),
      url("/fonts/NotoSans-Thin.otf") format("opentype"),
      url("/fonts/NotoSans-Thin.woff") format("woff"),
      url("/fonts/NotoSans-Thin.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 200;
    font-style: normal;
    src: url("/fonts/NotoSans-Light.eot?") format("eot"),
      url("/fonts/NotoSans-Light.otf") format("opentype"),
      url("/fonts/NotoSans-Light.woff") format("woff"),
      url("/fonts/NotoSans-Light.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 300;
    font-style: normal;
    src: url("/fonts/NotoSans-DemiLight.eot?") format("eot"),
      url("/fonts/NotoSans-DemiLight.otf") format("opentype"),
      url("/fonts/NotoSans-DemiLight.woff") format("woff"),
      url("/fonts/NotoSans-DemiLight.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/NotoSans-Regular.eot?") format("eot"),
      url("/fonts/NotoSans-Regular.otf") format("opentype"),
      url("/fonts/NotoSans-Regular.woff") format("woff"),
      url("/fonts/NotoSans-Regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 500;
    font-style: normal;
    src: url("/fonts/NotoSans-Medium.eot?") format("eot"),
      url("/fonts/NotoSans-Medium.otf") format("opentype"),
      url("/fonts/NotoSans-Medium.woff") format("woff"),
      url("/fonts/NotoSans-Medium.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 700;
    font-style: normal;
    src: url("/fonts/NotoSans-Black.eot?") format("eot"),
      url("/fonts/NotoSans-Black.otf") format("opentype"),
      url("/fonts/NotoSans-Black.woff") format("woff"),
      url("/fonts/NotoSans-Black.woff2") format("woff2");
  }

  @font-face {
    font-family: "NotoSansKorean";
    font-weight: 900;
    font-style: normal;
    src: url("/fonts/NotoSans-Bold.eot?") format("eot"),
      url("/fonts/NotoSans-Bold.otf") format("opentype"),
      url("/fonts/NotoSans-Bold.woff") format("woff"),
      url("/fonts/NotoSans-Bold.woff2") format("woff2");
  }
}

 

4. layout.tsx 

layout.tsx 설정을 해줍니다

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className="font-['NotoSansKorean']">{children}</body>
    </html>
  );
}

 

5. tailwind.config.ts 

tailwind.config.ts 설정을 해줍니다

import type { Config } from "tailwindcss";

const config: Config = {
  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: {
        notosans: ["NotoSansKorean"],
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;

참조 및 인용

https://github.com/bswsw/noto-sans-korean-webfont

 

GitHub - bswsw/noto-sans-korean-webfont: Noto Sans Korean Webfont for Web Developer

Noto Sans Korean Webfont for Web Developer. Contribute to bswsw/noto-sans-korean-webfont development by creating an account on GitHub.

github.com

 

https://fonts.google.com/noto/specimen/Noto+Sans+KR

 

Noto Sans Korean - Google Fonts

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans KR is an unmodulated (“sans serif”) design for the Korean language u

fonts.google.com

 

블로그 추천 포스트

https://codemasterkimc.tistory.com/50

 

300년차 개발자의 좋은 코드 5계명 (Clean Code)

이번 글을 통해 배워갈 내용  좋은 코드(Clean Code)를 작성하기 위해 개발자로서 생각해볼 5가지 요소를 알아보겠습니다. 개요 좋은 코드란 무엇일까요? 저는 자원이 한정적인 컴퓨터 세상에서 좋

codemasterkimc.tistory.com

 

 

728x90