블로그에 원하는 글꼴을 사용하는 두가지 방법이 있다.
- 직접 폰트파일을 웹에 올려서 사용
- 인터넷 업체가 제공하는 웹폰트를 사용 (권장)
1. 직접 폰트파일을 웹(서버)에 올려서 사용하는 방법
지금 설명하는 방법이 좋다는 것은 아니다. 단점이 있다. (용량이 커서, 로딩 시간차가 발생할 수 있다.) 그러나 방법을 안다고 나쁠건 없다.
여기에서는 NanumGothic으로 설명한다.
다운 받은 폰트를 블로그에 올린다. (NanumGothic.ttf, NanumGothic.eot)
images폴더에 저장 될 것이다.
그리고 style.css 파일에 다음 소스를 삽입한다. ▼
/* ******* font ******* */
@font-face {
font-family:NanumGothic;
src:url('./images/NanumGothic.eot');
src:local('NanumGothic'), url('./images/NanumGothic.ttf');
}
그리고, 폰트를 NanumGothic으로 지정해 준다.
body {
font:13px/1.8 NanumGothic;
{
※ 관련 글 모음 ▼
- 워드프레스에 구글 웹폰트 로더와 @font-face로 한글 적용
http://www.hwangc.com/2012/03/20/wordpress-google-webfont-loader-font-face-korean/ - 나눔고딕 웹폰트를 블로그에 적용하는 모든 것
http://min-blog.tistory.com/419 - 웹폰트(@font-face)에 관해 / About Web Fonts
http://hardworker.tistory.com/113?srchid=BR1http://hardworker.tistory.com/113
2. 인터넷 업체가 제공하는 웹폰트를 사용하는 방법 (추천)
- 한글 폰트 : http://fontface.kr/ , http://api.mobilis.co.kr/webfonts/
- 영문 폰트 : http://www.google.com/webfonts, https://developers.google.com/webfonts/docs/webfont_loader
[ 한글 1 : 폰트페이스 ]
| + 지원하는 무료 웹폰트 - 나눔고딕 - 나눔고딕(굵게) - 나눔명조 - 나눔명조(굵게) - 나눔손글씨 펜체 - 나눔손글씨 붓체 |
+ 장점 |
사용법 : style.CSS에서 폰트를 NanumGothic로 지정하고, 아래의 코드를 skin.html에서 <head> ~ </head> 사이에 넣는다.
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
WebFont.load({ custom: {
families: [ "NanumGothic" ],
urls: [ "http://fontface.kr/NanumGothic/css" ]
}});
});
</script>
</head>
[ 한글 2 : 모빌리스 웹폰트 서비스 ]
|
|
|
+ 장점 - 쉬운 적용 방법 - 빠른 로딩 속도 - 대부분의 주요 브라우저 지원 |
사용법 : style.CSS에서 폰트를 NanumGothicWeb로 지정하고, 아래의 코드를 skin.html에서 <head> ~ </head> 사이에 넣는다.
<head>
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumBrushWeb' rel='stylesheet' type='text/css' />
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />
</head>
[ 영문 : 구글 웹 폰트 ]
사용법 : 다음의 사이트 참조
|
|
| |
구글 웹 폰트에 접속
마음에 드는 폰트를 고른다. 잘 모르면 가장 인기있는 녀석을 선택한다.
그리고 Quick-use를 클릭!
폰트 사용방법이 나온다. 1번, 2번을 읽어 본다. 1번에서 원하는 스타일을 선택한다. (이미 Normal 400이 선택되어 있을 것이다.)
3번과 4번의 방법으로 웹페이지나 블로그에 적용해 주면 된다.
3. Add this code to your website: 항목에 3가지의 탭이 있다.
+ Standard
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+ @import
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+ Javascript
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
코드를 적용할 3가지 방법이 있는데 Standard 방법을 사용해 보겠다.
skin.html : <head>와 </head> 사이에 적당히 다음 줄을 넣어준다.
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
4. CSS 수정
font-family: 'Open Sans', sans-serif;
style.css : 본문에 해당하는 .article을 찾아서, 폰트 정보를 넣는다.
블로그 스킨 종류에 따라 이름이 다를 수 있다. 지금 사용하는 스킨에서는 .desc로 되어 있다.
.article {
font-family:'Open Sans', sans-serif; /* 폰트 종류 */
font-size:13px/; /* 폰트 크기 */
color:#5f5f5; /* 폰트 색 */
line-height:2; /* 줄 간격 */
}
웹폰트 실제 적용한 예
◀ NanumGothicWeb NanumBrushWeb ▶
 |  |
P.S. 폰트를 만들고 싶어 졌다
- 폰트 만들기 http://blog.naver.com/PostView.nhn?blogId=appelboem&logNo=30098368998
- 손 글씨체 만들기 http://bluepaprika.tistory.com/280
'▶아이티' 카테고리의 다른 글
| 윈도우를 맥처럼 사용하기- Lion Transformation Pack 1.0 (5) | 2012.05.22 |
|---|---|
| 이미지 상단 정렬 valign=top (0) | 2012.05.17 |
| 해킹 EBS 개인정보 유출 (0) | 2012.05.17 |
| Mac 글쓰기 프로그램 찾아보기 (0) | 2012.05.11 |
| 티스토리 스킨(Entertainment News ver.1.0) 수정 완료 (2) | 2012.05.10 |
| 나눔글꼴 (폰트) TFF → EOT 변환 하기 (1) | 2012.05.06 |
| 무료 나눔폰트 사용(설치) 하기 (0) | 2012.05.06 |
| Mac 소프트웨어 정보 (0) | 2012.04.25 |
| Mac OS X 사용 정보 (0) | 2012.04.25 |
| 전자캐드 실기 - FAB 설정 (0) | 2011.12.07 |
