티스토리 뷰

Useful-tools

구글 폰트 이용하기

RunningWater 2018. 1. 22. 00:58

구글폰트 이용하기



구글에서는 무료이면서 상업적으로도 사용할 수 있는 폰트들을 모아 두고 개발자가 이용할 수 있게 만들어 놓아습니다. 바로 오늘 포스팅할 구글 폰트입니다.

 


google fonts링크를 클릭하면 사진과 같은 화면이 나옵니다.


기능을 하나씩 알아보고 코드에 삽입해 보겠습니다. 우선 폰트 이름 밑에 영어로 된 문장들이 보이시죠? 저 부분은 폰트를 사용하면 어떻게 보이는지 보여줍니다. 그리고 문장 부분은 클릭하면 수정할 수 있습니다. 한번 바꿔볼까요?


폰트수정lemon candy's blog로 모두 바꿔보았습니다.


마음에 드는 폰트가 있나요? 그럼 폰트이름 옆에 있느 +를 눌러주세요. 마음에 드는 것이 많으면 여러개를 클릭하셔도 상관 없습니다. 클릭하고 나면 홈페이지의 하단에 창이 하나 생깁니다. 창을 클릭해주세요


구글폰트 창저는 리스큐와 로보토 폰트를 선택했습니다.


<link>태그를 이용하는 것이 기준이 된다고 하니 일단 <link>태그를 사용해서 예제를 만들어 보겠습니다. <link>태그는 <head>태그 사이에 넣고, font-famaily 부분은 css에 삽입하면 됩니다. 예제코드를 봐주세요.


<head>
    <title>web font</title>
    <link href="https://fonts.googleapis.com/css?family=Risque|Roboto" rel="stylesheet">
    <style>
      #risque{
        font-family: 'Risque', cursive;
      }
      #roboto{
        font-family: 'Roboto', sans-serif;
      }
   </style>
 </head>
 <body>
   <p id="risque">hello world</p>
   <p id="roboto">hello world</p>
 </body>


#risque인 <p>태그에는 폰트로 risque를 적용시키고, #roboto인 <p>태그에는 폰트로 roboto를 적용시켰습니다. font-family 속성은 폰트를 적용시키는데 혹시 값들 중에 맨 왼쪽에 있는 폰트가 없다면그 옆에 있는 폰트로 내용을 보여주라는 뜻입니다. 예제 파일을 실행하면 폰트가 달라진게 보여지나요? 이제 커스터마이즈에 대해서 알아볼까요?


커스터마이즈customize 라고 적힌 부분을 클릭해주세요


더 담고 싶은 부분을 클릭하면 추가로 사용할 수 있습니다. 하지만 홈페이지의 이용자가 다운받기 때문에 또 너무 포함하면 무거워지겠죠?


<style>
   @import url('https://fonts.googleapis.com/css?family=Risque|Roboto');
   #risque{
     font-family: 'Risque', cursive;
   }
   #roboto{
     font-family: 'Roboto', sans-serif;
   }
</style>


이번엔 @import를 사용해 보겠습니다. <link>태그를 지운후에 <style>태그 사이에 @import url('주소')를 넣어주세요. 실습파일을 실행하시면 똑같은 결과를 볼 수 있습니다. 하지만 <link>태그가 기준으로 되어있는 것은 import를 사용할 경우에 문서를 다 읽은 후에 폰트가 적용될 수 있기 때문입니다.(그렇게 되면 문서가 깜빡이면서 폰트가 적용되겠지요.) 구글폰트 사용 시에 되도록이면 <link>태그를 통해서 사용하는 것을 권장드립니다. 그리고 한글 폰트를 찾으려면 google fonts - early access에 접속하셔야 합니다.



위의 링크로 이동해서 ctrl + f를 누르시고 korea를 검색해주세요. 그러면 사용할 수 있는 폰트들이 나옵니다. 


개발할 때 더 유용한 도구들을 찾아서 꾸준히 포스팅하도록 하겠습니다.



공감은 제작자에게 큰 힘이 됩니다.


댓글