티스토리 뷰
구글폰트 이용하기
구글에서는 무료이면서 상업적으로도 사용할 수 있는 폰트들을 모아 두고 개발자가 이용할 수 있게 만들어 놓아습니다. 바로 오늘 포스팅할 구글 폰트입니다.
기능을 하나씩 알아보고 코드에 삽입해 보겠습니다. 우선 폰트 이름 밑에 영어로 된 문장들이 보이시죠? 저 부분은 폰트를 사용하면 어떻게 보이는지 보여줍니다. 그리고 문장 부분은 클릭하면 수정할 수 있습니다. 한번 바꿔볼까요?
마음에 드는 폰트가 있나요? 그럼 폰트이름 옆에 있느 +를 눌러주세요. 마음에 드는 것이 많으면 여러개를 클릭하셔도 상관 없습니다. 클릭하고 나면 홈페이지의 하단에 창이 하나 생깁니다. 창을 클릭해주세요
<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 속성은 폰트를 적용시키는데 혹시 값들 중에 맨 왼쪽에 있는 폰트가 없다면그 옆에 있는 폰트로 내용을 보여주라는 뜻입니다. 예제 파일을 실행하면 폰트가 달라진게 보여지나요? 이제 커스터마이즈에 대해서 알아볼까요?
더 담고 싶은 부분을 클릭하면 추가로 사용할 수 있습니다. 하지만 홈페이지의 이용자가 다운받기 때문에 또 너무 포함하면 무거워지겠죠?
<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를 검색해주세요. 그러면 사용할 수 있는 폰트들이 나옵니다.
개발할 때 더 유용한 도구들을 찾아서 꾸준히 포스팅하도록 하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Useful-tools' 카테고리의 다른 글
| git으로 버전 관리하기 3 (0) | 2018.03.16 |
|---|---|
| git으로 버전 관리하기 2 (0) | 2018.03.16 |
| git으로 버전 관리하기 (0) | 2018.03.15 |
| 저작권 없는 이미지 사용과 간단한 이미지 api 예시 (0) | 2018.01.26 |
| cdn을 이용해서 홈페이지에 아이콘 무료 사용 - 폰트어썸 (1) | 2018.01.24 |