티스토리 블로그에서 가독성 높은 폰트 설정은 방문자의 체류시간을 늘리고, SEO 최적화에도 긍정적인 영향을 줍니다.
오늘은 폰트 변경 방법부터 구글 웹폰트 적용, 모바일 최적화까지 완벽한 설정법을 알려드립니다!
📌 1. 기본 폰트 설정 방법 – HTML 편집 활용하기
✔ 기본 폰트 변경 방법
1️⃣ 티스토리 관리자 화면 → 스킨 편집 → HTML 편집
2️⃣ Ctrl + F를 눌러 <style> 태그 검색
3️⃣ <style> 태그 안에 아래 코드를 추가
📢 기본 폰트 설정 코드 (한 번에 변경 가능!)
css
복사편집
/* 전체 폰트 설정 */ body { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.8; color: #333; word-break: keep-all; }
📌 가독성을 위해 폰트 크기는 최소 16px 이상이 좋습니다!
📌 2. 영역별 폰트 세부 설정 – 제목, 본문, 사이드바 맞춤 적용
✔ 제목/본문/사이드바 각각 다른 폰트 적용하기
css
복사편집
/* 제목 폰트 (강조 스타일) */ .title { font-family: 'Nanum Square', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; } /* 본문 폰트 (가독성 최적화) */ .article { font-family: 'Noto Sans KR', sans-serif; font-size: 16px; line-height: 1.8; } /* 사이드바 폰트 (가독성 유지) */ .sidebar { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } /* 목차 폰트 */ .toc { font-family: 'Nanum Gothic', sans-serif; font-size: 15px; }
📌 TIP: 제목과 본문의 폰트를 다르게 설정하면 가독성이 더욱 좋아집니다!
📌 3. 구글 웹폰트 적용 방법 – 티스토리에 예쁜 폰트 추가하기
구글 웹폰트는 가독성이 뛰어나고 무료로 사용 가능합니다.
✔ HTML 편집 → <head> 태그 바로 앞에 아래 코드 추가
📢 한글 & 영문 웹폰트 추가 코드
html
복사편집
<!-- 한글 폰트 추가 --> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet"> <!-- 영문 폰트 추가 --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
📌 적용 후 꼭 캐시 삭제 & 새로고침(F5)하여 확인하세요!
📌 4. 블로그 성격별 추천 폰트 조합
✔ 깔끔한 스타일 (일반 블로그 추천)
css
복사편집
.title { font-family: 'Nanum Square', sans-serif; } .article { font-family: 'Noto Sans KR', sans-serif; }
✔ 가독성 최적화 (정보성 블로그 추천)
css
복사편집
.title { font-family: 'Spoqa Han Sans Neo', sans-serif; } .article { font-family: 'Pretendard', sans-serif; }
✔ 전문가 느낌 (IT/리뷰 블로그 추천)
css
복사편집
.title { font-family: 'Black Han Sans', sans-serif; } .article { font-family: 'Noto Sans KR', sans-serif; }
📌 폰트는 블로그 분위기에 맞춰 설정하면 더욱 효과적입니다!
📌 5. 모바일 최적화 – 작은 화면에서도 가독성 유지하기
📢 모바일에서 폰트 크기 자동 조정 (반응형 설정)
css
복사편집
@media screen and (max-width: 768px) { .title { font-size: 20px; } .article { font-size: 15px; } .sidebar { font-size: 13px; } }
📌 TIP: 모바일에서는 글자 크기가 너무 작으면 읽기 어렵고, 너무 크면 가독성이 떨어지므로 적절한 크기를 유지하세요!
📌 6. 자주 하는 폰트 설정 실수 & 해결 방법
🚨 문제 1: 폰트가 적용되지 않을 때
📢 CSS 우선순위를 높이면 해결 가능!
css
복사편집
.article { font-family: 'Noto Sans KR', sans-serif !important; }
🚨 문제 2: 폰트가 깨질 때
📢 HTML 파일의 UTF-8 인코딩을 확인하세요!
html
복사편집
<meta charset="UTF-8">
📌 특히 한글 폰트가 깨질 경우 반드시 UTF-8 설정을 확인하세요!
📌 7. 추천 무료 한글 폰트 – 가장 예쁜 블로그 폰트 TOP3!
📢 1️⃣ Noto Sans KR
✔ 가장 무난하고 깔끔
✔ 다양한 굵기 지원
✔ 로딩 속도가 빠름
📢 2️⃣ Pretendard
✔ 현대적인 느낌의 디자인
✔ 가독성 최적화 (특히 본문 폰트로 추천)
✔ 다국어 지원
📢 3️⃣ Spoqa Han Sans Neo
✔ 깔끔한 디자인 (숫자 폰트 예쁨)
✔ IT/테크 블로그에 적합
✔ 기업형 웹사이트에도 많이 사용
📌 블로그 성격에 맞춰 가장 적합한 폰트를 선택하세요!
🎯 결론 – 티스토리 폰트 설정으로 가독성 & 디자인을 한 번에!
✔ 폰트 설정은 블로그 방문자의 체류시간 & 가독성에 큰 영향을 줍니다.
✔ 구글 웹폰트를 활용하면 무료로 예쁜 폰트를 적용할 수 있습니다.
✔ 모바일 최적화를 함께 진행하면 모든 기기에서 깔끔한 가독성을 유지할 수 있습니다.
✔ 가장 중요한 것은, 블로그 컨셉에 맞는 폰트를 선택하는 것입니다!
📌 지금 바로 내 블로그에 적합한 폰트를 설정하고 가독성을 개선하세요! 🚀
💬 더 궁금한 점은 댓글로 남겨주세요! 😊
📌 태그
티스토리 폰트 변경, 블로그 폰트 설정, 구글 웹폰트 적용, 한글 폰트 추천, 블로그 가독성 개선, SEO 최적화, 티스토리 디자인 설정, 모바일 폰트 최적화, 애드센스 수익 증가, 블로그 글쓰기 가이드
'머니 플로우' 카테고리의 다른 글
| 티스토리 애드센스 수익 올리는 실전 운영 방법, 데이터 분석부터 최적화까지! (1) | 2025.02.21 |
|---|---|
| 블로그용 무료 폰트 다운로드 사이트 총정리 , 가독성과 디자인을 동시에! (0) | 2025.02.21 |
| 티스토리 스킨별 애드센스 수익 최적화 가이드 (추천 스킨 포함) (2편) (0) | 2025.02.20 |
| 티스토리 스킨별 애드센스 수익 최적화 가이드 (추천 스킨 포함) (1편) (0) | 2025.02.20 |
| 티스토리 애드센스 실전 최적화 방법, 숨겨진 팁편 (0) | 2025.02.19 |
