웹 페이지에서 Google Fonts(구글 폰트)를 사용하는 방법

웹 페이지에서 Google Fonts(구글 폰트)를 사용하면 별도의 폰트 파일을 직접 호스팅하지 않고도 다양한 웹 폰트를 간편하게 적용할 수 있습니다. 기본적인 사용 방법은 아래 코드와 같습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
<style>
    body {
        font-family: "Permanent Marker", cursive;
        font-size: 22px;
    }
</style>
</head>
<body>
<h1>Google fonts example</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores.
</p>
<h2>1 2 3 4 5 6 7 8 9 10</h2>
</body>
</html>

코드 설명

<link> 태그: <head> 영역 안에 Google Fonts 스타일시트를 연결합니다. href 속성의 URL에서 사용할 폰트 이름(여기서는 Permanent+Marker)을 지정할 수 있습니다.
font-family: CSS에서 불러온 폰트를 요소에 적용합니다. 폰트가 정상적으로 로드되지 않을 경우를 대비해 cursive처럼 대체(fallback) 폰트를 함께 지정하는 것이 좋습니다.
display=swap: 웹 폰트가 로딩되기 전까지 시스템 기본 폰트로 텍스트를 먼저 보여주어, 화면이 비어 보이는 현상을 줄여 줍니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.

웹 페이지에서 Google Fonts(구글 폰트)를 사용하는 방법