구글 웹폰트 사용하기

부트스트랩.CSS.JS/CSS2.1

구글 웹폰트 사용하기 - Google Font API

베누시안 2011. 8. 6. 03:39

구글에서는 222개의 웹폰트를 라이브러리에 저장해 놓고 자유롭게 사용하도록 하고 있습니다. 폰트를 임베딩한 효과를 볼 수 있으며 사용법은 다음과 같습니다.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

링크페이지로 가서 위 CSS 부분을 자신의 웹페이지 html코드의 head부분에 삽입합니다. 위에서는 body에 대해서 적용했는데 특정한 부분에 웹폰트를 적용하려면 CSS를 변경하면 됩니다. 예를 들어 content div의 h2 태그에 적용하고자 한다면

#content h2 { font-family: 'Tangerine', serif; font-size: 48px; }

serif는 오작동이 있을경우 기본 폰트를 사용하기 위함입니다. 위 코드를 적용하면 다음과 같이 나옵니다.

폰트에 CSS3의 그림자효과를 주려면 다음과 같이 합니다.

body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

인라인 방식으로도 사용이 가능합니다.

<div style="font-family: 'Font Name', serif;">Your text</div>

폰트를 바꾸려면 폰트디렉터리에서 이름을 알아낸 뒤 이름만 바꿔주면 됩니다. Inconsolata 의 경우 다음과 같이 합니다.

http://fonts.googleapis.com/css?family=Inconsolata

Tangerine, Inconsolata, Droid Sans 와 같이 여러개의 폰트를 불러올 경우 다음과 같이 합니다. 너무 많이 쓰면 느려져서 안된답니다.

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

폰트의 종류별로 불러오자면 다음과 같이 합니다.

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

폰트 스타일을 적용하려면 다음과 같이 합니다.

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

저작자표시 (새창열림)