CSS에 폰트를 적용하기 위해선 두 가지 방법이 있습니다.
1) 웹 폰트
2) 자신이 가지고 있는 폰트 파일 이용
오늘은 웹 폰트를 적용하는 방법에 대해 알아보겠습니다.
웹 폰트
웹 폰트는 내 PC에 폰트 파일이 없어도 적용 가능합니다.
특정한 서버에 접속하여 파일을 내려받아 화면에 표현할 수 있죠.
대표적인 웹 폰트에는 Google Fonts가 있습니다.
누구나 무료로 사용할 수 있으며 무려 800종류 이상의 웹 폰트가 존재합니다.
구글 웹 폰트 적용하는 방법
https://fonts.google.com 구글 폰트 사이트에는 영어 글꼴만 존재합니다.
https://fonts.google.com/earlyaccess 이 사이트는 한글을 포함하여 영어 이외의 글꼴을 제공합니다.
한글 폰트를 사용할 수 있는 사이트에 접속하여 'Ctrl + F'를 누른 뒤,
Korean이라고 검색하시면 한글 폰트를 사용할 수 있습니다.
첫 번째로 검색된 'Nanum Pen Script' 폰트를 적용해보도록 하겠습니다.
위에서 보시는 바와 같이 두 줄의 코드를 삽입하면 됩니다.
그런데 궁금한 게 있네요.
font-family: 'Nanum Pen Script' 뒤에 있는 cursive의 의미는 무엇일까요?
'흘림체'란 의미를 지니네요. 위처럼 폰트를 두 개씩이나 적용한 이유는
앞의 폰트가 적용되지 않을 경우, 뒤에 있는 폰트를 적용하기 위함이죠.
아래는 코드를 적용한 모습입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Font</title>
<style>
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
h1{
font-family: 'Nanum Pen Script', cursive;
}
</style>
</head>
<body>
<h1> 안녕하세요. Code.D 입니다. </h1>
</body>
</html>
다음은 결과 화면입니다.
화면 결과를 보니, '안녕'에서 '녀' 글자가 조금 이상하네요?
원래 'ㅕ'자가 들어가면 저러나 했더니 다른 글자는 그렇지 않습니다.
(혹시 몰라 병,졍,뎡,경,셩 등등을 입력해보았지만 '녕'자만 이상하네요...
제 PC의 일시적인 오류인 걸까요? 아니면 원래 폰트가 그런 걸까요? 아무튼...)
구글 한글 웹 폰트는 2017년 7월 기준으로 총 11종류가 존재합니다.
11종류의 한글 폰트를 비교해서 보여드리도록 하겠습니다.
한글 폰트이지만 영어와 함께 쓰시는 분들을 위해 한글과 영어가 섞여 있는 예를 들어보도록 하겠습니다.
<!DOCTYPE html> <html> <head>Web Font </head> <body>안녕하세요. Code.D 입니다.('Nanum Pen Script')
안녕하세요. Code.D 입니다.('Jeju Gothic')
안녕하세요. Code.D 입니다.('Jeju Myeongjo')
안녕하세요. Code.D 입니다.('KoPub Batang')
안녕하세요. Code.D 입니다.('Nanum Brush Script')
안녕하세요. Code.D 입니다.('Noto Sans KR')
안녕하세요. Code.D 입니다.('Hanna')
안녕하세요. Code.D 입니다.('Nanum Gothic')
안녕하세요. Code.D 입니다.('Nanum Myeongjo')
안녕하세요. Code.D 입니다.('Jeju Hallasan')
안녕하세요. Code.D 입니다.('Nanum Gothic Coding')
</body> </html>
다음은 결과 화면입니다.
구글 웹 폰트를 적용하는 방법은 이뿐만이 아닙니다.
총 세 가지가 존재하는데,
1) @import를 사용하는 경우
2) 참조링크를 사용하는 경우
3) 자바스크립트를 사용하는 경우
위에서 제시한 @import를 이용하는 경우보다 참조링크를 사용하는 편이 훨씬 빠르고 안정적입니다.
@import를 사용하는 경우 깜빡이는 현상(Flash of Unstyled Text, FOUT)이 나타날 수 있습니다.
이는 폰트가 로딩되기 전에 폰트가 뜨지 않거나 대체 폰트로 보였다가
로딩된 후 제대로 된 폰트가 적용되는 것을 말합니다.
이러한 현상을 방지하기 위해 @import 보단 참조링크를 사용하는 것이 좋습니다.
@import는 CSS 파일 안에 넣어야 하지만 참조링크는 HTML 최상단에 넣을 수 있습니다.
2) 참조링크를 사용하는 경우
위의 예시에서 @import를 빼고 참조링크를 삽입해보도록 하겠습니다.
@import에서 쓰였던 주소는 그대로 사용하겠습니다.
<!DOCTYPE html> <html> <head>Web Font </head> <body>안녕하세요. Code.D 입니다.('Nanum Pen Script')
안녕하세요. Code.D 입니다.('Jeju Gothic')
안녕하세요. Code.D 입니다.('Jeju Myeongjo')
안녕하세요. Code.D 입니다.('KoPub Batang')
안녕하세요. Code.D 입니다.('Nanum Brush Script')
안녕하세요. Code.D 입니다.('Noto Sans KR')
안녕하세요. Code.D 입니다.('Hanna')
안녕하세요. Code.D 입니다.('Nanum Gothic')
안녕하세요. Code.D 입니다.('Nanum Myeongjo')
안녕하세요. Code.D 입니다.('Jeju Hallasan')
안녕하세요. Code.D 입니다.('Nanum Gothic Coding')
</body> </html>
다음은 결과 화면입니다.
웹 사이트의 버벅거림을 방지하기 위해 글꼴은 최대한 적은 종류를 쓰는 편이 좋습니다.
두 가지 이하의 폰트 종류를 적용하는 것이 좋다고 하네요.
3) 자바스크립트를 사용하는 경우
마지막으로 자바스크립트를 사용하는 경우입니다.
두 가지로 나뉠 수 있는데요,
3-1) 웹 폰트 로더 동기방식과
3-2) 웹 폰트 비동기 로더 방식이 있습니다.
동기(synchronous: 동시에 일어나는) 방식과 비동기(Asynchronous: 동시에 일어나지 않는) 방식의 차이는 데이터를 주고받는 방법에 의해 나뉠 수 있습니다.
A가 B에게 X를 요청할 때, B가 응답을 해줘야만 A는 다음 작업을 처리할 수 있습니다.
즉, A와 B가 서로 실시간으로 요청하고 응답해야 한다는 소리죠.
그러나 비동기 방식은 A가 B에게 X를 요청할 때, B가 응답하지 않더라도 A는 다른 작업이 가능합니다.
3-1) 웹 폰트 로더 동기 방식
3-2) 웹 폰트 로더 비동기 방식
동기 방식과 비동기 방식의 코드에서
For google fonts는 구글 영문 폰트를 이용할 때 사용하시면 되고,
For early access or custom font는 구글 한글 폰트를 이용하실 때 사용하시면 됩니다.
정리하고 보니 너무 복잡하네요...
저는 그냥 참조링크를 사용하렵니다.
'Code.D IT 강좌 > HTML & CSS' 카테고리의 다른 글
| 파비콘(Favicon) 만들기 & 적용 (0) | 2017.06.22 |
|---|
