아리따

Next.js에서 아리따 웹폰트 적용하기

App Router 프로젝트에 아리따를 적용하는 가장 짧은 경로부터, Tailwind 연동과 next/font와의 관계, 첫 화면 흔들림을 줄이는 방법까지 순서대로 정리했습니다.

기본App Router

아리따 웹폰트는 CSS 파일 하나로 제공되므로 App Router에서는app/layout.tsx의 <head>에 링크를 넣으면 끝납니다. 별도 패키지를 설치할 필요가 없습니다.

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <head>
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

그다음 전역 CSS에서 font-family를 지정합니다. 기본 굵기로는font-weight: 500(Medium)을 권합니다. 아리따가 제공하는 굵기는 100·300·500·600·700이고 400은 없습니다. 400을 지정하면 브라우저가 매칭 규칙에 따라 500으로 대체하므로, 처음부터 500을 적어 두는 편이 명확합니다.

/* app/globals.css */
body {
  font-family: "Arita Dotum KR", sans-serif;
  font-weight: 500;
}

링크 태그를 쓰지 않고 CSS 안에서 불러오고 싶다면 @import도 됩니다. 다만 @import는 CSS 파일을 먼저 받은 뒤에야 글꼴 요청이 시작되므로 한 단계 늦습니다. 첫 화면 속도가 중요하면 링크 태그를 쓰세요.

/* app/globals.css — 링크 태그 대신 CSS에서 불러오는 방법 */
@import url("https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css");

body {
  font-family: "Arita Dotum KR", sans-serif;
  font-weight: 500;
}

TailwindIntegration

Tailwind CSS v4는 설정 파일 없이 CSS의 @theme 블록에서 글꼴을 등록합니다. --font-로 시작하는 변수를 선언하면 같은 이름의 font- 유틸리티가 자동으로 생깁니다.

/* app/globals.css — Tailwind v4 */
@import "tailwindcss";
@import url("https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css");

@theme {
  --font-arita: "Arita Dotum KR", sans-serif;
  --font-arita-buri: "Arita Buri KR", serif;
}
// 클래스로 사용
<h1 className="font-arita-buri font-semibold">아리따 부리 제목</h1>
<p className="font-arita">아리따 돋움 본문</p>

Tailwind v3라면 tailwind.config.ts의theme.extend.fontFamily에 등록합니다. 글꼴 이름에 공백이 있으므로 따옴표를 겹쳐 감싸야 합니다.

// tailwind.config.ts — Tailwind v3
import type { Config } from 'tailwindcss';

export default {
  content: ['./app/**/*.{ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        arita: ['"Arita Dotum KR"', 'sans-serif'],
        'arita-buri': ['"Arita Buri KR"', 'serif'],
      },
    },
  },
} satisfies Config;

next/fontComparison

Next.js를 쓰면 next/font가 떠오르지만, 아리따 CDN과는 역할이 겹치지 않습니다. 어느 쪽을 언제 쓰는지 표로 비교했습니다.

방식대상글자 단위 분할
next/font/google구글 폰트 목록에 있는 글꼴지원(구글 제공)
next/font/local프로젝트에 직접 넣은 폰트 파일직접 준비해야 함
아리따 CDN아리따 네 서체기본 제공

아리따는 구글 폰트에 없으므로 next/font/google로는 불러올 수 없습니다. next/font/local로 쓸 수는 있지만 그러려면 통짜 폰트 파일을 저장소에 넣어야 하고, 돋움 한 굵기가 769KB라 굵기 세 개면 2.3MB가 빌드 산출물에 포함됩니다. 글자 단위 분할을 원하면 직접 조각을 만들어야 합니다.

CDN 방식은 이 작업이 이미 끝나 있어 링크 한 줄로 끝나고, 실제로 쓰인 글자가 속한 조각만 내려받습니다. 절감 폭이 얼마인지는한글 웹폰트 용량 줄이기 문서에 실측값으로 정리했습니다.

두 방식을 함께 쓸 수도 있습니다. 로마자는 next/font/google로, 한글은 아리따 CDN으로 불러오고 font-family에 순서대로 나열하면 됩니다. 브라우저가 글자마다 앞선 글꼴에서 찾고 없으면 다음으로 넘어갑니다.

최적화Performance

연결을 미리 열어 두기

글꼴은 CDN이라는 다른 출처에서 오므로 DNS 조회와 TLS 연결이 새로 필요합니다.preconnect로 이 과정을 HTML 파싱과 겹쳐 진행시키면 글꼴 도착이 빨라집니다.

// app/layout.tsx — 글꼴 요청을 앞당기는 힌트
<head>
  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossOrigin="" />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css"
  />
</head>

preload는 권하지 않습니다. 분할 방식에서는 어떤 조각이 필요한지 브라우저가 렌더링 시점에 판단하므로, 미리 지정한 조각이 실제로는 쓰이지 않아 헛된 요청이 될 수 있습니다.

글꼴이 바뀔 때 생기는 흔들림 줄이기

아리따 CSS는 font-display: swap으로 선언되어 있습니다. 글꼴이 도착하기 전에는 시스템 글꼴로 글자를 먼저 보여주고, 도착하면 교체합니다. 글자가 안 보이는 시간이 없는 대신 교체 순간에 줄바꿈 위치가 달라지면서 레이아웃이 흔들립니다(CLS).

대체 글꼴의 크기를 아리따에 맞춰 두면 이 흔들림을 줄일 수 있습니다.size-adjust로 글자 폭을, ascent-override와descent-override로 줄 높이를 맞춥니다.

/* 대체 글꼴의 크기를 맞춰 글꼴 교체 시 흔들림을 줄인다 */
@font-face {
  font-family: "Arita Fallback";
  src: local("Apple SD Gothic Neo"), local("Malgun Gothic");
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 12%;
}

body {
  font-family: "Arita Dotum KR", "Arita Fallback", sans-serif;
}

위 수치는 시작점이며 서체와 대체 글꼴 조합에 따라 조정이 필요합니다. 브라우저 개발자 도구의 Performance 패널에서 Layout Shift 항목을 보며 값을 좁혀 가세요.

점검Troubleshooting

글꼴이 아예 적용되지 않는다

font-family 값의 철자를 확인하세요. 서체 이름은Arita Dotum KR, Arita Buri KR,Arita Sans LTN, Arita Sans SC입니다. 띄어쓰기와 대소문자가 정확히 일치해야 하고, KR·LTN같은 접미사를 빼면 매칭되지 않습니다.

굵기가 반영되지 않는다

아리따가 제공하는 굵기는 100·300·500·600·700입니다. 흑체는 300·500·700만 있습니다. 없는 값을 지정하면 브라우저가 CSS 글꼴 매칭 규칙에 따라 가장 가까운 굵기로 대체합니다. 400은 500으로, 800이나 900은 700으로 그려지므로 의도한 굵기와 달라 보일 수 있습니다. font-weight: bold는 700으로 해석되어 그대로 맞습니다.

일부 글자만 다른 글꼴로 보인다

서체마다 담당 문자가 다릅니다. Arita Sans LTN은 로마자 전용이라 한글이 없고, Arita Dotum KR에는 중국어 간체가 없습니다. 여러 문자를 함께 쓰려면 font-family에 필요한 서체를 모두 나열하거나, 네 서체를 한 번에 불러오는arita-dynamic-subset.css를 쓰세요.

개발 서버에서는 되는데 배포 후 안 된다

CDN URL에 버전을 고정했는지 확인하세요. @latest는 편하지만 새 버전이 올라오면 캐시 갱신 시점에 따라 동작이 달라질 수 있습니다. 프로덕션에서는 @1.0.1처럼 명시적으로 고정하는 편이 안전합니다.

더 보기Related