Logo

구글 웹폰트 사용법 (Google Fonts)

웹폰트(web font)를 사용하면 사용자의 컴퓨터에 설치된 폰트뿐만 아니라 웹에서 다양한 폰트를 불러와서 웹사이트에 적용할 수 있습니다. 뿐만 아니라, 사용자가 어느 플랫폼에서 웹사이트를 이용하든 항상 동일한 글꼴로 텍스트 컨텐츠를 보여줄 수는 있다는 장점도 있습니다.

이번 포스팅에서는 Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서 알아보겠습니다.

웹폰트 선택하기

웹사이트에 웹폰트를 적용하려면 우선 사용하고 싶은 웹폰트를 골라야겠죠? 유료로 웹폰트를 구매할 수도 있겠지만 본 포스팅에서는 무료 웹폰트를 사용해보겠습니다.

대표적인 웹폰트 검색 사이트인 Google Fonts에서 원하는 웹폰트를 고릅니다. 일반적으로 디지털 매체에서는 바탕체(Serif)보다는 고딕체(Sans Serif)가 가독성이 좋은 것으로 알려져있습니다. Categories 필터를 Sans Serif로 선택하고, Language 필터를 Korean으로 선택하면 약 12종의 한글 고딕체 웹폰트가 검색될 것입니다.

본 포스팅에서는 구글에서 만든 한글 고딕체 웹폰트인 Noto Sans KR를 사용해보도록 하겠습니다.

웹폰트 불러오기

원하는 웹폰트를 골랐다면 웹사이트에서 해당 웹폰트를 불러와야 합니다. Google Fonts로 부터 웹폰트를 불러올 때는 두 가지 방법을 사용할 수 있습니다.

첫번째 방법은 HTML의 <link> 태그를 사용하는 것입니다.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
  rel="stylesheet"
/>

두번째 방법은 CSS의 @import 키워드를 사용하는 것입니다.

<script>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
</script>

두 가지 방법 모두 HTML 페이지의 <head> 태그 안에서 사용하여, 웹폰트가 다운로드 된 후에 <body> 태그 안의 컨텐츠가 랜더링되도록 합니다.

참고로 위에 삽입된 Google Fonts의 링크를 브라우저로 열어보면, 결국 많은 @font-face로 이루어진 스타일 정의가 확인될 것입니다. @font-face는 사용자 글꼴을 정의할 때 사용하는 CSS 규칙인데요. 예를 들어, 해당 글꼴의 이름이나 두께, 글꼴을 다운받을 서버 경로 등을 명시할 수 있습니다.

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosanskr/v13/PbykFmXiEBPT4ITbgNA5Cgm203Tq4JJWq209pU0DPdWuqxJFA4GNDCBYtw.0.woff2)
    format("woff2");
}

웹폰트 적용하기

웹폰트를 적용할 때는 CSS의 font-family 속성을 위 @font-face에 명시된 글꼴 이름을 설정합니다. font-family 속성은 부모 엘리먼트에서 자식 엘리먼트로 상속이 되기 때문에 body와 같은 상위 엘리먼트에 웹폰트를 적용하면 웹사이트 전체에 적용이 됩니다.

body {
  font-family: "Noto Sans KR", sans-serif;
}

font-family 속성에는 여러 개의 글꼴을 넘길 수 있는데요. 웹폰트 다운로드가 되지 않는 환경을 대비하여 기본 글꼴도 함께 명시해주는 것이 좋습니다.

font-family를 포함한 CSS에서 텍스트 스타일링에 자주 사용되는 속성에 대해서는 별도 포스팅에 정리해 두었으니 참고 바랍니다.

예제 페이지

현재 Google Fonts에서 검색되는 모든 종류의 한글 고딕체 웹폰트를 차례대로 적용해보았습니다.

실제 웹사이트에서 이렇게 여러 웹폰트를 사용하는 것은 그리 권장되지 않겠죠? 사용자가 한 번에 여러 웹폰트를 다운로드 받으려면 시간이 오래 걸릴 수도 있고요. 하나의 웹사이트에 여러 개의 웹폰트가 공존하게 되면 디자인의 일관성에 부정적인 영향을 줄 것입니다.

마치면서

이상으로 Google Fonts를 통해서 어떻게 웹폰트를 웹사이트에 적용할 수 있는지 간단히 살펴보았습니다. 웹폰트를 잘 활용하셔서 개성있는 웹사이트를 만드실 수 있으셨으면 좋겠습니다.

This work is licensed under CC BY 4.0

messageCircle