본문 바로가기

정보창고/인터넷

티스토리 웹폰트 적용하기

PC에도 해당 폰트가 설치되어 있지 않을 경우 다른 폰트로 표시되는 것 처럼 블로그의 경우에도 블로그에 설정한 폰트가 블로그 방문자의 PC에 설치되어 있지 않다면 해당 폰트로 표시 되지 않는데 이러한 문제점을 해결해 줄 수 있는 것이 웹폰트(EOT)라고 할 수 있습니다. 

아래는 티스토리에서 웹폰트를 적용하는 방법입니다. 



TTF를 EOT로 변환하기

변환방법1. 변환사이트 이용하기

- https://onlinefontconverter.com/

TTF 파일을 먼저 준비한 후 첨부하여 변환할 수 있습니다.


변환방법2. 구글 웹폰트

https://fonts.google.com/earlyaccess

별도 파일이 필요하지 않습니다.

검색을 통해 원하는 폰트를  찾은 후 폰트에 대해 제공하는 소스를 복사하여 블로그에 붙여넣기 합니다. 



변환방법3. 변환프로그램 이용하기

프로그램을 설치한 후 TTF 파일을 OTF로 변환합니다.

- eotfast

아니면 친절하게 EOT 파일을 공유하는 분들도 계시기 때문에 검색하셔서 찾으셔도 될 것 같습니다.



티스토리 블로그에 EOT 첨부하여 적용하기

예를 들어 나눔고딕폰트로 변경하고자 한다면 NanumGothic.eot 파일이 필요합니다.


- 파일 첨부

[블로그 관리 - 꾸미기 - 스킨편집 - HTML 편집 - 파일업로드 - 추가]를 클릭하여 파일을 첨부 한 후 저장을 하면

images/NanumGothic.eot 파일이 업로드 됩니다.



- CSS에 소스 추가 및 변경

1. 소스 추가

CSS에서 웹폰트 관련 소스를 추가로 입력해 줍니다.

@Charset "utf-8"; 문구 상단에 @font-face{ }를 추가 합니다


@font-face{

font-family: 'NanumGothic';

src: url('./images/NanumGothic.eot');

@Charset "utf-8";


@font-face {font-family:나눔고딕; src:url(images/NanumGothic.eot)}; */ */

body{font-family:나눔고딕; font-size: 13px;}

div{font-family:나눔고딕; font-size: 13px;}

 

위와 같이 입력하면 글자 크기도 조정된다고 합니다.


2. 폰트명 추가

검색(Ctrl+G 혹은 Ctrl+F)을 통해 font-family를 검색한 후 "나눔고딕" , "NanumGothic" 을 아래와 같이 추가합니다. 앞의 글꼴이 먼저 적용되므로 적용할 폰트명을 제일 앞에 위치시키라고 하네요. 

font-family:나눔 고딕, NanumGothic, 돋움, Dotum, AppleGothic, sans-serif;


폰트명은 

body, h1~h6, input, div, th, td{font-family:... ;} 나

{font-family:... !important;}

와 같은 형식이 있는 부분에 폰트명을 추가해 줍니다. 사용하는 블로그 스킨에 따라 수정해야 하는 부분도 있고 수정하지 말아야 하는 부분도 있다고 하니 그 부분만 주의하시면 될 것 같습니다. 



구글 폰트 소스 적용하기

EOT 파일 없이 구글에서 제공하는 폰트 소스를 복사하여 붙여넣기만 하면 됩니다. 

단, 인터넷 익스플로러에서는 구글 폰트 사이트를 이용할 수 없으니 크롬, 파이어 폭스, 사파리 등 다른 브라우저를 이용하여 접속해야 합니다.


폰트를 검색한후  를 클릭하여 폰트를 선택합니다.


티스토리 [블로그 관리 - 꾸미기 - 스킨편집 - HTML 편집 - HTML / CSS ]


1. HTML 수정하기

. EMBED의 STANDARD 혹은 @IMPORT 의 소소를 복사하여  HTML의 <head>와 </head>사이에 붙여넣기 합니다.

. CUSTOMIZE를 선택하면 굵기 등 더 다양한 스타일을 적용할 수 있으나 로딩시간이 조금 더 걸릴 수도 있다고 합니다.

<head>

<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">

</head>


2. CSS 수정하기

CSS 수정은 EOT를 추가 했을 경우 소스를 변경 방법과 동일하게 하시면 됩니다. 소스를 복사하여 font-family가 있는 부분에 붙여넣기 합니다.

font-family: 'Nanum Gothic', sans-serif;


구글 폰트의 경우는 블로그 뿐 만 아니라 다른 웹페이지에서도 적용이 가능합니다.


'정보창고 > 인터넷' 카테고리의 다른 글

크롬 파일 다운로드 안될 때 (무반응)  (0) 2021.01.05
온라인 EML 뷰어  (0) 2020.06.15
티스토리 기존 에디터 사용하기  (0) 2020.05.22
유튜브 댓글 시간 표시  (0) 2020.03.02
HTML5란?  (0) 2018.06.26
인터넷 브라우저 종류  (0) 2018.06.23
유튜브 구간반복하기  (0) 2018.06.13
배틀그라운드 총의 종류  (0) 2018.06.08