휴..무지하게 해매이고… 그 덕에 스킨도 계속해서 바꿔보고…
정말이지 공부 좀 해야 할 필요성을 절실하게 느끼고 말았습니다…
웹폰트 만드는 프로그램은 검색 통해 쉽사리 다운 받을 수 있지만 변경과정에서
조금씩 사용법이 달라 실패를 맛보기도 할 것이므로 잘 찾아보시기 바랍니다.
|
** 웹폰트(Webfont)
- 웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치 되어 있지 않아도, 임시로 글꼴을 받아 웹페이지에서
볼 수 있도록 하는 폰트의 한 종류.
웹페이지를 위해 만들어진 폰트 중 특정크기에서 볼 수 있는 본문용서체를 주로 지칭한다.
|
|
1. 자신의 블로그에 적용하고 싶은 폰트를 정한다.
(웹용으로 변경한 폰트를 다운 받을 수 있으니 검색해 보시길…)
2. 원하는 TTF 폰트를 웹폰트(.eot)로 바꾸기
: 소야폰트 등…. 메타블로그 검색을 통해 ‘폰트변경’을 검색하시면 쉽게 프로그램 사용법을 따라할수 있음
주의 - 아마 index.html을 바꾸시는 분들이 계시는데 웹 폰트를 생성하면 C드라이브에(C/>)에 웹 폰트가
생성됩니다. 무슨 파일인지 잘 모르실때는 변환과정 2~3차레 반복하시면 알수 있습니다.
한번에 성공했다고 넘어가시면 다른 폰트를 변경할 때 해매일 수도 있습니다.
3. Skin.html을 HTML/CSS편집을 통해서 아래와 같이 수정
: 스킨 -> Skin.html 에서 <head> 와 </head> 사이에 아래 내용대로 소스를 삽입하면 됩니다.
‘Mgodic0529’는 필자가 변경한 폰트이므로 본인이 변경한 폰트명으로 변경하여 적용하면 됩니다.
티스토리에서는 스킨 – 직접올리기 – 파일업로드를 통해 폰트를 업로드 하여야만 폰트가 적용이 됩니다.
|
1) skin.html <head> 와 </head> 사이
<style type=”text/css”>
<! --
@font-face {font-family:폰트명;src:url(./images/폰트명.eot);}
A:link {font-family:폰트명;font-size:9pt;}
A:visited {font-family:폰트명;font-size:9pt;}
A:hovor {font-family:폰트명;font-size:9pt;}
A:active {font-family:폰트명;font-size:9pt;}
-- >
</style>
|
|
2) skin.html 소스 변경
: Ctfl+F를 통해 “##_article_rep_desc” 찾아서 소스 수정
오리지널 소스 :
<div class=”article”>
휴..무지하게 해매이고… 그 덕에 스킨도 계속해서 바꿔보고…
정말이지 공부 좀 해야 할 필요성을 절실하게 느끼고 말았습니다…
웹폰트 만드는 프로그램은 검색 통해 쉽사리 다운 받을 수 있지만 변경과정에서
조금씩 사용법이 달라 실패를 맛보기도 할 것이므로 잘 찾아보시기 바랍니다.
|
** 웹폰트(Webfont)
- 웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치 되어 있지 않아도, 임시로 글꼴을 받아 웹페이지에서
볼 수 있도록 하는 폰트의 한 종류.
웹페이지를 위해 만들어진 폰트 중 특정크기에서 볼 수 있는 본문용서체를 주로 지칭한다.
|
|
1. 자신의 블로그에 적용하고 싶은 폰트를 정한다.
(웹용으로 변경한 폰트를 다운 받을 수 있으니 검색해 보시길…)
2. 원하는 TTF 폰트를 웹폰트(.eot)로 바꾸기
: 소야폰트 등…. 메타블로그 검색을 통해 ‘폰트변경’을 검색하시면 쉽게 프로그램 사용법을 따라할수 있음
주의 - 아마 index.html을 바꾸시는 분들이 계시는데 웹 폰트를 생성하면 C드라이브에(C/>)에 웹 폰트가
생성됩니다. 무슨 파일인지 잘 모르실때는 변환과정 2~3차레 반복하시면 알수 있습니다.
한번에 성공했다고 넘어가시면 다른 폰트를 변경할 때 해매일 수도 있습니다.
3. Skin.html을 HTML/CSS편집을 통해서 아래와 같이 수정
: 스킨 -> Skin.html 에서 <head> 와 </head> 사이에 아래 내용대로 소스를 삽입하면 됩니다.
‘Mgodic0529’는 필자가 변경한 폰트이므로 본인이 변경한 폰트명으로 변경하여 적용하면 됩니다.
티스토리에서는 스킨 – 직접올리기 – 파일업로드를 통해 폰트를 업로드 하여야만 폰트가 적용이 됩니다.
|
1) skin.html <head> 와 </head> 사이
<style type=”text/css”>
<! --
@font-face {font-family:폰트명;src:url(./images/폰트명.eot);}
A:link {font-family:폰트명;font-size:9pt;}
A:visited {font-family:폰트명;font-size:9pt;}
A:hovor {font-family:폰트명;font-size:9pt;}
A:active {font-family:폰트명;font-size:9pt;}
-- >
</style>
|
|
2) skin.html 소스 변경
: Ctfl+F를 통해 “##_article_rep_desc” 찾아서 소스 수정
오리지널 소스 :
<div class=”article”>
</div>
웹 폰트를 적용하기 위한 소스:
<div class=”article” style=”font;9pt/150% 폰트명;”>
</div>
|
4. Style.css 소스 변경
여기부분은 수정할 필요없이 한줄만 추가하면 된다.
Style.css 부분의 상단부분에 추가
|
@font-face {font-family:폰트명; src:url(images/폰트명.eot)}
|
|
처음 변경시 잘모르는 부분이 있지만, 낙담하시지 마시고 천천히 다시 해보시기 바랍니다.
맘처럼 않되면 짜증도 나고 포기도 하지만… 폰트변경을 적용하고 나면 잘했구나 싶으실 겁니다.
파이팅 !!~
</div>
웹 폰트를 적용하기 위한 소스:
<div class=”article” style=”font;9pt/150% 폰트명;”>
휴..무지하게 해매이고… 그 덕에 스킨도 계속해서 바꿔보고…
정말이지 공부 좀 해야 할 필요성을 절실하게 느끼고 말았습니다…
웹폰트 만드는 프로그램은 검색 통해 쉽사리 다운 받을 수 있지만 변경과정에서
조금씩 사용법이 달라 실패를 맛보기도 할 것이므로 잘 찾아보시기 바랍니다.
|
** 웹폰트(Webfont)
- 웹페이지를 보는 사람의 컴퓨터에 글꼴이 설치 되어 있지 않아도, 임시로 글꼴을 받아 웹페이지에서
볼 수 있도록 하는 폰트의 한 종류.
웹페이지를 위해 만들어진 폰트 중 특정크기에서 볼 수 있는 본문용서체를 주로 지칭한다.
|
|
1. 자신의 블로그에 적용하고 싶은 폰트를 정한다.
(웹용으로 변경한 폰트를 다운 받을 수 있으니 검색해 보시길…)
2. 원하는 TTF 폰트를 웹폰트(.eot)로 바꾸기
: 소야폰트 등…. 메타블로그 검색을 통해 ‘폰트변경’을 검색하시면 쉽게 프로그램 사용법을 따라할수 있음
주의 - 아마 index.html을 바꾸시는 분들이 계시는데 웹 폰트를 생성하면 C드라이브에(C/>)에 웹 폰트가
생성됩니다. 무슨 파일인지 잘 모르실때는 변환과정 2~3차레 반복하시면 알수 있습니다.
한번에 성공했다고 넘어가시면 다른 폰트를 변경할 때 해매일 수도 있습니다.
3. Skin.html을 HTML/CSS편집을 통해서 아래와 같이 수정
: 스킨 -> Skin.html 에서 <head> 와 </head> 사이에 아래 내용대로 소스를 삽입하면 됩니다.
‘Mgodic0529’는 필자가 변경한 폰트이므로 본인이 변경한 폰트명으로 변경하여 적용하면 됩니다.
티스토리에서는 스킨 – 직접올리기 – 파일업로드를 통해 폰트를 업로드 하여야만 폰트가 적용이 됩니다.
|
1) skin.html <head> 와 </head> 사이
<style type=”text/css”>
<! --
@font-face {font-family:폰트명;src:url(./images/폰트명.eot);}
A:link {font-family:폰트명;font-size:9pt;}
A:visited {font-family:폰트명;font-size:9pt;}
A:hovor {font-family:폰트명;font-size:9pt;}
A:active {font-family:폰트명;font-size:9pt;}
-- >
</style>
|
|
2) skin.html 소스 변경
: Ctfl+F를 통해 “##_article_rep_desc” 찾아서 소스 수정
오리지널 소스 :
<div class=”article”>
</div>
웹 폰트를 적용하기 위한 소스:
<div class=”article” style=”font;9pt/150% 폰트명;”>
</div>
|
4. Style.css 소스 변경
여기부분은 수정할 필요없이 한줄만 추가하면 된다.
Style.css 부분의 상단부분에 추가
|
@font-face {font-family:폰트명; src:url(images/폰트명.eot)}
|
|
처음 변경시 잘모르는 부분이 있지만, 낙담하시지 마시고 천천히 다시 해보시기 바랍니다.
맘처럼 않되면 짜증도 나고 포기도 하지만… 폰트변경을 적용하고 나면 잘했구나 싶으실 겁니다.
파이팅 !!~
</div>
|
4. Style.css 소스 변경
여기부분은 수정할 필요없이 한줄만 추가하면 된다.
Style.css 부분의 상단부분에 추가
|
@font-face {font-family:폰트명; src:url(images/폰트명.eot)}
|
|
처음 변경시 잘모르는 부분이 있지만, 낙담하시지 마시고 천천히 다시 해보시기 바랍니다.
맘처럼 않되면 짜증도 나고 포기도 하지만… 폰트변경을 적용하고 나면 잘했구나 싶으실 겁니다.
파이팅 !!~
댓글