웹 페이지에 한글 웹 폰트 적용하기

Google font에서 제공하는 한글 웹 폰트를 적용해보자.

Google font에서는 다양한 한글 폰트를 제공하는데, 이 글에서 사용할 폰트는 Noto Sans이다. 다음의 두 가지 과정을 거치면 간단하게 한글 폰트를 이용할 수 있다.

html

가장 먼저 해야할 일은 html의 head 안에 다음과 같은 코드를 넣는 일이다. 이 코드는 google font를 가져오는 역할을 한다.

<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">

css

그 다음은 css를 수정하여야 한다. css에서 사용하는 font-family에 “Noto Sans KR”을 추가해주면 된다.

html {
  font-family: "PT Sans", "Noto Sans KR";
}

이때 주의해야 할 점은 영문 폰트 다음에 한글 폰트를 적어 주어야 한다는 점이다. 위의 코드로 예를 들자면, 영문 폰트인 PT Sans 다음에 한글 폰트인 Noto Sans KR가 사용되는 것을 알 수 있다. 이렇게 하는 이유는 폰트가 첫 번째부터 순차적으로 적용되기 때문이다. 즉, 첫 번째 폰트를 적용할 수 있는지 확인한 후 안 되면 두 번째 폰트를 시도해보는 식으로 이어진다. 따라서 영문 폰트, 한글 폰트 순서로 나열할 때, 영문에는 영문 폰트가, 한글에는 한글 폰트가 적용된다.

이상으로 간단하게 한글 웹 폰트를 적용해보았다. 구글 폰트 홈페이지에 들어가면 Noto Sans 이외에도 다양한 한글 폰트를 찾아볼 수 있으니, 자신의 웹 페이지에 맞는 폰트를 잘 찾아 사용하면 된다.