반응형
HTML문서에 웹에서 제공하는 폰트를 사용할 수 있습니다.
다음은 구글에서 제공하는 웹폰트를 사용하는 방법을 설명합니다.
1. fonts.google.com에 연결합니다.
폰트를 검색하거나 아래 나열된 폰트를 선택합니다.
여기서는 무료 글꼴인 나눔 폰트를 검색해 보겠습니다.
"nanum"을 입력합니다.원하는 글꼴을 선택합니다.
2. 웹에서 사용하는 2가지 방법 중 하나를 선택하게 합니다.
여기서는 2가지 방법을 모두 설명하겠습니다.
<link>를 선택하고, 하단의 항목을 HTML 문서에 삽입합니다.
|
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href=" https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap " rel="stylesheet"> font-family: 'Nanum Pen Script', cursive;
|
완성된 HTML 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹폰트 사용하기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href=" https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap " rel="stylesheet">
<style>
body { font-size: 20px; }
p { font-family: 'Nanum Pen Script', cursive; }
</style>
</head>
<body>
<p>웹폰트를 사용하는 방법을 설명합니다.</p>
<p>Explains how to use web fonts.</p>
</body>
</html>
3. 이번에는 "@import" 방식을 사용해 보겠습니다.
2에서 설명하는 것과 같이 여기에서 복사한 코드를 HTML 문서에 삽입합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹폰트 사용하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
body { font-size: 20px; }
p { font-family: 'Nanum Pen Script', cursive; }
</style>
</head>
<body>
<p>웹폰트를 사용하는 방법을 설명합니다.</p>
<p>Explains how to use web fonts.</p>
</body>
</html>
반응형
'HTML_CSS' 카테고리의 다른 글
| (HTML CSS) float: 3단 레이아웃 만들기 (0) | 2023.11.20 |
|---|---|
| Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기 (0) | 2023.09.21 |
| (HTML) 교재 소스 다운로드 [HTML5 + CSS3 웹 표준의 정석] (0) | 2023.09.08 |
| (HTML5) 특수문자, 기호 사용하기 (0) | 2023.09.08 |
| HTML5 최신 표준 태그 (0) | 2023.09.07 |