메뉴 보이기
Profile
이온디

2013.08.06

웹폰트

구글 웹폰트 서비스 이용하기

조회 수 4522 추천 수 0

이미지 007.png


모빌리스 웹폰트 서비스가 유료로 전환됨에 따라 많은 블로거 분들이 당혹스러웠을 거라 생각합니다. 오늘은 제가 모빌리스 웹폰트 말고 구글 웹폰트 서비스를 이용하는 방법에 대해 알려 드리고자 합니다. 어렵지 않으니까 차근차근히 잘 따라해 보시기 바랍니다.

 

[링크] 구글 웹폰트 서비스 페이지 바로가기

http://www.google.com/fonts/earlyaccess

 

1. 구글 웹폰트 적용 방법

 

아래의 그림은 구글 웹폰트 서비스 페이지에서 나눔고딕체를 찾아 찍은 스샷입니다. 대부분 많은 분들이 나눔고딕체를 사용하기 때문에 나눔고딕체를 예로 적용하는 방법을 알려 드리도록 하겠습니다.

 


 

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

 

@charset="UTF-8"; 바로 아래에 붙여 넣기 합니다. 위 소스는 웹폰트를 불러오는 역할을 수행합니다.

 

font:13px/1.5 Nanum Gothic, sans-serif;

 

입력하실 때 띄어쓰기 주의해서 위와 같이 입력해야 합니다. 토시 하나라도 틀리면 적용 안 될 수가 있습니다.

 

실제 적용 예

 


 

 

2. Nomal, Bold, Extra Bold 속성 적용하기

 

기존 모빌리스 웹폰트 서비스를 이용할 때는 Nomal, Bold, Extra Bold 속성 별로 글씨체가 따로 구분되어 존재 했었지만, 구글 웹폰트 서비스는 구분되어 있지 않습니다. 따라서 제목과 같은 강조해야 하는 부분은 따로 Bold 속성을 부여해 줘야 합니다.

 

<FONT> 태그에 대한 포스팅 글을 보면 설정 방법이 있습니다만, 한 번 되짚고 넘어가겠습니다. 굵기 속성을 안 주면 기본적으로 Nomal 속성이 적용 됩니다. 아래의 예제에서는 Extra Bold 속성과 Bold 속성이 별반 차이가 안 느껴지지만, Extra Bold 속성은 Bold 속성보다 더 굵은 글씨입니다.

 

보다 자세한 내용은 아래의 포스팅 글에서 확인할 수 있습니다.

http://gskool.tistory.com/48

 

font-weight:400;    /* Nomal 속성 */

font-weight:700;    /* Bold 속성 */

font-weight:800;    /* Extra Bold 속성 */

 

Nomal 속성입니다.

Bold 속성입니다.

Extra Bold 속성입니다.

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
139 [jQuery] 왼쪽에 숨겨진 레이어를 보여주자 2013.08.09 4251
138 [Script] 전체화면 레이어 팝업 소스 2013.08.09 12007
137 [웹폰트] Daum font로 Google Font API 따라잡기 2013.08.09 4050
136 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커 2013.08.07 5732
[웹폰트] 구글 웹폰트 서비스 이용하기 2013.08.06 4522
134 [웹접근성] 웹 접근성 이슈 2013.08.06 5118
133 [HTML5] IE보완 - 조건부 주석 2013.08.06 4850
132 [웹접근성] 웹접근성이란 2013.08.06 3842
131 [HTML5] img style 속성 2013.03.12 5894
130 [Meta] Meta Tag(메타태그) 사용법 2013.03.05 6850
129 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5645
128 [부트스트랩] #1 부트스트랩이란? 2013.03.01 4089
127 [HTML5] HTML5 시멘틱 구조 태그 2013.02.28 4667
126 [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 2013.02.25 3695
125 [부트스트랩] 기본 부트스트랩 템플릿 2013.02.24 4026
124 [PHP] 쿠키를 굽자 2013.02.22 3519
123 [Script] 자바스크립트로 CSS 불러오기 2013.02.22 4522
122 [UI] jquery menu slide 2012.12.16 9008
121 [Script] 로그인창 띄우기 2012.12.14 4686