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



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



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


구글 웹폰트를 사용하면, 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

 

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

 

지구별에
티스토리 툭탁툭탁 2014.08.09 11:41
Powerd by Tistory, designed by criuce