[CSS] 텍스트 (font-family, <link>, @font-face)
2021. 6. 22. 00:38
728x90
01 font-family // 글꼴 사용
- 하나의 글꼴만을 설정 또는 여러 개의 글꼴을 같이 설정할 수도 있음.
- 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 설정.
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=
Kirang+Haerang&display=swap" rel="stylesheet">
<style>
.font1{
font-family: 'Kirang Haerang', '궁서';
}
</style>
</head>
</html>
@font-face {
font-family: 'gugi';
src: url(/font/Gugi-Regular.ttf);
}
02 <link> // 웹 폰트 사용
1. 구글 폰트 웹사이트에서 (https://fonts.google.com/?subset=korean) 폰트 선택
2. <link> 링크 복사.
3. <head>에 복사.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폰트 설정</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family
=Kirang+Haerang&display=swap" rel="stylesheet">
</head>
</html>
4. font-family 태그 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폰트 설정</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family
=Kirang+Haerang&display=swap" rel="stylesheet">
<style>
.font1{
font-family: 'Kirang Haerang', '궁서';
}
</style>
</head>
<body>
<p class="font1">폰트 - font - 1</p>
<p class="font2">폰트 - font - 2</p>
</body>
</html>
03 @font-face / 폰트 파일을 다운로드 후 사용
1. 폰트 다운로드 후 폴더에 넣기.
2. @font-face 태그 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>폰트 설정</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
@font-face {
font-family: 'gugi';
src: url(/font/Gugi-Regular.ttf);
}
.font2{
font-family: 'gugi';
}
</style>
</head>
<body>
<p class="font1">폰트 - font - 1</p>
<p class="font2">폰트 - font - 2</p>
</body>
</html>
※ @font-face 에서의 font-family 는 글꼴의 이름을 정함. 해당 이름을 가진 글꼴은 src에 들어있다.
728x90
'CSS > Study' 카테고리의 다른 글
| [CSS] 텍스트 (word-spacing, letter-spacing) (1) | 2021.06.27 |
|---|---|
| [CSS] 텍스트 (text-align, text-decoration) (1) | 2021.06.27 |
| [CSS] 텍스트 (font-size) (1) | 2021.06.22 |
| [CSS] 텍스트 (font-style, font-weight) (1) | 2021.06.22 |
| [CSS] 선택자 (전체 선택자 "*", 태그 선택자, 아이디 선택자"#", 클래스 선택자".", 그룹 선택자) (1) | 2021.06.22 |
