구글 웹 폰트를 사용하는 방법에 대해서 알아보겠습니다. 구글 웹 폰트를 검색하면 사이트에 들어가서 원하는 폰트를 클릭하고 link 부분을 복사해서 아래와 같이 코드에 삽입해서 사용할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>구글 웹 폰트</title>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style>
h1 {
font-size:3em;
font-family: 'Bree Serif', serif;
}
p {
font-size:1.5em;
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<h1>Web Fonts</h1>
<p>웹 폰트를 테스트하고 있습니다.</p>
</body>
</html>
예시로 <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">링크를 구글 웹 폰트 사이트에서 복사하여 코드에 붙여넣은 뒤 h1은 Bree Serif 폰트를 p는 Nanum Pen Script 폰트를 적용하였습니다. 결과는 아래와 같습니다.
'웹 개발 > Front End' 카테고리의 다른 글
| 부트스트랩을 이용한 사이트 만들기 (0) | 2021.11.09 |
|---|---|
| 플렉스 박스 사이트 만들기 (0) | 2021.11.09 |
| 캐러셀 (0) | 2021.11.08 |
| 유튜브 동영상 풀 스크린 배경으로 사용하기 (0) | 2021.11.08 |
| 풀 스크린 배경 (0) | 2021.11.08 |
댓글