블로그스팟 폰트와 크기 자유자재로 변경하기: 가독성 200% 높이는 HTML 비법

 


블로그스팟 폰트(글꼴)와 크기 완벽 조절: 가독성 높이는 CSS 가이드

블로그의 글꼴은 독자가 내용을 읽는 '피로도'를 결정합니다. 기본 폰트가 너무 작거나 마음에 들지 않는다면, 간단한 HTML 코드 한 줄로 나만의 스타일을 입힐 수 있습니다. 구글 상위 노출을 위해서도 가독성 좋은 폰트 설정은 필수입니다.


1. 특정 문단의 폰트와 크기만 변경하기 (인라인 스타일)

글 작성 중 특정 부분만 강조하고 싶을 때 사용하는 방법입니다. [HTML 보기] 모드에서 해당 문장을 아래 코드로 감싸주세요.

[개별 적용 코드]
<p style="font-family: '나눔고딕', sans-serif; font-size: 18px; color: #333333; line-height: 1.8;">
  여기에 변경하고 싶은 내용을 입력하세요.
</p>
    
  • font-family: 글꼴 이름을 적습니다. (사용자 컴퓨터에 설치된 글꼴 기준)
  • font-size: 글자 크기입니다. 본문용으로는 16px~18px를 추천합니다.
  • line-height: 줄 간격입니다. 1.6~1.8 정도로 설정해야 눈이 편안합니다.

2. 블로그 전체 폰트 한 번에 변경하기 (CSS 설정)

매번 코드를 넣기 번거롭다면 블로그 전체 설정을 바꾸는 것이 효율적입니다.

  1. 관리자 메뉴 [테마] -> [맞춤설정] -> [고급]으로 이동합니다.
  2. 'CSS 추가' 항목을 찾습니다.


  3. 아래 코드를 복사하여 붙여넣으세요.
/* 블로그 본문 전체 글꼴 설정 */
.post-body {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  color: #2c3e50 !important;
}

3. 구글 웹폰트(Google Fonts) 연결하기

독자의 컴퓨터에 글꼴이 없어도 예쁘게 보이게 하려면 웹폰트를 사용해야 합니다.

  • Google Fonts에서 원하는 폰트를 고릅니다.
  • 제공되는 @import 코드를 [HTML 편집]의 <style> 태그 안에 넣으면 전 세계 어디서든 동일한 폰트로 보입니다.

💡 가독성을 위한 폰트 선택 팁

수익형 블로그라면 멋 부린 서체보다는 '본질'에 충실한 서체가 좋습니다.

  • 제목: 눈에 띄는 굵은 고딕 계열 (Pretendard, 나눔스퀘어 등)
  • 본문: 장시간 읽어도 피로감이 적은 명조 또는 깔끔한 산세리프 계열
  • 대비: 배경색과 글자색의 대비가 명확해야 합니다. (완전한 검정보다는 짙은 회색 #333 추천)

폰트 설정 하나만으로도 블로그의 분위기가 완전히 달라집니다. 지금 바로 내 글에 가장 잘 어울리는 옷을 입혀보세요!

댓글 쓰기

0 댓글

이 블로그 검색

태그

신고하기

프로필

이미지alt태그 입력