구글에 폰트를 검색하면 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>
수행결과
'개발자노트 > 웹' 카테고리의 다른 글
| HTML JS(내부스크립트, onclick ) 함수사용 기본예제 (0) | 2022.07.25 |
|---|---|
| HTML 외부 Script [JS] 불러오기 (0) | 2022.07.25 |
| Html - 애니메이션 효과2 (애니메이션 프레임 , transform) (0) | 2022.07.22 |
| Html - 애니메이션 효과 (text-decoration , transition) (0) | 2022.07.22 |
| 웹 크롤링 - Jsoup을 이용한 ( CGV ) 크롤링 (0) | 2022.07.22 |
