본문 바로가기

Tistory & Blog

티스토리 본문에 웹폰트를 적용해보자!! (추가)

invalid-file

웹폰트용

invalid-file

웹폰트용





티스토리에서 검색을 통하여 웹폰트를 적용하는 법에 대해 알아보았다.
간단할 줄 알았는데 생각보다 적용하는게 쉽지 않았다.
겨우 sky4you님의
블로그를 통해서 조금이나마 알게 되었고, 미약하나마 본문의 폰트체를
내가 지정한 웹폰트로 변형할 수 있었다.

본문의 폰트체를 변형시키는 것은 너무 간단하다.
먼저 자신이 사용하고자 하는 웹폰트가 티스토리 계정에 올라와있는 것을 전제로 하여 설명하겠다.

Tip 계정에 올리는 방법 :

관리자 모드에서 스킨으로 간 후, 스킨선택에서 보이는 스킨목록 탭 중 직접올리기 탭을 선택한다.
그곳에 원하는 웹폰트를 올릴 수 있다.
참고로 올려진 파일들의 상대적 주소는 "./images/파일명"이다.


관리자모드에서 스킨 - 스킨편집으로 가면 난해한 코드로 되어있는 두 칸이 있을 것이다.
하나는 skin.html이고 하나는 style.css 이다.

먼저 style.css 칸의 맨 상단에 다음과 같은 코드를 입력하자.

@font-face {font-family:enter;src:url(./images/티티체.eot);}


여기서 티티체.eot란 내 계정에 올라와있는 폰트의 파일명이며, eot는 웹폰트 파일형식 이름이다.
자신이 올린 파일명으로 되어있는지 확인하도록 하자.
font-family:enter는 내가 사용할 웹폰트의 이름을 enter로 하겠다는 것이다. 즉, 별명과 같다.


자.. 이제 skin.html로 가보자.
거기엔 정말 수없이 많은 코드들이 휘황찬란하게 적혀있어 눈을 어지럽게 하고 있다.

간단히 ctrl+f 를 통하여 <div class="article" 구문을 찾아보자.
여러가지가 검색되겠지만 다음과 같은 구문을 발견할 수 있을 것이다.

<!-- 본문 -->
<div class="article">

invalid-file

웹폰트용

invalid-file

웹폰트용





티스토리에서 검색을 통하여 웹폰트를 적용하는 법에 대해 알아보았다.
간단할 줄 알았는데 생각보다 적용하는게 쉽지 않았다.
겨우 sky4you님의
블로그를 통해서 조금이나마 알게 되었고, 미약하나마 본문의 폰트체를
내가 지정한 웹폰트로 변형할 수 있었다.

본문의 폰트체를 변형시키는 것은 너무 간단하다.
먼저 자신이 사용하고자 하는 웹폰트가 티스토리 계정에 올라와있는 것을 전제로 하여 설명하겠다.

Tip 계정에 올리는 방법 :

관리자 모드에서 스킨으로 간 후, 스킨선택에서 보이는 스킨목록 탭 중 직접올리기 탭을 선택한다.
그곳에 원하는 웹폰트를 올릴 수 있다.
참고로 올려진 파일들의 상대적 주소는 "./images/파일명"이다.


관리자모드에서 스킨 - 스킨편집으로 가면 난해한 코드로 되어있는 두 칸이 있을 것이다.
하나는 skin.html이고 하나는 style.css 이다.

먼저 style.css 칸의 맨 상단에 다음과 같은 코드를 입력하자.

@font-face {font-family:enter;src:url(./images/티티체.eot);}


여기서 티티체.eot란 내 계정에 올라와있는 폰트의 파일명이며, eot는 웹폰트 파일형식 이름이다.
자신이 올린 파일명으로 되어있는지 확인하도록 하자.
font-family:enter는 내가 사용할 웹폰트의 이름을 enter로 하겠다는 것이다. 즉, 별명과 같다.


자.. 이제 skin.html로 가보자.
거기엔 정말 수없이 많은 코드들이 휘황찬란하게 적혀있어 눈을 어지럽게 하고 있다.

간단히 ctrl+f 를 통하여 <div class="article" 구문을 찾아보자.
여러가지가 검색되겠지만 다음과 같은 구문을 발견할 수 있을 것이다.

<!-- 본문 -->
<div class="article"></div>


위의 <!-- 본문 -->이란 주석 태그를 통해 본문과 관련된 코드가 명시되어있음을 짐작할 수 있다.
<div class="article">에서 article은 클래스 이름이다.
클래스 이름은 사용되는 곳마다 이름이 다르니 유의하자.

이제 마지막 단계이다.
위의 내용을 아래와 같이 바꾸기만 하면 되는 것이다.


<!-- 본문 -->
<div class="article" style="font:9pt/180% enter;"></div>

위에서 보이는 것처럼 style="font:9pt/180% enter;" 이 추가된 것을 알 수 있다.
180%란 줄간격을 의미하는 것이며, enter는 티티체.eot 파일을 enter로 부르겠다는 약속된 별명이다.
이것이 본문의 글자 모양을 결정하는 것이다. 일반적으로 폰트의 크기는 10pt이다.
하지만 내가 사용한 티티체는 9pt로 최적화되어 있다.
다른 곳의 글자체를 변경하고 할 때에도 위와 같은 방법을 이용하면 원하는 글자체를 볼 수 있을 것이다.

Tip 다른 곳의 글자체를 변경하려고 하는데 도대체 어디가 어딘지 모르겠다면?
       복잡한 태그들이 나열되어 있는 것 같지만 앞서 말한 <!-- 본문 -->과 같이 <!--  -->
       주석태그를 통해 어느 부분인지 쉽게 알 수 있도록 되어 있다.
       따라서 원하는 부분에 있는 <div class> 코드에 위와 같이 원하는 폰트 코드를 삽입하면 된다.
</div>


위의 <!-- 본문 -->이란 주석 태그를 통해 본문과 관련된 코드가 명시되어있음을 짐작할 수 있다.
<div class="article">에서 article은 클래스 이름이다.
클래스 이름은 사용되는 곳마다 이름이 다르니 유의하자.

이제 마지막 단계이다.
위의 내용을 아래와 같이 바꾸기만 하면 되는 것이다.


<!-- 본문 -->
<div class="article" style="font:9pt/180% enter;">

invalid-file

웹폰트용

invalid-file

웹폰트용





티스토리에서 검색을 통하여 웹폰트를 적용하는 법에 대해 알아보았다.
간단할 줄 알았는데 생각보다 적용하는게 쉽지 않았다.
겨우 sky4you님의
블로그를 통해서 조금이나마 알게 되었고, 미약하나마 본문의 폰트체를
내가 지정한 웹폰트로 변형할 수 있었다.

본문의 폰트체를 변형시키는 것은 너무 간단하다.
먼저 자신이 사용하고자 하는 웹폰트가 티스토리 계정에 올라와있는 것을 전제로 하여 설명하겠다.

Tip 계정에 올리는 방법 :

관리자 모드에서 스킨으로 간 후, 스킨선택에서 보이는 스킨목록 탭 중 직접올리기 탭을 선택한다.
그곳에 원하는 웹폰트를 올릴 수 있다.
참고로 올려진 파일들의 상대적 주소는 "./images/파일명"이다.


관리자모드에서 스킨 - 스킨편집으로 가면 난해한 코드로 되어있는 두 칸이 있을 것이다.
하나는 skin.html이고 하나는 style.css 이다.

먼저 style.css 칸의 맨 상단에 다음과 같은 코드를 입력하자.

@font-face {font-family:enter;src:url(./images/티티체.eot);}


여기서 티티체.eot란 내 계정에 올라와있는 폰트의 파일명이며, eot는 웹폰트 파일형식 이름이다.
자신이 올린 파일명으로 되어있는지 확인하도록 하자.
font-family:enter는 내가 사용할 웹폰트의 이름을 enter로 하겠다는 것이다. 즉, 별명과 같다.


자.. 이제 skin.html로 가보자.
거기엔 정말 수없이 많은 코드들이 휘황찬란하게 적혀있어 눈을 어지럽게 하고 있다.

간단히 ctrl+f 를 통하여 <div class="article" 구문을 찾아보자.
여러가지가 검색되겠지만 다음과 같은 구문을 발견할 수 있을 것이다.

<!-- 본문 -->
<div class="article"></div>


위의 <!-- 본문 -->이란 주석 태그를 통해 본문과 관련된 코드가 명시되어있음을 짐작할 수 있다.
<div class="article">에서 article은 클래스 이름이다.
클래스 이름은 사용되는 곳마다 이름이 다르니 유의하자.

이제 마지막 단계이다.
위의 내용을 아래와 같이 바꾸기만 하면 되는 것이다.


<!-- 본문 -->
<div class="article" style="font:9pt/180% enter;"></div>

위에서 보이는 것처럼 style="font:9pt/180% enter;" 이 추가된 것을 알 수 있다.
180%란 줄간격을 의미하는 것이며, enter는 티티체.eot 파일을 enter로 부르겠다는 약속된 별명이다.
이것이 본문의 글자 모양을 결정하는 것이다. 일반적으로 폰트의 크기는 10pt이다.
하지만 내가 사용한 티티체는 9pt로 최적화되어 있다.
다른 곳의 글자체를 변경하고 할 때에도 위와 같은 방법을 이용하면 원하는 글자체를 볼 수 있을 것이다.

Tip 다른 곳의 글자체를 변경하려고 하는데 도대체 어디가 어딘지 모르겠다면?
       복잡한 태그들이 나열되어 있는 것 같지만 앞서 말한 <!-- 본문 -->과 같이 <!--  -->
       주석태그를 통해 어느 부분인지 쉽게 알 수 있도록 되어 있다.
       따라서 원하는 부분에 있는 <div class> 코드에 위와 같이 원하는 폰트 코드를 삽입하면 된다.
</div>

위에서 보이는 것처럼 style="font:9pt/180% enter;" 이 추가된 것을 알 수 있다.
180%란 줄간격을 의미하는 것이며, enter는 티티체.eot 파일을 enter로 부르겠다는 약속된 별명이다.
이것이 본문의 글자 모양을 결정하는 것이다. 일반적으로 폰트의 크기는 10pt이다.
하지만 내가 사용한 티티체는 9pt로 최적화되어 있다.
다른 곳의 글자체를 변경하고 할 때에도 위와 같은 방법을 이용하면 원하는 글자체를 볼 수 있을 것이다.

Tip 다른 곳의 글자체를 변경하려고 하는데 도대체 어디가 어딘지 모르겠다면?
       복잡한 태그들이 나열되어 있는 것 같지만 앞서 말한 <!-- 본문 -->과 같이 <!--  -->
       주석태그를 통해 어느 부분인지 쉽게 알 수 있도록 되어 있다.
       따라서 원하는 부분에 있는 <div class> 코드에 위와 같이 원하는 폰트 코드를 삽입하면 된다.