본문 바로가기
생활정보

티스토리 블로그 가독성 좋은 예쁜 폰트 추천 & 적용법 설명

by 마이마인 2025. 2. 5.

티스토리 블로그 예쁜 글씨체 적용하기 (눈누 웹폰트 활용 완벽 가이드!)

웹폰트

1. 눈누 웹폰트란? (무료 웹폰트 사이트 소개)

눈누 웹폰트는 무료로 사용할 수 있는 다양한 한글 웹폰트를 제공하는 사이트입니다.

  • 한글 웹폰트 종류가 많아 선택의 폭이 넓다.
  • CSS 코드 한 줄로 간단하게 적용 가능.
  • 무료 & 상업적 사용 가능 폰트 다수 제공.

2. 눈누 웹폰트 적용 방법 (CSS 코드 활용!)

티스토리 블로그에서 눈누 웹폰트를 적용하는 방법은 간단합니다.

  1. 눈누 웹폰트 사이트에서 원하는 폰트 찾기
  2. 해당 폰트의 CSS 코드 복사
  3. 티스토리 블로그 HTML & CSS 편집
  4. 복사한 CSS 코드 삽입 후 저장

3. 눈누 웹폰트 적용하기 (단계별 설정 가이드!)

🔹 1) 눈누 웹폰트 사이트에서 폰트 찾기

1️⃣ 눈누 웹폰트 사이트 접속
2️⃣ 원하는 한글 폰트 검색 (예: 프리텐다드, 도현체, 나눔손글씨 등)
3️⃣ 폰트 선택 후 "WEBFONT" 버튼 클릭

🔹 2) 눈누 웹폰트 CSS 코드 복사

예를 들어, 프리텐다드(Pretendard) 폰트를 적용하고 싶다면?
눈누에서 제공하는 CSS 코드를 복사합니다.

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

🔹 3) 티스토리 블로그 HTML & CSS에 적용하기

  1. 티스토리 블로그 관리자 페이지 접속
  2. "스킨 편집" → "HTML 편집" 클릭
  3. CSS 코드 추가 아래 코드중 원하는 폰트만 변경

// 원하는 폰트
@font-face {
    font-family: 'GmarketSansMedium';
    font-weight: normal;
    font-style: normal;
}
// 적용 범위
html, body, .contents_style, .another_category, #header h1 a {
  font-family: 'GmarketSansMedium' !important;
}
// 모바일 적용 범위
@media (max-width: 768px) {
  html, body, .contents_style, .another_category, #header h1 a {
    font-family: 'GmarketSansMedium' !important;
  }  
}

4️⃣ CSS 파일(style.css)에서 폰트 적용 코드 추가

5️⃣ 저장 후 블로그에서 정상적으로 적용되는지 확인
이제 블로그에서 프리텐다드 폰트가 적용됩니다! 🎉

4. 추천 눈누 웹폰트 & 적용 코드 예시

✅ 1) 프리텐다드(Pretendard) – 고급스러운 기본 서체

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body {
    font-family: 'Pretendard', sans-serif;
}

✅ 2) 도현체(Dohyeon) – 굵고 강한 느낌의 서체

@import url('https://cdn.jsdelivr.net/gh/noonnu/noonfonts_2107@1.1/dohyeon.css');

body {
    font-family: 'Dohyeon', sans-serif;
}

✅ 3) 나눔손글씨체 – 손글씨 느낌의 감성 폰트

@import url('https://cdn.jsdelivr.net/gh/noonnu/noonfonts_2110@1.1/nanumsong.css');

body {
    font-family: 'NanumSong', sans-serif;
}

📌 위 코드 중 원하는 폰트를 선택해 적용하면 됩니다!

🔎 결론: 티스토리 블로그 예쁜 글씨체, 이렇게 적용하세요!

  • 눈누 웹폰트에서 원하는 폰트 선택
  • CSS 코드를 복사한 후 티스토리 "HTML 편집"에서 추가
  • "스킨 편집" → "CSS 파일 수정"에서 body 폰트 설정 변경
  • 다양한 폰트를 적용해 블로그 디자인을 업그레이드!

💡 예쁜 글씨체를 적용하면 블로그의 가독성이 좋아지고, 방문자 체류 시간이 늘어납니다!
예쁜 글씨체를  활용해 티스토리 블로그를 꾸며보세요! 😊