블로그 콘텐츠의 접근성은 단순히 글의 내용뿐 아니라 예쁘고 좋은 폰트 설정에도 영향이 있습니다. 특히 블로그를 운영하면서 여러 가지 폰트를 사용하는 경우,여러가지 문제가 발생하기도 합니다. 잘 선택된 고정 폰트는 방문자의 눈을 편안하게 하고, 블로그 전체의 디자인 통일성을 유지해 브랜딩 효과까지 높여줍니다. 반면 여러 폰트를 무분별하게 사용할 경우 디자인이 산만해지고, 호환성 문제나로딩 속도 저하 등 다양한 문제도 발생할 수 있습니다.
폰트의 중요성과 티스토리 적용 가이드
이 글에서는 티스토리 블로그에서 폰트를 고정하는 방법과, 웹폰트를 효율적으로 적용하는 과정, 그리고 폰트 미리 로드(preload)까지 활용해 가독성과 SEO 최적화에 도움 되는 팁을 자세히 다룹니다. 누구나 쉽게 따라 할 수 있도록 단계별로 설명해드리니, 지금 바로 확인해 보세요!
블로그에서 폰트의 중요성
블로그 콘텐츠의 품질은 글의 내용뿐 아니라 가독성과 디자인 일관성에 크게 영향을 받습니다. 그중에서도 폰트(Font)는 방문자의 첫인상을 좌우하는 기본 요소입니다.
- 가독성 향상: 잘 읽히는 글꼴은 방문자의 이탈률을 줄이고 체류 시간을 늘립니다.
- 브랜딩: 자신만의 글꼴을 고정해두면 블로그의 정체성을 강화할 수 있습니다.
- 디자인 통일성: 다양한 기기에서 폰트가 일정하게 보이도록 고정하는 것이 중요합니다.
블로그 에디터에서 여러 폰트 사용 시 문제점
- 일관성 부족
다양한 폰트를 사용하면 블로그 전체 디자인이 산만해 보이고, 방문자가 집중하기 어려울 수 있습니다. - 호환성 문제
일부 폰트는 특정 브라우저나 기기에서 제대로 표시되지 않을 수 있어 사용자 경험이 저하될 수 있습니다. - 느린 로딩 속도
여러 웹폰트를 불러오면 페이지 로딩 속도가 느려질 수 있어 SEO와 사용자 체감 속도에 악영향을 줍니다. - 가독성 저하
폰트가 자주 바뀌면 글 읽기가 어려워져 방문자의 이탈률이 높아질 수 있습니다.
고정 폰트 사용의 장점
- 디자인 통일성 유지
전체 블로그에 같은 폰트를 적용해 깔끔하고 전문적인 느낌을 줄 수 있습니다. - 가독성 향상
일관된 폰트로 글이 잘 읽히며 방문자의 체류 시간을 늘릴 수 있습니다. - 빠른 페이지 로딩
필요한 폰트만 로드해 페이지 속도가 개선되고, SEO에도 긍정적 영향을 줍니다. - 브랜딩 강화
자신만의 고유한 폰트를 고정하면 블로그 브랜드 아이덴티티가 강화됩니다.
블로그에 고정 폰트 설정하는 방법
1. 자신에게 맞는 예쁜 폰트 다운로드하기
고정 폰트를 적용하려면 먼저 원하는 폰트를 준비해야 합니다. 아래와 같은 웹폰트 사이트에서 무료 폰트를 다운로드할 수 있습니다:
추천: 고딕 계열은 깔끔하고 현대적인 느낌, 명조 계열은 고전적이고 차분한 느낌.
| 폰트명 | 특징/분위기 | 활용 추천 |
|---|---|---|
| 나눔스퀘어 | 깔끔, 각진, 현대적 | 본문, 제목 |
| 에스코어드림 | 부드럽고 세련됨 | 본문, 포인트 |
| 아리따돋움 | 감성, 부드러움 | 본문, 감성글 |
| G마켓 산스 | 귀엽고 트렌디 | 제목, 포인트 |
| 마루부리 | 라운드, 친근함 | 본문, 일상글 |
| 나눔고딕 | 전통, 편안함 | 본문, 정보글 |
| 옴니고딕 | 독특, 세련됨 | 제목, 포인트 |
| 푸른전남체 | 젊음, 역동적 | 포인트, 이벤트 |
| Noto Sans KR | 깔끔, 글로벌 지원 | 본문, 제목 |
| 나눔명조 | 고전, 단정함 | 본문, 에세이 |
나눔글꼴
푸른 전남체 폰트
구글 폰트
마루부리 폰트
2. 티스토리 관리자 페이지 접속
- 티스토리 블로그 관리자 스킨 메뉴로 이동
- 우측 상단의 스킨 편집 클릭
- HTML 편집기를 엽니다
중요: HTML 및 CSS 수정을 하기 전, 스킨을 백업 저장해두는 것을 꼭 추천합니다.
3. 폰트 파일 업로드 ,링크 복사
- HTML 편집기 상단의 파일업로드 기능 클릭
- .woff, .ttf 파일을 업로드
- 업로드 후 생성된 링크 주소를 복사합니다
예: https://yourblog.tistory.com/img/YourFont.woff
4. HTML head에 웹폰트 적용 코드 삽입
1. 기본 @font-face 선언
통합적인 텍스트 스타일을 구현하고자 할 때, 전체 문자 범위에 제한 없이 웹폰트를 불러오는 방식이 자주 사용됩니다. 이 경우에는 사이트 전반에 걸쳐 일관된 서체 표현이 가능합니다.
특히 .woff(Web Open Font Format) 형식은 가장 널리 사용되며 웹 최적화된 포맷입니다. 용량이 상대적으로 작고, 다양한 브라우저에서 호환성이 높기 때문에 웹사이트 성능과 사용자 접근성 측면에서도 유리합니다.
또한, @font-face를 사용할 때는 font-weight와 font-style을 명확히 지정해 주는 것이 중요합니다. 이를 통해 브라우저가 올바른 폰트 파일을 정확히 매칭하고, 다양한 텍스트 스타일(예: 굵기나 기울임)에 따른 출력 오류를 방지할 수 있습니다.
style
@font-face {
font-family: 'MyCustomFont';
src: url('https://yourblog.tistory.com/attach/font/YourFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/style
이 코드는 head 태그 안에 삽입해야 웹 전체에서 폰트가 적용됩니다.
장점
- 범용성: 모든 문자에 대해 폰트가 적용됩니다.
- 웹 최적화: .woff는 용량이 작고 빠르게 로딩됩니다.
- 간단하고 직관적: 설정이 쉽고 문제 발생 확률 적음.
단점
- 폰트 파일 크기가 크면 로딩 시간이 길어질 수 있음.
- 불필요한 문자도 모두 불러와서 용량이 커질 수 있음.
2. 유니코드 범위 지정 @font-face 선언
웹 페이지에서 폰트 용량을 줄이면서도 필요한 문자에만 원하는 서체를 적용하고 싶을 때, CSS의 unicode-range 속성을 활용하면 효과적입니다. 특히 .ttf(TrueType Font) 포맷은 품질은 우수하지만 상대적으로 용량이 크기 때문에, 전체 문자에 무작정 적용하면 페이지 로딩에 부담이 될 수 있습니다.
이때 @font-face 선언에 unicode-range를 함께 사용하면, 특정 문자 범위에만 해당 폰트를 적용하여 불필요한 데이터 전송을 줄일 수 있습니다. 예를 들어, 한글 음절, 한글 자모, 숫자, 영문 알파벳 등 범위를 나눠서 각각 폰트를 설정할 수 있습니다.
@charset "utf-8";
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://tistory1.daumcdn.net/tistory/images/GmarketSansTTFMedium.ttf')
format('truetype');
font-weight: 400;
font-style: normal;
unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+0030-0039, U+0041-005A, U+0061-007A;
}
장점
- 최적화된 로딩: 필요한 문자 범위만 폰트 적용 및 로드 가능 불필요한 문자 폰트는 로드 안 함.
- 다국어 사이트에서 유용: 여러 언어 폰트를 분리해 상황별로 적용 가능.
- 브라우저 지원: unicode-range 지원하는 최신 브라우저에서만 효과적.
단점
- 지원 제한: 구형 브라우저나 일부 환경에서 unicode-range 무시될 수 있음.
- .ttf는 .woff 대비 파일 크기가 크고 로딩 속도가 느릴 수 있음.
- 범위 지정 실수 시 일부 문자가 폰트 적용에서 누락될 수 있음.
5. CSS에 고정 폰트 설정
아래 코드를 추가하여 전체 블로그에 폰트를 고정합니다.
body, html {
font-family: 'MyCustomFont', sans-serif !important;
}
!important는 다른 CSS 설정보다 우선 적용되게 합니다.
외부 웹폰트 링크 활용하기
구글 폰트를 사용할 경우 head에 아래와 같이 삽입할 수 있습니다.
link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet"
style
body {
font-family: 'Noto Sans KR', sans-serif;
}
/style
폰트 미리 로드(Preload) 코드
폰트를 미리 로드(preload)하는 코드는 브라우저가 폰트를 빠르게 다운로드해서 렌더링 지연을 줄이는 데 도움을 줍니다. 특히 커스텀 웹폰트를 쓸 때 효과적입니다.
head
link rel="preload" href="https://yourblog.tistory.com/attach/font/YourFont.woff"
as="font" type="font/woff"
crossorigin="anonymous"
!-- 기타 메타, 스타일 등 --
/head
폰트에 미리 로드를 사용하는 이유
- 렌더링 지연 감소
폰트가 늦게 로드되면 텍스트가 기본 폰트로 잠시 보여졌다가 바뀌는 FOIT(Flash of Invisible Text) 또는 FOUT(Flash of Unstyled Text)현상이 발생할 수 있습니다.
미리 로드하면 이런 문제를 최소화할 수 있습니다. - 빠른 페이지 표시
중요한 리소스를 우선순위로 불러오기 때문에 사용자 경험이 좋아집니다. - SEO와 접근성 개선
페이지 로딩이 빨라지고, 콘텐츠 가독성이 개선되면 검색엔진 최적화에도 긍정적입니다.
사용 시 주의사항
- 미리 로드 대상이 너무 많으면 초기 로딩 시간이 오히려 길어질 수 있으니, 핵심 폰트만 지정하세요.
- crossorigin은 폰트가 외부 도메인에 있을 경우에만 필요합니다.
- type은 폰트 포맷에 맞게 맞춰주세요. (예: font/woff2, font/ttf 등)