본문 바로가기
취미와 잡담

블로그 제목을 영월체로 바꿔 보았다

글: 논어일기 2026. 1. 16.
반응형

영월은 두 번이나 근무해서 아주 정이 많이 가는 도시다. 우연히 영월체를 알게 되어 내려받아 보았다. '눈누'를 찾아보니 웹폰트로도 만들어져 있다.

손글씨스러운 글꼴을 본문에 쓰면 가독성이 떨어진다. 늙어서인가 이제 블로그 스킨을 편집하기도 귀찮다. ㅠㅠ

https://www.yw.go.kr/www/contents.do?key=1500

 

대표홈페이지 - 서체

영월체 영월체는 영월의 아름다운 자연을 글꼴에 담아 제작하였습니다.부드러운 곡선은 동강과 서강, 요선암에 흐르는 물길을 닮았고, 단단한 직선은 석회암 절벽 선돌처럼 우뚝 선 바위를 떠

www.yw.go.kr

 

블로그에 웹폰트를 적용하는 방법은 챗지피티가 알려 준다.

티스토리·워드프레스 블로그 스킨에 웹폰트 적용하는 기본 방법을 단계별로 정리해 줄게.

웹폰트 선택

가장 많이 쓰는 곳은 Google Fonts와 눈누(nunu).

폰트를 고르면 보통

  • @import 방식
  • <link> 방식
  • @font-face 방식 중 하나를 제공한다.

웹폰트 불러오기

방법 ① <link> 방식 (가장 안정적)

HTML의 <head> 영역에 추가

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

방법 ② @import 방식

CSS 파일 맨 위에 추가

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

⚠️ 속도 면에서는 <link> 방식이 조금 더 낫다.

방법 ③ @font-face 방식 (눈누 폰트 자주 사용)

@font-face {
    font-family: 'SUIT';
    src: url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/SUIT-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

CSS에 폰트 적용하기

불러오기만 해서는 안 되고 어디에 쓸지 지정해야 한다.

전체 본문에 적용

body {
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

👉 뒤의 폰트들은 웹폰트 로딩 실패 대비용이다.

제목과 본문 분리 적용

body {
    font-family: 'Noto Sans KR', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'SUIT', sans-serif;
}

티스토리 본문에만 적용 (자주 쓰는 선택자)

.article-view {
    font-family: 'Noto Sans KR', sans-serif;
}

또는

.entry-content {
    font-family: 'Noto Sans KR', sans-serif;
}

(스킨마다 클래스명이 다를 수 있음)

티스토리에서 적용 위치

📌 티스토리 기준

  1. 관리 → 꾸미기 → 스킨 편집
    • <link> → HTML 편집 → <head>
    • @import, @font-face, font-family → CSS 편집

적용 안 될 때 체크리스트

✔ 캐시 문제 → 강력 새로고침 (Ctrl + F5)
✔ 선택자 우선순위 문제 → !important 임시 사용

body {
    font-family: 'Noto Sans KR', sans-serif !important;
}

✔ 스킨에서 이미 font-family를 강하게 지정했는지 확인

추천 조합 (블로그 가독성 좋음)

  • 본문: Noto Sans KR / Pretendard
  • 제목: SUIT / Spoqa Han Sans Neo
  • 수식 많은 블로그: 본문은 산세리프 + 수식은 기본 serif 유지
반응형
저작자표시 (새창열림)

관련글

티스토리툴바