CSS 폰트 적용 방법

font-family 속성 : 글꼴지정

---

font-family: 글꼴이름;
font-family: 글꼴이름, 글꼴이름;
font-family: "맑은 고딕", 돋음, 굴림;

※ 글꼴이 없을 경우 대비하여 여러 개 등록하는 것임.

CSS3가 웹 폰트를 표준으로 채택하면서 사용자에게 없는 글꼴도 웹 문서와 함께 다운로드하여 보여줄 수 있게 되었다.
자신의 글꼴을 적용하기 위해서는 ttf,EOT,WOFF,WOFF2포맷을 직접 업로드해야한다.

※ TTF은 용량커서 Woff를 먼저지정해야 함

@font-face {
  font-family: 글꼴이름;
  src: 글꼴파일, 글꼴파일;
}

@font-face {
  font-family: 'HelloFont';
  src: local('HelloFont'), url('font/hello-font.woff) format('woff'),
  src: local('HelloFont'), url('font/hello-font.ttf) format('truetype'),
  src: local('HelloFont'), url('font/hello-font.svg) format('svg');
}
.wfont {
  font-family: 'HelloFont', "맑은 고딕";
}

 

구글 폰트에서 무료 웹 폰트를 링크와 함께 제공해준다.

Google Fonts

link 또는 import를 코드에 복붙하면 된다.

/* test.html */
<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:wght@300&display=swap" rel="stylesheet">

/* css/style.css */
* {
  font-family: 'Noto Sans KR', sans-serif;
}

 

font-size 속성 : 글꼴 크기지정

---

font-size: 절대크기;  (브라우저 지정크기)
font-size: 상대크기;  (부모 글자크기 기준으로 상대적인 크기)
font-size: 크기;      (브라우저와 관계없이 지정)
font-size: 백분율;    (부모 글자크기 기준으로 백분율(%) 크기)

※ 단위 : px(픽셀), pt(포인트), 백분율(%)

글꼴 키워드

xx-small < x-small < small < medium < larger < x-large < xx-large

글꼴 단위

종류	설명
em	부모 요소 글꼴의 대문자 M 너비 기준 = 1em
rem	문서 시작 부분(root)에서 지정한 크기 기준 = 1rem
ex	해당 글꼴의 소문자 x의 높이 기준 = 1ex
px	모니터 1픽셀 기준 = 1px
pt	포인트, 일반 문서에서 사용됨

부모 글꼴 크기가 단위로 표기되어있어야 자식에서 백분율(%) 지정가능하다.

최근에는 모바일 기기등을 고려하여 em, rem을 많이 사용함

 

font-style 속성 : 이텔릭체 표현

---

font-style : normal;  기본
font-style : italic;  이텔릭체
font-style : oblique; 기울어지게

 

 

font-weight 속성 : 글자 굵기 지정

---

font-weight: normal;    기본 굵기
font-weight: bold;      굵게
font-weight: bolder;    원래보다 더 굵게
font-weight: lighter;   원래보다 더 가늘게
font-weight: 100...900; 100~900 사이의 값