이번 글을 통해 배워갈 내용
- 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
'Javascript > NextJs' 카테고리의 다른 글
| Nextjs Tailwind 에서 aos tos 대신 scroll animation 직접 구현해보기 (0) | 2024.01.15 |
|---|---|
| Nextjs Tailwind CSS에 다크모드 적용 3분컷 방법 (0) | 2023.04.14 |
| Nextjs Tailwind CSS에 사용자 지정 글꼴 적용하기 23년 최신 방법 (0) | 2023.04.08 |
| Next Js에서 Do not use <img> 오류 해결 하는 2가지 방법 (0) | 2021.08.07 |
