6.9.1 구글 폰트 적용하기

우리가 6.2.1 font-family 속성에서 웹 브라우저에 표시되는 텍스트에 글꼴을 지정하는 방법을 배웠습니다. 글꼴은 시스템에 기본으로 설치된 것도 많지만, 시스템에 없는 글꼴도 많습니다. 보통 실무에서는 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용합니다.

웹 폰트는 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트를 말합니다. 사용자가 웹 서버에서 폰트를 참조해서 사용하므로 시스템에 글꼴이 없어도 모든 사용자가 같은 글꼴을 사용할 수 있다는 장점이 있습니다.

웹 폰트를 제공하는 사이트나 회사가 많은데, 대표적으로 구글에서 운영하는 구글 폰트(Google Fonts)가 있습니다. 구글 폰트에는 수백 가지의 다양한 글꼴이 있으며 사용하기도 쉽습니다. 구글 폰트는 검색 엔진에서 ‘구글 웹 폰트’로 검색하거나 주소창에 https://fonts.google.com을 직접 입력해 들어갈 수 있습니다.

그러면 최종 프로젝트에서 사용할 ‘Varela Round’와 ‘Poppins’ 글꼴을 구글 폰트로 적용해 보겠습니다. 먼저 구글 폰트의 검색창에 Poppins를 입력해서 검색하세요. 원하는 글꼴이 나오면 클릭해 상세 페이지로 이동합니다.

그림 6-85 구글 폰트에서 글꼴 검색