๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

React

[ Next.js ] Next13์—์„œ ์ปค์Šคํ…€ Font ์„ธํŒ…ํ•˜๊ธฐ. (App Router ๊ธฐ์ค€)

 

ํšŒ์‚ฌ์—์„œ ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ Next13์„ ๋„์ž…ํ•˜์—ฌ ๋งŒ๋“ค๊ธฐ๋กœ ๊ฒฐ์ •ํ•˜์—ฌ ๊ฐœ๋ฐœ ์ง„ํ–‰์ค‘์—, ์šฐ๋ฆฌ๋Š” Google Font๊ฐ€ ์•„๋‹Œ Local Font๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜์–ด, ์‚ฝ์งˆ์„ ์กฐ๊ธˆ ํ•˜๋‹ค๊ฐ€... ์„ธํŒ…ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•˜๋ ค ํ•œ๋‹ค.

 

 

 

์šฐ์„ , Next ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ App Router ์‚ฌ์šฉ ๋ฐฉ์‹์œผ๋กœ Font๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ถ€๋ถ„์„ ๋ณด๋ฉด

1. Google Font๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜, 2. Local Font๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ํฌ๊ฒŒ ๋‚˜๋‰œ๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋ ค๋Š” Font๋Š” Pretendard ์˜€๋Š”๋ฐ, Google Font์— ์—†๋Š” ํฐํŠธ์—ฌ์„œ Local Font๋ฅผ ์ ์šฉํ•ด์•ผ ํ–ˆ๋‹ค...^_ใ… 

๋งŒ์•ฝ Google Font์—์„œ ์ง€์›ํ•˜๋Š” ํฐํŠธ์ผ ์ˆ˜ ์žˆ์œผ๋‹ˆ ํ•ด๋‹น ์‚ฌ์ดํŠธ์—์„œ ์„œ์น˜ํ•ด๋ณธ ํ›„ ์—†๋‹ค๋ฉด Local Font๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฑธ๋กœ.... (Google Font ์‚ฌ์ดํŠธ ๋ฐ”๋กœ๊ฐ€๊ธฐ)

 

Google Font๋‚˜ Local Font๋‚˜ Next์—์„œ๋Š” ๋ชจ๋‘ Variable Font(๊ฐ€๋ณ€ํฐํŠธ)๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฒƒ์„ ๊ถŒ์žฅํ•œ๋‹ค.

Flexibleํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด Variable Font๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ํ•˜์ž...!

(Variable Font๋Š” ํฐํŠธ ํŒŒ์ผ์•ˆ์— ์—ฌ๋Ÿฌ ๊ฐ€์ง€ font-weigh, ์Šคํƒ€์ผ, ๋„ˆ๋น„ ๋“ฑ ๋‹ค์–‘ํ•œ ๋ณ€ํ˜•์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ๋Š” ํฐํŠธ ํ˜•์‹์ด๋‹ค. - chatGPT)

 

 

 

 

 

 

Local Font Setting

 

Local Font ์„ธํŒ…ํ•˜๋Š” ๋ถ€๋ถ„ ์ฐธ๊ณ  ๋ฌธ์„œ

-> Local Fonts - nextjs.org 

 

 

1. app/layout.tsx์—์„œ next/font/local ๊ฒฝ๋กœ์— ์žˆ๋Š” localFont๋ฅผ  import ํ•˜๊ณ , localFont์˜ src์†์„ฑ์— ๋‚ด local ํฐํŠธ ๊ฒฝ๋กœ๋ฅผ ์ ์–ด์ค€๋‹ค. ์ด๋•Œ ์ ์šฉํ•  ํฐํŠธ ํŒŒ์ผ์€ app/ ๋””๋ ‰ํ† ๋ฆฌ ์•ˆ์—์„œ ๋„ฃ์–ด์ฃผ๋Š”๊ฑธ ์ถ”์ฒœํ•œ๋‹ค. (์˜ˆ์‹œ: app/fonts/my-font-file.woff)

 

 

// app/layout.tsx

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './Myfont.woff2',
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

 

 

 

 

 

2. ๋‹ค์–‘ํ•œ ํฐํŠธ ํŒจ๋ฐ€๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด src๋ฅผ array ํ˜•ํƒœ๋กœ ์„ ์–ธํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.

 

// app/layout.tsx

const roboto = localFont({
  src: [
    {
      path: './Myfont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Myfont-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Myfont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Myfont-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

 

 

 

 

 


 

 

 

 

Web Font Setting - Pretendard

 

๋‚˜๋Š” Next์—์„œ ์ถ”์ฒœํ•˜๋Š” ๋ฐฉ์‹๋Œ€๋กœ Variable Font๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ์–ด์„œ Pretendard ํฐํŠธ์˜ Variable Font๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด์•˜๋‹ค.

Pretendard ํ™ˆํŽ˜์ด์ง€

 

 

 

์šด์ด ์ข‹๊ฒŒ๋„ ๋‚ด๊ฐ€ ์ ์šฉํ•˜๋ ค๋Š” ํฐํŠธ๋Š” GitHub์— ์›นํฐํŠธ ์‚ฌ์šฉ Docs๊ฐ€ ์žˆ์—ˆ๋‹ค..!!

Pretendard ๋‹ค์ด๋‚˜๋ฏน ์„œ๋ธŒ์…‹

 

๋‚˜๋Š” CDN์„ ์ด์šฉํ•˜์—ฌ globals.css ์— import ํ›„, ์ „์ฒด ์Šคํƒ€์ผ์— ์ ์šฉ์‹œ์ผœ์ฃผ์—ˆ๋‹ค.

 

/* globals.css */

@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.7/static/pretendard-dynamic-subset.css");


* {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

 

 

 

 

 

 

 

 

์™ผ์ชฝ์˜ Pretendard Variable Font ์ ์šฉ ๋ชจ์Šต, ์˜ค๋ฅธ์ชฝ์˜ font-family ์†์„ฑ์„ ๋ณด๋‹ˆ ์ž˜ ์ ์šฉ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค -!

 

 

 

 

 

 


 

๐ŸŒธ ์ถœ์ฒ˜ ๐ŸŒธ

 

Local Fonts - Nextjs.org