GPT
티스토리 웹폰트 적용 방법
mornot
2025. 4. 18. 14:17
티스토리 블로그에 가독성 좋은 웹폰트(예: Noto Sans KR, SUIT, Pretendard)를 적용
✅ 티스토리 웹폰트 적용 방법 (모바일 가독성 포함)
1️⃣ 사용할 폰트 고르기
가장 추천하는 조합:
Noto Sans KR: 구글 공식 웹폰트Pretendard: 모던하고 다양한 굵기 제공SUIT: 요즘 트렌디한 감성
2️⃣ 폰트 불러오기 (CSS 링크 추가)
[관리 → 꾸미기 → 스킨 편집 → HTML 편집]으로 들어가서<head> 태그 안에 아래 코드를 삽입해줘.
🔹 Noto Sans KR
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">🔹 Pretendard
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">🔹 SUIT
<link href="https://cdn.jsdelivr.net/npm/suitcss@latest/dist/suit.min.css" rel="stylesheet">3️⃣ 폰트 적용하기 (CSS 설정)
[HTML 편집 → style.css] 또는 [스킨 편집 → CSS 편집]에서 아래 코드 추가:
body, button, input, textarea, select {
font-family: 'Noto Sans KR', 'Pretendard', 'SUIT', sans-serif;
line-height: 1.6;
font-size: 16px;
color: #222;
}
💡 순서를 여러 개 지정한 이유는, 지원되지 않는 경우 대체 폰트가 적용되도록 하기 위함
4️⃣ 모바일 대응 확인
- 모바일 화면에서 텍스트가 너무 크거나 작으면
font-size: 15px또는14px정도로 조정. - 모바일에서 글 간격이 너무 좁게 보이면
line-height를1.8까지 늘려도 돼.
📎 적용 확인 체크리스트
| 항목 | 체크 |
|---|---|
폰트 불러오기 <link> 추가 |
✅ |
font-family 적용 |
✅ |
| 모바일 크기에서도 깨지지 않음 | ✅ |
| 줄간격, 글자 크기 적절 | ✅ |