mornot 님의 블로그

티스토리 웹폰트 적용 방법 본문

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 적용 ✅
모바일 크기에서도 깨지지 않음 ✅
줄간격, 글자 크기 적절 ✅
저작자표시 비영리 변경금지

'GPT' 카테고리의 다른 글

티스토리 마크다운 스타일 html  (0) 2025.04.18
티스토리에서 **마크다운 형식으로 깔끔하고 미니멀한 디자인  (0) 2025.04.18
마크다운(Markdown) 템플릿  (0) 2025.04.18
프롬프트 구조화  (0) 2025.04.18
구글의 ADK(Agent Development Kit)  (0) 2025.04.18
'GPT' Related Articles more