- 구글 폰트
- 눈누
font-size : 글꼴의 크기를 지정하는 속성
px : 픽셀(화면 해상도)
pt : 포인트(1pt = 0.72인치)
% : 상위 요소 크기에 대한 백분율
em : 1em == 100%
font-weight : 글꼴의 굵기(두께)를 지정하는 속성
숫자 : (얇음) 100 ~ 900 (두꺼움) (100단위)
nomal : 폰트에 지정된 기본 두께(400)
bold : 굵게 (700)
bolder : 상속 받은 두께보다 더 굵게
lighter : 상속 받은 두께보다 더 얇게
1. (html)link 태그를 이용한 방법
HTML <head> 부분에 preconnect 필요한 연결을 미리 해준다
<link rel="stylesheet" href="css/font-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=Single+Day&display=swap" rel="stylesheet">
CSS 부분에 글꼴 적용
#family-test2 > li:nth-child(1) {
font-family: 'single Day', cursive;
}2. import는 css 파일 제일 상단에 작성
CSS 부분 최상단 부분에 import 후
@import url('https://fonts.googleapis.com/css2?family=Inter&family=Nunito+Sans&display=swap');
css태그 작성
#family-test2 > li:nth-child(2) {
font-family: 'Inter', sans-serif;
}3. @font-face 이용
최상단에 작성하지 않아도 됨
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
3. @font-face 이용
#family-test2 > li:nth-child(3) {
font-family: 'Pretendard-Regular', cursive;
}4. 글꼴 전체 적용
글꼴 전체 적용
* {
font-family: 'Pretendard-Regular', cursive;
}
안녕하세요!