Html - 외부 폰트 사용하기

개발자노트/웹

Html - 외부 폰트 사용하기

hansummer 2022. 7. 22. 17:30

구글에 폰트를 검색하면 https://fonts.google.com/ 라는 무료폰트 제공 사이트가 있다.

이곳에서 우리가 사용할 것은 한글이니 Language를 한글로 바꿔주고

마음에 드는 글씨체를 찾았다면 들어가서

Select를 누르게 되면 우측에 네비게이션 바가 열리는데,

이 <link>의 내용을 html의 <head>에 작성하고

적용할 태그 / 클래스 등에 style을 적용하여 사용하면 된다.

<!DOCTYPE html>
<html>
<head>
<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=Single+Day&display=swap" rel="stylesheet">
						<!-- url이기 때문에 공백이 안돼서 Single+Day로 되지만, 실제로는 띄어쓰기를 해야함 -->
<meta charset="UTF-8">
<title>웹 폰트</title>
<style type="text/css">
	.gfont {
		font-family: "Single Day";
		font-size : 50px;
	}

</style>
</head>
<body>

<p>가나다라마바사</p>
<p class="gfont">아자차카타파하</p>

</body>
</html>

수행결과