반응형
⬇ 구글 폰트에서 원하는 글꼴 찾기 ⬇
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
사용한 글꼴 : Inconsolata
@import 로 글꼴 적용하기
⭐️ import 부분은 반드시 style 태그의 최상단에 위치해야 함 ⭐️
<!DOCTYPE html>
<html lang="ko">
<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>Web Font</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
p {
font-family: 'Inconsolata', monospace;
}
</style>
</head>
<body>
<p>Welcome, Ellie Programming World</p>
<p>Ellie Trip World 도 놀러오세요</p>
<a href="https://ellie-kang.tistory.com/">Ellie Trip World 바로가기</a>
</body>
</html>Welcome, Ellie Programming World
Ellie Trip World 도 놀러오세요
Ellie Trip World 바로가기<link> 로 글꼴 적용하기
<!DOCTYPE html>
<html lang="ko">
<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>Web Font</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=Inconsolata&display=swap" rel="stylesheet">
<style>
p {
font-family: 'Inconsolata', monospace;
}
</style>
</head>
<body>
<p>Welcome, Ellie Programming World</p>
<p>Ellie Trip World 도 놀러오세요</p>
<a href="https://ellie-kang.tistory.com/">Ellie Trip World 바로가기</a>
</body>
</html>Welcome, Ellie Programming World
Ellie Trip World 도 놀러오세요
Ellie Trip World 바로가기
미리보기로 알수 있듯이
<link>와 @import 두 방법모두
p태그를 사용한 글자들은 Inconsolata 글꼴이 잘 적용되었다 👍
반응형
'HTML + CSS + 자바스크립트' 카테고리의 다른 글
| var, let, const 차이점 비교 한 눈에 확인하기 (2) | 2023.12.04 |
|---|---|
| 반응형 웹을 만드는 주요 기술 중 하나 '미디어 쿼리(media query)' (0) | 2023.11.30 |
| animation-fill-mode 속성값으로 애니메이션 실행 전 후 스타일 지정하기 (0) | 2023.11.29 |
| 다양한 transition-timing-function 속성값으로 전환 효과 진행 속도 지정하기 (0) | 2023.11.29 |
| 다양한 border-style 속성값 활용하기 (0) | 2023.11.28 |
