블로그에 폰트 적용하기: Pretendard, Jetbrains Mono

Pretendard

Pretendard 글꼴은 웹/Android/iOS 등 다양한 환경에서 사용할 수 있는 system-ui 대체 글꼴입니다. 상업적, 비상업적 용도 모두 사용 가능하며 가독성이 뛰어납니다.

Jetbrains Mono

Jetbrains Mono 글꼴은 프로그래밍 코드에 특화된 글꼴로 콘텐츠 내 코드 블럭에 사용할 때 가독성이 뛰어납니다.

블로그 기본 글꼴 변경

코드는 Jetbrains mono 를 적용하고, 나머지 콘텐츠는 모두 Pretendard 로 적용하는 방법은 /layout/partials/head/custom.html 을 만들고 아래 코드를 복붙해줍니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- Pretendard Variable (본문/전체 UI) -->
<link rel="stylesheet" as="style" crossorigin
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/variable/pretendardvariable.css">

<!-- JetBrains Mono (코드 블록) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap">

<style>
    :root {
        /* 기본/본문 글꼴 */
        --base-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;

        --article-font-family: var(--base-font-family);

        /* 코드 블록 글꼴 */
        --code-font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
            Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
</style>

둘다 웹폰트로 사용할 수 있고, stack 테마에서 커스텀 헤더를 지원하기 때문에 코드를 복붙하는 것으로 적용이 완료 됩니다.