-
(1분 읽기) 티스토리에 프리텐다드 글꼴 적용하기 📚😍블로그 & 기술 기록/Tistory 2025. 2. 26. 22:50
안녕하세요! 👋
티스토리 블로그를 더 예쁘고 감각 있게 꾸미고 싶지 않아?
그렇다면 프리텐다드(Fretandard) 글꼴을 적용해봐! ✨
디자인이 훨씬 세련돼 보이고, 가독성도 좋아져서 방문자들도 더 오래 머물게 될 거야! 🎨
🎯 프리텐다드 글꼴이 뭐야?
**프리텐다드(Fretandard)**는 한국어와 영어 모두 깔끔하게 표현해주는 무료 상업용 웹폰트야.
특히 모던한 디자인과 뛰어난 가독성 덕분에 블로그, 포트폴리오, 개인 홈페이지 등에서 많이 사용되고 있어! 😎
🎨 왜 프리텐다드를 써야 할까?
- 가독성 업⬆️: 글이 읽기 편해져서 방문자들이 더 오래 머물게 돼!
- 디자인 통일감 🎨: 블로그 전체 디자인이 통일돼서 더 세련된 느낌을 줄 수 있어.
- 개성 표현 💖: 글꼴 하나만 바꿔도 블로그 분위기가 완전 달라져!
🛠️ 적용 방법 (초간단!)
티스토리 블로그에서 프리텐다드 글꼴을 적용하는 방법이야. 🚀
금방 따라할 수 있으니까 천천히 해보자!1️⃣ 관리자 페이지 접속
티스토리 관리자 페이지 > 꾸미기 > 스킨 편집으로 이동해줘.
2️⃣ HTML 편집
HTML 편집을 클릭하고 <head> 태그 부분을 찾아봐.
보통 <link rel="stylesheet" href="./style.css" /> 바로 아래쪽에 넣는 게 좋아!3️⃣ CSS 추가하기
아래 코드를 복사해서 <head> 태그 안에 붙여넣어줘.
<!-- 프리텐다드 글꼴 적용 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/webfontworld/fretandard/Fretandard.css"> <style> body { font-family: 'Fretandard', sans-serif; } </style>
📌 어디에 넣어야 할까?
<head> 태그 안에, style.css 아래쪽에 넣는 게 좋아.
예시는 아래와 같아.<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/webfontworld/fretandard/Fretandard.css"> <style> body { font-family: 'Fretandard', sans-serif; } </style>
🎨 전체 적용 VS 부분 적용
- 전체 적용: 위 예시처럼 body에 적용하면 블로그 전체에 글꼴이 적용돼.
- 부분 적용: 특정 부분(예: 제목, 본문)에만 적용하고 싶다면 아래처럼 해봐!
/* 제목에만 프리텐다드 적용 */ h1, h2, h3 { font-family: 'Fretandard', sans-serif; font-weight: bold; } /* 본문, 목록, 링크에만 적용 */ p, li, a { font-family: 'Fretandard', sans-serif; }- h1, h2, h3 → 제목
- p, li, a → 본문, 목록, 링크
🔄 적용 확인하기
- 저장한 후 브라우저 캐시를 삭제하거나 Ctrl+F5로 새로고침해줘.
- 프리텐다드 글꼴이 적용된 모습을 바로 확인할 수 있을 거야! 🎉
🚀 Tip: 감각적인 블로그 디자인
- 프리텐다드는 모던하고 깔끔한 느낌을 줘서 감성 블로그에도 딱이야!
- 다양한 웹폰트와 조합하면 더 멋진 디자인을 만들 수 있어! 🎨
🤔 마무리
기본 서체만 바꿔도 블로그가 확 달라져!
가독성도 좋아지고, 방문자들도 더 오래 머물게 될 거야. 😍이제 너의 블로그도 프리텐다드로 감각 있게 꾸며봐! 🎉
'블로그 & 기술 기록 > Tistory' 카테고리의 다른 글
(30초 읽기) 코드블럭 라운드 적용 📚 (0) 2025.01.17 (1분 읽기) Tistory에서 코드블럭 제대로 쓰는 법! 🔥 (0) 2024.05.27