Frontend/CSS

웹 폰트 적용법: 구글 폰트와 눈누로 블로그 가독성 높이기

미니임 2026. 2. 10. 01:00

 

블로그의 내용은 훌륭하지만, 폰트가 읽기 힘들다면 독자는 금방 떠나버립니다. 적절한 웹 폰트 사용은 텍스트의 가독성을 높일 뿐만 아니라 블로그의 전반적인 분위기를 형성하는 중요한 디자인 요소입니다. 오늘은 가장 대표적인 서비스인 **구글 폰트(Google Fonts)**와 **눈누(Noonnu)**를 활용해 블로그에 폰트를 적용하는 방법을 단계별로 알아보겠습니다.

1. 구글 폰트(Google Fonts) 활용하기

구글 폰트는 전 세계적으로 가장 많이 사용되는 무료 웹 폰트 서비스입니다. 안정적인 서버 성능과 다양한 언어 지원이 장점입니다.

적용 단계

  1. Google Fonts 접속 후 원하는 폰트(예: Noto Sans KR)를 검색합니다.
  2. 사용할 굵기(Weight)를 선택하고 'Get font' 버튼을 클릭합니다.
  3. 'Embed' 탭에서 <link> 방식 혹은 @import 방식을 선택해 코드를 복사합니다.

코드 예제: Noto Sans KR 적용

가장 표준적인 고딕체인 Noto Sans KR을 블로그 전체에 적용하는 예시입니다.

/* HTML  부분에 넣는 방식 */




/* CSS 파일에 적용하는 방식 */
body {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400; /* 일반 본문 굵기 */
}

h1, h2, h3 {
    font-weight: 700; /* 제목은 두껍게 */
}

2. 눈누(Noonnu) 활용하기

눈누는 상업적으로 이용 가능한 한글 웹 폰트를 한데 모아놓은 큐레이션 사이트입니다. 구글 폰트보다 훨씬 다양하고 개성 있는 한국어 폰트가 많습니다.

적용 단계

  1. 눈누 접속 후 마음에 드는 폰트를 클릭합니다.
  2. 상세 페이지의 '웹폰트로 사용' 박스 안에 있는 코드를 복사합니다.

코드 예제: 프리텐다드(Pretendard) 적용

최근 가독성이 가장 좋기로 소문난 'Pretendard' 폰트를 적용해 보겠습니다.

/* 눈누에서 복사한 웹폰트 정의 */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('[https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff](https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff)') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* 블로그 적용 */
article.post-content {
    font-family: 'Pretendard-Regular', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    line-height: 1.8; /* 가독성을 위한 줄 간격 확보 */
}

3. 가독성을 높이는 CSS 디테일 팁

폰트만 바꾼다고 가독성이 완성되지는 않습니다. 폰트와 함께 아래 설정을 조절하면 훨씬 전문적인 블로그처럼 보입니다.

① 줄 간격 (Line Height)

한글은 글자 구조가 복잡해서 줄 간격이 좁으면 답답해 보입니다. 보통 1.6에서 1.8 사이를 추천합니다.

p {
    line-height: 1.75;
    margin-bottom: 1.5em; /* 문단 사이 간격 */
}

② 글자 간격 (Letter Spacing)

글자 사이가 너무 붙어있으면 가독성이 떨어집니다. 약간의 자간 조절이 필요할 수 있습니다.

body {
    letter-spacing: -0.02em; /* 한글은 미세하게 좁히는 것이 보기 좋습니다 */
}

③ 색상 대비

완전한 검정(#000000)보다는 아주 진한 회색(#333333)이 눈의 피로도를 낮춰줍니다.

body {
    color: #333333;
}

4. 저작권 주의사항

웹 폰트를 사용할 때는 반드시 라이선스를 확인해야 합니다.

  • 구글 폰트: 대부분 **OFL(Open Font License)**로 상업적 이용이 자유롭습니다.
  • 눈누: 각 폰트 페이지 하단에 '상업적 이용 가능 여부'가 아이콘으로 표시되어 있습니다. 임베딩(웹 폰트 사용)이 허용되는지 확인 후 사용하세요.

적절한 폰트 선택은 당신의 콘텐츠를 더욱 빛나게 해줄 것입니다. 지금 바로 블로그의 폰트를 점검해 보세요!

반응형