티스토리 뷰

HTML5+CSS3

구글 웹폰트 사용하기

hjsjfather 2018. 3. 15. 11:59

대표적인 웹폰트 제공 사이트는 Google Fonts입니다. 800개가 넘는 웹폰트가 있으며, 누구나 무료로 사용할 수 있습니다.

 

https://fonts.google.com/

 

하지만, 여기에는 영어 글꼴만 있습니다. 한글을 비롯한 영어 이외의 글꼴은 Google Fonts Early Access로 가야합니다.

 

https://fonts.google.com/earlyaccess

 

 

글꼴 설명과 함께 두 줄의 코드가 있습니다.

 

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

 

글꼴을 사용할 수 있게 불러오는 코드입니다. CSS 코드 제일 위에 입력합니다.

 

font-family: 'Nanum Pen Script', cursive;

 

 

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
      h1 { font-family: 'Nanum Pen Script', cursive; }
   
</style>
  </head>
  <body>
    <h1>가나다라마바사아자차카다파하</h1>
  </body>
</html>

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함