Google fonts를 사용한 Web Font 사용법

qpress 2020년 2월 12일 32

Google의 자비로 인해 Web Font 사용이 상당히 쉬워졌습니다.
폰트 파일을 서버에 설치할 필요 없이 단 한줄이면 사실상 다양한 웹폰트를 사용할 수 있다고 볼 수 있습니다.

Google Font 설정

HTML 문서의 head 영역에 아래와 같이 Style Link를 삽입 합니다.

<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Roboto&display=swap" rel="stylesheet">

‘Nanum+Gothic|Roboto’ 이부분이 폰트 이름인데 현재 Nanum Gothic과 Roboto 폰트를 사용할 수 있게 된 상태입니다.
폰트를 추가하려면 https://fonts.google.com/ 에 가서 원하는 폰트를 선택한 후 해당 폰트의 이름을 구분자 ‘|’를 사용하여 위의 코드에 추가해 주면 됩니다.
만약 ‘Lato’라는 폰트를 추가하려면 아래와 같이 코드를 수정해 주면 됩니다.

<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Roboto|Lato&display=swap" rel="stylesheet">

Font 사용

가장 간편한 방법은 style의 font-family에 폰트 이름을 기재하는 방식입니다.

<span style="font-family:'Nanum Gothic'">나눔고딕</span>

그런데, 폰트만의 고유한 속성들이 있기 때문에, CSS Rules에 따라 보다 정교한 폰트 지정을 해주는 것이 좋습니다. 위의 나눔 고딕 같은 경우 정확한 지정방식은 다음과 같습니다.

<span style="font-family:'Nanum Gothic', sans-serif;">나눔고딕</span>