반응형
1. 구글 폰트 사이트에서 폰트 확인하기
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
2. 한국어 폰트만 찾도록 Language를 Korean으로 변경
3. 원하는 폰트를 하나 골라 클릭 → 원하는 굵기의 폰트를 골라 select this style 클릭
4. <link> 방식 / @import 방식으로 웹 폰트 불러오기
▶ <link> 방식 : html 파일 내 head 태그 안에 코드 복사해서 붙여 넣기
▶ @import 방식 : 외부 스타일 시트(따로 분리한 css 파일)에 코드 복사해서 붙여 넣기
5. 웹 폰트 적용하기
: 위 캡쳐본에서 CSS rules to specify families 부분을 css 파일에 h1 태그로 묶은 후 복사해서 붙여 넣기
→ html 파일에서 화면에 표시할 글씨를 h1 태그로 묶어둠
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap');
h1{
font-family: 'Noto Serif KR', serif;
font-size:40px;
}→ 위 코드에서는 글씨 크기를 조절하는 font-size도 추가로 사용
# 전체 코드
<!DOCTYPE html>
<html>
<head>
<title> This is a Test File.</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>글씨체 바꾸기</h1>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap');
h1{
font-family: 'Noto Serif KR', serif;
font-size:40px;
}
반응형
'Web > 모각코' 카테고리의 다른 글
| [ Visual Studio Code ] 텍스트 색 각자 다르게 설정하기 (0) | 2021.12.19 |
|---|---|
| [ Visual Studio Code ] 태그 정리 (0) | 2021.12.18 |
| [ Visual Studio Code ] css 적용 방법 (0) | 2021.12.13 |
| [ Visual Studio Code ] html 파일 생성 (0) | 2021.12.13 |
| [ Visual Studio Code ] [ Window ] Visual Studio Code 설치 (0) | 2021.12.13 |