728x90
구글 폰트 웹 사이트에 들어가 원하는 폰트를 찾는다.
폰트를 선택하면 왼쪽 바에 Use on the web이라는 메뉴가 보인다.
위에 보이는 링크를 복사해서 HTML 헤더에 추가한다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="module" src="src/main.js"></script>
<link rel="stylesheet" href="./style.css" />
<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=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
...
</head>CSS에서 폰트를 적용할 지역에 CSS rules to specify families에 나온 폰트 코드를 넣어준다.
body * {
font-family: 'Noto Sans KR', sans-serif;
}그럼 폰트가 적용된 화면을 볼 수 있다.
반응형
'개발공부 > 웹' 카테고리의 다른 글
| addEventListener()과 onclick()의 차이 (0) | 2023.02.14 |
|---|---|
| 시맨틱 마크업, 왜 필요할까? (0) | 2023.01.28 |
| CSS에서 다크모드 설정 방법 (feat. prefers-color-scheme) (0) | 2023.01.26 |
| [React] memo와 react hook (0) | 2022.04.23 |
| React의 pureCompoent 특징 (0) | 2022.04.23 |