[CSS] 웹 폰트 설정하기

1) 파일로 가져오기

@font-face{ 
  font-family: 'Noto Sans KR';
  src: url('../fonts/notosanskr.woff') format('woff');
}

*{
   font-family: Noto Sans KR, sans-serif;
   font-weight: 300;
}

 

웹폰트 확장자는 woff이다. ttf나 otf 포맷은 woff로 변환하여 사용할 수 있다.
변환은 아래의 사이트를 이용하여 할 수 있다.
https://convertio.co/kr/ttf-woff/
https://convertio.co/kr/otf-woff/

 

2) url로 가져오기

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

*{
   font-family: 'Noto Sans KR', sans-serif;
   font-weight: 300;
}

 

https://fonts.google.com/earlyaccess에서 다양한 글꼴을 지원해준다.
위 사이트에서 자신의 취향에 맞는 글꼴을 골라 url을 import 해주면 된다.
찾기(Ctrl+F)로 Korean을 검색하면 한글 지원 폰트를 쉽게 찾을 수 있다.
이하는 현재 지원하는 한글 폰트들이다.

 

 

Nanum Pen Script (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css); 

*{
    font-family: 'Nanum Pen Script', cursive;
}

 

Jeju Gothic (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css); 

*{
    font-family: 'Jeju Gothic', sans-serif;
}

 

Jeju Myeongjo (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css); 

*{
    font-family: 'Jeju Myeongjo', serif;
}

 

KoPub Batang (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css); 

*{
    font-family: 'KoPub Batang', serif;
}

 

Nanum Brush Script (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); 

*{
    font-family: 'Nanum Brush Script', cursive;
}

 

Noto Sans KR (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 

*{
    font-family: 'Noto Sans KR', sans-serif;
}

 

Hanna (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css); 

*{
    font-family: 'Hanna', sans-serif;
}

 

Nanum Gothic (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 

*{
    font-family: 'Nanum Gothic', sans-serif;
}

 

Nanum Myeongjo (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); 

*{
    font-family: 'Nanum Myeongjo', serif;
}

 

Jeju Hallasan (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css); 

*{
    font-family: 'Jeju Hallasan', cursive;
}

 

Nanum Gothic Coding (Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css); 

*{
    font-family: 'Nanum Gothic Coding', monospace;
}