[CSS] 텍스트 관련 스타일 (font) / 웹 폰트 가져오기

[CSS] 텍스트 관련 스타일 (font) / 웹폰트 가져오기

---

✔️ font-family 속성

: 시스템 내 폰트 이름 중 하나를 사용한다.

: 여러 개 지정이 가능하며, 폰트명은 따옴표로 감싸주며, 폰트명이 한 단어인 경우 따옴표로 감싸지 않아도 된다.

.box1 { font-family: "Nanum Gothic", sans-serif; }
.box2 { font-family: "Nanum Myeongjo", sans-serif; }
.box3 { font-family: "Nanum Gothic Coding", sans-serif; }
.box4 { font-family: "Nanum Brush Script", sans-serif; }
.box5 { font-family: "Nanum Pen Script", sans-serif; }
.box6 { font-family: "Hanna", sans-serif; }
.box7 { font-family: "Nato Sans KR", sans-serif; }

 

 

✔️ 웹폰트

: 웹 폰트는 로컬의 폰트 설치 상황과 관계없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있는 기술이다.

: 웹 폰트는 사용된 페이지를 표시할 때 웹 폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용 가능한 폰트를 사용하여 텍스트를 표시한다.

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(https://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(https://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

💡 @font-face  : 폰트 파일을 서버에 두고 요청이 오면 클라이언트로 전송하는 방식이다.