CSS web font

font-family에서 지정한 글꼴이 사용자의 컴퓨터에 설치되어 있지 않을 경우 기본값으로 표시된다. Web Font를 사용하면 사용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있다. 원하는 font가 있는 곳으로 연결하여, 외부스타일을 불러와서 쓴다. web-safe font를 매번 사용하지 않아도 되었다.

방법 1 : link

<head>
<link href='https://fonts.googleapis.com/css?family=Stardos+Stencil:700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
h1.p(font-family="stardos Stencil", sans-serif;)
</style>
body {
  font-family: 'Open Sans', sans-serif;
}

방법 2 : @import

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  font-family: 'Open Sans', sans-serif;
}

방법 3 : @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

font URL은 소문자로 해야 한다. 대문자가 포함될 경우 IE에서 예상치 못한 결과를 얻게 될 수도 있다.
사용하려면 적용하고 싶은 element에 font-family property를 지정해주면 된다.
@font-face{
font-properties(Required)
font-family : name
src : URL

font-stretch : normal/condensed…-ultra,extra,semi/expanded…
font-style : noraml/italic/oblique
font-weight :noraml/bold/100-900
unicode-range
}

COMMENT :

web font가 로드되는 데 시간이 걸리는 시간도 생각해서 적용해야 한다.
각 font type별로 적용되는 브라우저와 버전이 다르므로 주의한다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s