[HTML] 구글 웹 폰트 사용하기

오늘은 웹 폰트(web font)를 사용하는 법에 대해 알아보도록 하겠습니다.

 

 

 

웹 폰트(Web font)란?

 

먼저, 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다. 결국 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴들을 사용자 컴퓨터에 다운로드한 후 표시하기 때문에 웹 제작자가 의도한 대로 텍스트를 표시할 수 있습니다.

 

 

 

 

 

 

다운로드 없이 웹폰트를 사용하는 방법

 

구글에서 무료로 제공하는 웹 폰트를 사용하면 따로 다운로드 할 필요 없이 직접 링크해 사용할 수 있습니다. https://fonts.google.com에 접속하면 구글에서 제공하는 여러 웹 폰트가 나열되어 있습니다.

 

 

 

저는 웹 사이트에서 많이 사용하는 한글 글꼴인 ‘나눔고딕’으로 실습을 해보겠습니다.

 

 

 

1. Nanum Gothic 검색 후 클릭

 

 

 

 

 

 

 

2. [Select this style] 버튼 클릭

 

1번 과정에서 Nanum Gothic을 클릭하면 해당 글꼴에 대한 style이 나옵니다. 

Regular, Bold, Extra bold 중 저는 Regular을 선택하도록 하겠습니다.

 

 

 

 

 

 

 

 

 

3. 우측 상단 속성 아이콘 클릭

 

+ select this style 버튼을 클릭하면 우측 상단의 네모상자 아이콘에 빨간 알림이 생깁니다. 이 버튼을 클릭합니다.

 

 

 

 

 

 

 

 

4. Embed 클릭

 

3번에서의 아이콘을 클릭하면 Review 항목과 Embed 항목이 있습니다. 여기서 Embed를 클릭합니다.

 

 

 

 

 

 

 

 

 

 

4.  @import 클릭 후 코드 복사

 

Embed를 클릭하면 <link>가 디폴트로 선택되어져 있는데 @import를 클릭합니다.

빨간 네모상자에 있는 소스를 편집기에 집어 넣습니다.

 

 

 

 

 

 

 

 

 

 

 

5. 코드 실행