CSS 구글 웹 폰트 사용하기, 티스토리 적용 방법

웹 폰트를 자체적으로 만들어서 사용할 수 있지만 인터넷에서 무료로 제공하는 웹 폰트를 간단히 링크를 통해서 사용할 수 있습니다. 그중에서도 구글 폰트는 무료로 사용할 수 있는 여러 개 웹 폰트를 제공합니다. 그럼 구글 웹 폰트를 사용하는 방법과 티스토리에 구글 폰트를 적용하는 방법에 대해서 알아보죠.

구글 폰트 사용하기

1. “구글 폰트” 사이트 [접속] 합니다.

https://fonts.google.com/

2. 메인 페이지 [Language] 목록에서 [Korean]을 선택합니다.

→ 그럼 한글 글꼴을 모아서 볼 수 있습니다. 현재 기준으로 31개 한글 글꼴 제공

3. 원하는 글꼴을 찾아 선택하여 [클릭] 합니다.

→ 예시로 나눔 펜글씨(Nanum Pen Script) 기준으로 설명

4. 페이지 오른쪽 아래에 [Select Regular 400] 메뉴를 클릭합니다.

5. 웹 폰트에 대한 정보가 나오고 웹 폰트를 적용할 수 있게 두 가지 방법으로 제공합니다.

① <link> 태그로 css 파일을 추가하는 방법

② @import 규칙으로 css 파일을 추가하는 방법

구글 웹 폰트를 <link> 태그 또는 @import 규칙으로 css 파일을 추가할 수 있습니다.

사용 예제

1. 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>구글 폰트(나눔펜글씨)</title>

<!-- 1. <link> 태그에 css 파일 추가하는 방법 -->
<!--<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">-->

<style>
/* 2. @import 규칙으로 css 파일 추가하는 방법*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');

body {
     font-family: 'Nanum Pen Script', cursive;
}
</style>  
</head>
<body>
     <h1>구글 폰트(나눔펜글씨)</h1>
     <h2>BlueShare 블로그</h2>
</body>
</html>

2. 실행 결과