개발공부/웹
구글 폰트 내 웹 사이트에 적용하는 방법
개발자 찐빵이
2023. 1. 26. 23:20
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;
}그럼 폰트가 적용된 화면을 볼 수 있다.
반응형