본문 바로가기
티스토리 툭탁툭탁

나눔고딕 웹폰트 적용, 제대로 배우기

by 지구별에 2014. 8. 9.



나눔고딕 구글 웹폰트 적용, 제대로 배우기



티스토리나 웹사이트에서 나눔고딕 글꼴을 적용하는 생각보다 쉬운 방법이 있습니다.


구글 웹폰트를 사용하면, 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이 먼저 옵니다

 

 

@import rule 사용법, link 태그와 차이




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

 

티스토리에 웹폰트를 적용했는데, 글꼴이 일부 바뀌지 않는 이유

 

반응형

댓글0