안녕하세요, 여행벌입니다.
오늘은 CSS로 구글 웹 폰트 적용하는 방법에 대해서 포스팅해보겠습니다.
구글 웹폰트 적용하기
1) 먼저 구글 폰트 웹사이트에 접속합니다.
2) Language를 원하는 언어에 맞춰 선택합니다.
3) 여러 가지 폰트 중에 원하는 폰트를 선택합니다. 'Do Hyeon' 글꼴을 선택해보겠습니다.
4) Select this style 을 누르면 장바구니에 'Do Hyeon' 글꼴이 담기게 됩니다. 현재 'Do Hyeon' 글씨체는 Regular 400 굵기의 Style만 지원하고 있으므로 장바구니에 담아보겠습니다.
5) 장바구니는 오른쪽 상단의 버튼을 누르면 다음과 같이 현재 장바구니에 담겨 있는 글꼴이 나옵니다.
6) 장바구니에 담은 글꼴을 적용하기 위해서는 글꼴을 우리의 HTML 파일에 import 해와야 합니다. Embed Tap을 누른 후, @import를 누르면 다음과 같은 코드 덩어리 2개가 보입니다.
위의 @import 코드를 이용하면 웹 폰트를 우리의 파일에 불러올 수 있고, 아래의 코드는 우리가 아는 글꼴 적용 속성 값입니다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
p{
font-size : 3em;
font-family : 'Do Hyeon', sans-serif;
}
</style>
</head>
<body>
<p>'Do Hyeon' 체를 적용!</p>
</body>
</html>
style 태그 안에 @import 코드를 그대로 가져오면 font-family 속성을 통해 글꼴을 적용할 수 있습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] 문단 스타일 : 텍스트 정렬, 들여 쓰기, 줄 간격 - travelbeeee (1) | 2020.04.08 |
|---|---|
| [HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee (0) | 2020.04.07 |
| [HTML+CSS] 글꼴 관련 스타일 - travelbeeee (0) | 2020.04.06 |
| [HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee (0) | 2020.04.06 |
| [HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee (0) | 2020.04.06 |