개인적인 것/주워 배운 것들

Google web font site 이용하기

뉴질랜드 외국인 2012. 10. 11. 12:01
반응형

구글 웹폰트를 이용하는 방법은 다음과 같다.


1. 사용방법은 두가지가 있다. 

      1. @import를 이용하기
      2. 링크를 <head></head> 사이에 걸어 사용하기


우리가 밑의 파일을 만들었다고 가정한다.


View.html - 화면을 보여줄 페이지 이름

Style.css - 스타일을 적용할 스타일시트 가 있다고 가정하고 어떻게 적용하는지 알아본다.




구글 웹 폰트 바로가기 :

http://www.google.com/webfonts#


구글에서 웹 폰트를 사용하는 방법은 선택 > 리뷰 > 사용 이렇게 세가지로 먼저 사용할 폰트를 고른 후 리뷰, 사용 페이지에서 소스를 얻어오는 방식이다.





1. @import를 이용하기.


간단하게 @import url를 사용하여 CSS파일에 불러오는 방식이다. Style.css 파일에 작성한다. 그 후 Style.css파일을 View.html에 링크를 건다.



  •  Style.css

@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC); 

body { 

display: block;
font-family: ‘Carrois Gothic SC’;
font-size: 100%;

}


  • View.html

<head>
<title>title</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link href=’http://css파일이 저장된 경로 주소.css ’ rel=’stylesheet’ type=’text/css’ media='all'>

</head>






2. 링크를 <head> 와 </head>에 넣어 사용하기


헤드 사이에 직접 웹 폰트가 있는 위치를 링크 시켜 걸어주는 방식이다. 직접 보여줄 웹 페이지 헤드와 헤드 사이에 링크한 후, 폰트를 사용할 곳에 스타일를 적어주면 된다.


  •  Style.css

body { 
display: block;
font-family: ‘사용하고자 하는 폰트이름’;
font-size: 100%;

}


  • View.html

<head>
<title>title</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” href=”Style.css” type=’text/css’ media=’all’ />
<link href=’http://fonts.googleapis.com/css?family=Carrois+Gothic+SC’ rel=’stylesheet’ type=’text/css’>

</head>


 


이 방법들보다 더 좋은 방법들이 있을지도 모르나 개인 경험으로는 이 정도만 알고 있으니 참고하시길 바랍니다.







반응형