01. 웹폰트 사용하기
: 사용하고 싶은 웹폰트를 구글에서 검색한 뒤 @import(css) 또는 link(html) 부분을 복사해 붙여넣는다.
02. 폰트를 설치하여 사용하기
폰트를 다운받아 설치 후, @font-face(css)를 사용한다.
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>];
[font-style: <style>];
}
# 사용예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-face</title>
<style>
/* 웹폰트 url 불러오기 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
/* 로컬 폰트 사용하기 */
@font-face {
font-family: 'Bw Vivant';
src: url(../fonts/bw-vivant-medium.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
.a{
font-family: 'Bw Vivant';
}
.b{
font-family: 'Montserrat', sans-serif;
}
</style>
</head>
<body>
<h1 class="a">HELLO WORLD! :)</h1>
<h1 class="b">HELLO WORLD! :)</h1>
<h1 class="c">HELLO WORLD! :)</h1>
</body>
</html>@font-face의 url은 윈도우 설정-> 글꼴 설정에 들어가 경로를 확인한 뒤 입력하면 된다.
참고:
https://aboooks.tistory.com/144
[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이)
[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) css에서는 원하는 글꼴을 지정할 때 font-family 속성을 사용합니다. 사용 예: p{ font-family; arial, 바탕체, "Times New Roman", Serif; } font-family 속성
aboooks.tistory.com
https://aboooks.tistory.com/144
[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이)
[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) css에서는 원하는 글꼴을 지정할 때 font-family 속성을 사용합니다. 사용 예: p{ font-family; arial, 바탕체, "Times New Roman", Serif; } font-family 속성
aboooks.tistory.com
'HTML & CSS' 카테고리의 다른 글
| text-shadow와 text-stroke (0) | 2022.11.21 |
|---|---|
| 웹폰트 cdn 연결 사이트 (0) | 2022.11.21 |
| 클릭하면 열리는 menu bar (0) | 2022.11.21 |
| [css]Position 속성 정리: fixed/static/absolute/relative (0) | 2022.11.04 |
| [HTML/js] a태그와 button 태그의 쓰임 & e.preventDefault (0) | 2022.10.31 |