웹폰트, CSS @font-face

web typography, web fonts
웹폰트

CSS @font-face Rule
CSS @font-face 규칙
CSS 웹폰트 적용

1 웹폰트[ | ]

웹상에서 폰트를 표시하는 기술
웹서버상에 폰트 파일을 두어 웹디자이너가 의도한 폰트로 표시할 수 있게 하는 기술^[1]

2 예시 1: 기초[ | ]

woff 파일 1개만 연결한 경우
두꺼운 글씨체에서 흐릿하게 나올 수 있음

html

Copy

<style>
@font-face {
    font-family: myFont;
    src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff');
}
.ng { font-family: myFont; }
</style>
 
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>

3 예시 2: bold도 지정[ | ]

두꺼운 글씨용 폰트도 지정해준 경우

html

Copy

<style>
@font-face {
    font-family: myFont;
    font-weight: 400;
    src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff');
}
@font-face {
    font-family: myFont;
    font-weight: 800;
    src: url('//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff');
}
.ng { font-family: myFont; }
</style>

<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>

4 예시 3: 구글 CSS 사용 ★[ | ]

구글 등 CDN을 통해 제공되는 웹폰트CSS는 대부분 두꺼운 글씨체 문제가 해결되어 있다.
link 태그 또는 CSS @import를 통해 연결하자.

link 태그로 연결한 경우

html

Copy

<link rel='stylesheet' href='//fonts.googleapis.com/earlyaccess/nanumgothic.css'>
<style>
.ng { font-family: "Nanum Gothic"; }
</style>
 
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>

CSS @import로 연결한 경우 ★

html

Copy

<style>
@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
.ng { font-family: "Nanum Gothic"; }
</style>
 
<p>(기본폰트) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>
<p class='ng'>(나눔고딕) <strong>다람쥐</strong> 헌 쳇바퀴에 타고파. <strong>무궁화</strong> 꽃이 활짝 피었습니다.</p>

5 같이 보기[ | ]

6 무료 한글 웹폰트[ | ]

스포카 한 산스

7 주석[ | ]

↑ 전통적으로 웹브라우저는 로컬(이용자의 컴퓨터)에 설치된 폰트로만 문자를 표시하였기에 폰트 설치 여부에 따라 웹디자인에 제약이 있었음 → 웹폰트가 가능해져 문제 해결

8 참고[ | ]

[1] 전통적으로 웹브라우저는 로컬(이용자의 컴퓨터)에 설치된 폰트로만 문자를 표시하였기에 폰트 설치 여부에 따라 웹디자인에 제약이 있었음 → 웹폰트가 가능해져 문제 해결

[1]