글꼴과 글자 크기

이전 원문: 글꼴과 글자 크기 게시일: 2023-7-30 마지막 편집: 2024-6-17 원래 분류: 🛠 사이트 설정 요약: 웹사이트 글꼴 설정을 소개합니다.

원문에는 GitHub 사용자 첨부 이미지가 있었으나, 마이그레이션 시점에 원본 링크가 만료되어 문맥만 텍스트로 보존합니다.

💡 4.4.3 및 이전 버전에서는 blog.config.js를 수정해야만 글꼴을 바꿀 수 있었습니다. 4.4.4 이후 버전에서는 NOTION_CONFIG로도 설정할 수 있습니다. 구체적인 설정 방법은 문서 하단의 NOTION_CONFIG 글꼴 수정 부분을 참고하세요.

기본 글꼴

시스템 기본값은 산세리프 글꼴입니다. blog.config.js에서 다음 설정으로 글꼴을 직접 지정할 수 있습니다.

JavaScript

// START ************웹사이트 글꼴*****************
// ['font-serif','font-sans'] 두 가지를 선택할 수 있으며, 각각 세리프와 산세리프입니다. 참고: https://www.jianshu.com/p/55e410bd2115
// 뒤에 공백으로 이어지는 font-light는 글꼴 두께입니다. 비워두면 기본 두께를 사용합니다. 참고: https://www.tailwindcss.cn/docs/font-weight
FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans font-light',

// 글꼴 CSS 예: https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
// 서드파티 글꼴을 불러와야 한다면 여기에 URL을 추가합니다.
FONT_URL: [
  // 'https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css',
  'https://fonts.googleapis.com/css?family=Bitter&display=swap',
  'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
  'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
],

// 산세리프 글꼴 예: '"LXGW WenKai"'. 글꼴 이름에 공백이 있으면 큰따옴표로 감싸야 합니다.
FONT_SANS: [
  // '"LXGW WenKai"',
  '"PingFang SC"',
  '-apple-system',
  'BlinkMacSystemFont',
  '"Hiragino Sans GB"',
  '"Microsoft YaHei"',
  '"Segoe UI Emoji"',
  '"Segoe UI Symbol"',
  '"Segoe UI"',
  '"Noto Sans SC"',
  'HarmonyOS_Regular',
  '"Helvetica Neue"',
  'Helvetica',
  '"Source Han Sans SC"',
  'Arial',
  'sans-serif',
  '"Apple Color Emoji"'
],

// 세리프 글꼴 예: '"LXGW WenKai"'
FONT_SERIF: [
  // '"LXGW WenKai"',
  'Bitter',
  '"Noto Serif SC"',
  'SimSun',
  '"Times New Roman"',
  'Times',
  'serif',
  '"Segoe UI Emoji"',
  '"Segoe UI Symbol"',
  '"Apple Color Emoji"'
],
FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 아이콘 글꼴 주소입니다. 예: /css/all.min.css, https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css

// END ************웹사이트 글꼴*****************

글꼴 사용 방법

먼저 font-sans 또는 font-serif 중 하나를 정한 뒤, 대응하는 FONT_SANS 또는 FONT_SERIF에 글꼴 이름을 설정합니다. 세리프 글꼴은 공식 사이트처럼 격식 있는 장면에 어울리고, 산세리프 글꼴은 더 가볍고 편안한 인상을 줍니다. 사이트 성격에 맞게 선택하세요.

예를 들어 font-serif를 사용한다면 FONT_SERIF에 해당 글꼴 이름을 설정해야 합니다.

Java

// 세리프 글꼴 예: '"LXGW WenKai"'
FONT_SERIF: [
  // '"LXGW WenKai"',
  'Bitter',
  '"Noto Serif SC"',
  'SimSun',
  '"Times New Roman"',
  'Times',
  'serif',
  '"Segoe UI Emoji"',
  '"Segoe UI Symbol"',
  '"Apple Color Emoji"'
],

웹 페이지의 문자는 글꼴 이름 배열의 순서대로 렌더링됩니다. 현재 글꼴에서 문자를 찾을 수 없으면 다음 글꼴을 시도합니다. 위 예시의 순서는 'Bitter' -> '"Noto Serif SC"' -> 'SimSun' -> '"Times New Roman"'입니다.

FONT_STYLE은 글꼴 두께도 설정할 수 있습니다. font-light는 얇은 글꼴을 의미하며, 설정하지 않으면 기본 두께를 사용합니다. 더 자세한 내용은 TailwindCSS font-weight를 참고하세요.

설정 설명

수정 예시

구버전에서는 blog.config.js를 직접 수정하는 방식을 사용했습니다. 새 버전에서는 NOTION_CONFIG로 설정할 수 있습니다. 아래처럼 설정하면 웹사이트 기본 글꼴이 LXGW WenKai로 표시됩니다. 굵게 표시된 부분이 수정할 내용입니다.

JavaScript

// START ************웹사이트 글꼴*****************

FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans', // ['font-serif','font-sans'] 두 가지를 선택할 수 있으며, 각각 세리프와 산세리프입니다. 참고: https://www.jianshu.com/p/55e410bd2115
// 글꼴 CSS 예: https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css
FONT_URL: [
  **'https://npm.elemecdn.com/lxgw-wenkai-webfont@1.6.0/style.css',**
  'https://fonts.googleapis.com/css?family=Bitter&display=swap',
  'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap',
  'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300&display=swap'
],
// 산세리프 글꼴 예: '"LXGW WenKai"'
FONT_SANS: [
  **'"LXGW WenKai"'**,
  '"PingFang SC"',
  '-apple-system',
  'BlinkMacSystemFont',
  '"Hiragino Sans GB"',
  '"Microsoft YaHei"',
  '"Segoe UI Emoji"',
  '"Segoe UI Symbol"',
  '"Segoe UI"',
  '"Noto Sans SC"',
  'HarmonyOS_Regular',
  '"Helvetica Neue"',
  'Helvetica',
  '"Source Han Sans SC"',
  'Arial',
  'sans-serif',
  '"Apple Color Emoji"'
],
// 세리프 글꼴 예: '"LXGW WenKai"'
FONT_SERIF: [
  **'"LXGW WenKai"'**,
  'Bitter',
  '"Noto Serif SC"',
  'SimSun',
  '"Times New Roman"',
  'Times',
  'serif',
  '"Segoe UI Emoji"',
  '"Segoe UI Symbol"',
  '"Apple Color Emoji"'
],
FONT_AWESOME: process.env.NEXT_PUBLIC_FONT_AWESOME_PATH || 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css', // font-awesome 아이콘 글꼴 주소입니다. 예: /css/all.min.css, https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css

// END ************웹사이트 글꼴*****************

💡 글꼴 이름 중간에 공백이 있다면 큰따옴표로 감싸야 합니다. 공백이 없는 글꼴: Bitter 공백이 있는 글꼴: '"LXGW WenKai"'

NOTION_CONFIG로 글꼴 수정

FONT_URL 설정을 직접 추가하면 기본값을 덮어쓸 수 있습니다. 웹 글꼴 경로를 직접 구성할 때 편리합니다.
또한 sans 또는 serif 외의 글꼴을 직접 정의하려면 GLOBAL_CSS에서 font-family CSS 스타일을 설정하는 방식을 권장합니다.

글자 크기 수정

웹 페이지의 글자 크기를 조정하려면 어떻게 해야 할까요? 두 가지 방법이 있습니다. 하나는 CSS로 특정 요소의 글자 크기를 직접 지정하는 방법이고, 다른 하나는 tailwindCSS 설정을 조정해 전체 글자 크기 체계를 바꾸는 방법입니다.

방법 1: 개별 요소 조정 notion-config의 사용자 지정 스타일 설정이나 custom.css에서 특정 요소의 글자 크기를 직접 지정합니다.

CSS

#bannerGroup a div {
    color: red;
    font-size: 2rem;
}

효과는 다음과 같습니다. Untitled

본문 글꼴 글 본문 글자 크기만 조정하려면 CSS를 추가하면 됩니다. notionconfig에서 GLOBAL_CSS를 수정하세요. 기본 글자 크기는 1rem입니다.

CSS

.notion {
  font-size: 1.5rem;
}

이 설정은 본문 영역에만 영향을 줍니다. Untitled

방법 2: 프로젝트 기반 설정 변경. 고급 사용법이므로 신중하게 시도하세요. tailwind.config.js에 아래 설정을 추가합니다. 여기서 base는 기본 글자 크기이고, 나머지는 프로젝트에서 사용하는 더 크거나 작은 글자 크기입니다. 이 방법은 권장하지 않습니다. 전체 글자 크기는 테마 스타일과 맞물려 있으므로 임의로 조정하면 디자인 균형이 어색해질 수 있습니다.
1. 테마의 BaseLayout에서 전역 기본 글꼴 text-base를 설정합니다. 예를 들어 /theme/heo/index.js의 <LayoutBase> 내부는 다음과 같습니다.

HTML

&lt;div
  id="theme-heo"
  className={`${siteConfig('FONT_STYLE')} text-base bg-[#f7f9fe] dark:bg-[#18171d] h-full min-h-screen flex flex-col scroll-smooth`}
&gt;
...
&lt;/div&gt;

tailwind.config.js를 수정합니다.

Untitled

아래 코드에서 base를 1.5rem으로 조정하면 전체 글자 크기가 조금 커집니다.

Bash

fontSize: {
      xs: '.75rem',
      sm: '.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem'
    },

원문 링크

https://docs.tangly1024.com/article/notion-next-web-font

글꼴과 글자 크기 ​

기본 글꼴 ​

글꼴 사용 방법 ​

설정 설명 ​

수정 예시 ​

NOTION_CONFIG로 글꼴 수정 ​

글자 크기 수정 ​

원문 링크 ​