웹서비스를 할 때 누구에게나 같은 모양의 페이지를 보여줘야 하기 때문에 웹폰트의 중요성은 매우 높다고 할 수 있다.
쉽게 사용하는 방법으로는 구글 폰트 https://fonts.google.com/ 를 이용하는 방법이 있는데
사이트를 보면 대부분이 영어를 위한 폰트이며 한글은 없을 것 같다.
하지만 구글에서는 여러 나라의 폰트를 지원하며 한글 폰트 역시 지원하고 있다. https://fonts.google.com/earlyaccess
현재 구글에서 지원해주는 한글 폰트 11가지를 소개하겠다.
1. Hanna (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/hanna.css);
Example : font-family: 'Hanna', sans-serif;
2. Jeju Gothic (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
Example : font-family: 'Jeju Gothic', sans-serif;
3. Jeju Hallasan (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
Example : font-family: 'Jeju Hallasan', cursive;
4. Jeju Myeongjo (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
Example : font-family: 'Jeju Myeongjo', serif;
5. KoPub Batang (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);
Example : font-family: 'KoPub Batang', serif;
6. Nanum Brush Script (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
Example : font-family: 'Nanum Brush Script', cursive;
7. Nanum Gothic (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
Example : font-family: 'Nanum Gothic', sans-serif;
8. Nanum Gothic Coding (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
Example : font-family: 'Nanum Gothic Coding', monospace;
9. Nanum Myeongjo (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
Example : font-family: 'Nanum Myeongjo', serif;
10. Nanum Pen Script (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
Example : font-family: 'Nanum Pen Script', cursive;
11. Noto Sans KR (Korean)
ex) 가나다라마바사Link : @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
Example : font-family: 'Noto Sans KR', sans-serif;
'Web development > HTML & CSS' 카테고리의 다른 글
| 모달(레이어)팝업 및 오늘 하루 열지 않기 (0) | 2017.12.25 |
|---|---|
| 반응형 웹 디자인이란? (0) | 2017.11.11 |
| CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0) | 2017.08.12 |
| CSS 선택자(selector) 종류 정리 요약 (0) | 2017.07.26 |
| CSS 정의 및 특징 (0) | 2017.07.22 |
