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 |
