728x90
※ mac 사용, safari 사용
1. 구글 웹 폰트 링크 : https://fonts.google.com/?subset=korean¬o.script=Kore
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 원하는 폰트 선택 후 Select Regular 400 클릭
3. (-) 아이콘 확인 후 우측 상단 아이콘 클릭
4. link 태그(빨간색 상자)는 <head> 부분에 복사, CSS(파란색 상자)는 <style>에 복사
5. 실습 코드
<!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=Kirang+Haerang&display=swap" rel="stylesheet">
<style>
div {
width: 300px;
height: 300px;
background-image: url('../test/books.jpg');
background-size: cover;
/* 적용할 부분에 넣어주기 */
font-family: 'Kirang Haerang', cursive;
}
</style>
</head>
<body>
<div>
<h1>안녕하세요!</h1>
</div>
</body>
</html>
728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] 다중 클래스 접근 및 Font-weight : Bold 설정 (0) | 2024.05.16 |
|---|---|
| [CSS] 글자 관련 CSS 정리 (0) | 2023.02.16 |
| [CSS] 여백(margin/padding) 기본 개념 정리 (0) | 2023.02.12 |
| [CSS] CSS 선택자(Selector) 정리 (0) | 2023.02.12 |
| [CSS] 배경(background) 관련 기본 CSS 사용해보기 (0) | 2023.02.06 |
