나눔고딕 구글 웹폰트 적용, 제대로 배우기
티스토리나 웹사이트에서 나눔고딕 글꼴을 적용하는 생각보다 쉬운 방법이 있습니다.
구글 웹폰트를 사용하면, ie6~11 뿐 아니라, 구글 크롬, 파이어폭스에서도 나눔고딕 글꼴로 표시할 수 있어요
원리는, 구글에서 제공하는 웹폰트를 링크로 연결해 사용하는 방법입니다.
그동안 제 블로그의 경우, eot 파일을 티스토리에 업로드한 후에 font-face 속성을 사용해 적용했는데요
eot파일은 인터넷익스플로러6~11에서만 지원을 합니다.
구글 웹폰트 링크를 내려받으면 eot, woff, ttf 세 파일이 있음을 알 수 있습니다.
http://fonts.googleapis.com/earlyaccess/nanumgothic.css
eot 지원 브라우저: ie 6~11
woff 지원 브라우저: ie 9~11, firefox3.5+, chrome5+, safari5.1+, opera11.1+, Android browser 4.4+
ttf 지원 브라우저: firefox 3.5+, chrome 4+, safari3.1+, opera10.0+, Android Browser 2.2~4.4.3
@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이)
그럼 나눔고딕을 내 블로그나 웹사이트에 적용하는 방법을 본격적으로 알아 볼게요~
티스토리나 블로그에, 나눔고딕 웹폰트 적용하기
STEP 1: 아래 사이트에 접속하여 ctrl+F 를 눌러 'nanum gothic'을 찾습니다.
https://www.google.com/fonts/earlyaccess
STEP 2: Link 밑에 나온 @import 구문을 나의 웹사이트
<head>와 </head> 사이, <style> </style> 사이에 삽입합니다.
이 구문을 사용함으로써 url()에 나온 파일을 내려받게 됩니다.
사용 예:
<head>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
</style>
</head>
*티스토리의 경우 관리 화면 html/css에서 css 화면에 삽입합니다.
@import 규칙은 css 파일 맨 처음 위치하는데 앞에 주석이 있으면 @import 파일을 인식하지 못함.
하지만 @charset 가 있으면 @charset rule이 먼저 옵니다
STEP 3: 이제 font-family 속성을 사용하여, import된 'nanum gothic'을 사용하겠다고 지정 합니다.
사용 예: body{font-family: 'Nanum Gothic', serif;}
body에 적용하면 전체 웹페이지가 모두 나눔고딕으로 지정됩니다.
font-family 속성은 보통 여러가지 글꼴을 나열해 놓는데요, import로 내려받은 파일로도 지원되지 않는 브라우저가
있을 경우에 대비하여, 대체 글꼴을 같이 적어 줍니다.
예: body{font-family: 나눔고딕, 'Nanum Gothic', arial, verdana, sans-serif;}
글꼴을 지정하는 font-family 속성(serif, sans-serif차이)
지금까지 배운 것을 한꺼번에 정리하면 이런 모양이 됩니다~
<html>
<head>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body{font-family: 나눔고딕, NanumGothic,'Nanum Gothic',Nanumbarungothic,arial,verdana,sans-serif; line-height: 1.6; font-size: 14px;}
</style>
</head>
line-height 속성으로 줄 간격을 지정하고,
font-size 속성으로 글꼴 크기를 지정합니다.
*주의* table에서 글꼴 크기가 다르게 표시될 경우 doctype을 선언해주면 간단히 해결됩니다.
아래 링크 참조해 주세요~
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유
'티스토리 툭탁툭탁' 카테고리의 다른 글
| [html/css] 수직선 그리는법 2가지(인용문 앞에 활용) (0) | 2014.08.28 |
|---|---|
| 티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유 (0) | 2014.08.11 |
| 동영상(MP4) mp3로 변환하기 (0) | 2014.07.23 |
| [배포완료]지구별 안내서, 티스토리 초대장 배포 합니다 (36) | 2014.07.22 |
| 지구별 안내서 네이버 오픈캐스트 활용법 (0) | 2014.07.06 |
댓글