본문으로 건너뛰기
실습하기

폰트 불러오기 (구글 웹폰트)

웹 페이지 내 모든 요소들이 브라우저 기본 글씨체만 사용한다면 너무 지루하겠죠?

구글 웹폰트는 무료로 사용할 수 있는 다양한 웹폰트를 제공합니다.


  1. 웹폰트 선택하기

폰트를 추가하는 방법은 여러 가지가 있지만, 이번 수업에서는 HTML 문서의 <head> 부분에 <link> 태그로 폰트를 추가하는 방법을 소개합니다.

먼저 [구글 웹폰트] 사이트에 방문해서 마음에 드는 폰트를 선택해 보세요.


  1. 웹페이지에 폰트 불러오기

선택한 폰트의 URL 주소 입력창에서 불러올 때 사용하는 폰트 이름(예: Sunflower, Nanum+Pen+Script, Noto+Sans+KR)을 복사해서 <link> 태그의 href 속성에 추가하면 됩니다.

폰트 이름은 href 속성의 값에서 family= 뒤에 붙여 넣으면 됩니다.

예를 들어 아래 코드의 href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script"와 같이 Nanum Pen Script 폰트를 불러올 수 있습니다.

HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- 여기에 구글 웹폰트 링크를 추가합니다. -->
    <!-- Roboto 대신에 다른 웹폰트 사용해 보세요 -->
    <link
      href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script"
      rel="stylesheet"
    />
  </head>
  <body>
    ...
  </body>
</html>

  • Noto Sans KR와 같이 띄어쓰기가 포함된 폰트를 불러올 경우, family=Noto+Sans+KR"와 같이 띄어쓰기를 +로 대체해야 합니다.

  • 일부 폰트는 한글을 지원하지 않을 수 있습니다. 웹폰트 필터에서 Korean을 선택하면 한글을 지원하는 폰트만 볼 수 있습니다.


  1. CSS에서 폰트 사용하기

폰트 링크를 추가한 후, CSS에서 해당 폰트를 사용하려면 font-family 속성을 통해 폰트 이름을 지정하면 됩니다.

예시 코드:​

CSS
body {
  font-family: 'Nanum Pen Script', sans-serif; /* 'Nanum Pen Script' 폰트 사용을 시도하고, 폰트가 없으면 기본 sans-serif 폰트 사용 */
}

font-family 안의 폰트 이름은 +를 제외한 폰트 이름을 사용하면 됩니다.

(예: Nanum+Pen+Script -> Nanum Pen Script)

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!