티스토리 포스팅 폰트 바꾸기

안녕하세요.

오늘은 티스토리에 글을 쓸 때 원하는 폰트로 바꾸는 방법을 공유하려고 합니다.

 

저도 이제 막 포스팅을 시작해서 정확히는 모르지만

글을 쓸 때 글꼴에 폰트를 추가하는 것은 어려운 것으로 알고 있습니다.

저도 여러 곳을 방문하고 알아봤지만 글꼴을 추가하는 건 없고, 블로그 제목이나 글 제목 등 이미 게시된 글씨만

HTML 어쩌구 저쩌구, CSS 어쩌구 저쩌구로 바꾸는 방법을 알려주시더라고요.

(복잡해 보여서 저는 패스했습니다.)

 

제가 오늘 소개하려는 방법 역시 포스팅 시 바로 사용할 수 있는 폰트를 추가하는 것은 아니지만

약간의 수정을 통해 글씨체를 바꾸는 방법을 소개하려고 합니다.

 

 

1. 폰트 다운로드

폰트를 블로그에 연결시키는 방법은 2가지가 있는 것 같습니다.

a. Google font와 같은 폰트 사이트에서 URL을 가져오는 방법

b. 폰트 파일을 티스토리 블로그에 업로드 하는 방법

저는 파일 자체를 업로드하는 방법으로 가보려 합니다. 이 부분이 더 직관적인 것 같아서요.

파일은 ttf 파일만 있어도 되더라고요. 저는 네이버 블로그에서 쓰던 '다시 시작해' 글씨체를 다운 받아서

'startagain'으로 파일명을 바꿔줬습니다. (파일명이 영어인 게 편한 것 같아요.)

 

 

2. 폰트 업로드

관리 > 스킨 편집 > HTML 편집 > 파일 업로드

파일 업로드를 하고 나면 바로 저장되더라고요. 적용을 누르지 않아도 됩니다.

abc 순으로 파일들이 보이기 때문에 내리다 보면 images/startagain.ttf 이 들어가 있는 것을 확인해 볼 수 있습니다.

 

 

3. CSS 수정

 

사진과 같이 최상단에 비어져있는 줄이 있는데 거기에 엔터 2번 눌러서 Web Font Load를 위한 공간을 내고

위와 같이 입력합니다.

 

/*Web Font Load */

@font-face {

font-family: 'startagain';

src: url('./images/startagain.ttf');

font-weight: normal;

font-style: normal;

}

 

이거 복사하시면 될 거예요.

 

그리고 여기서 startagain 자리에 2번에 업로드한 파일 이름 넣으시면 됩니다.

이렇게 하면 site가 폰트를 인식하게 되는 것 같습니다.

 

 

4. 작성한 글에 적용하기

이제 업로드한 폰트를 직접 글에 적용해 보겠습니다.

작성한 글이 있다면 수정으로 작성하고 있는 글이 있다면 그 창에서

 

 

기본 모드를 눌러서 HTML로 변경해 줍니다.

1번 줄에 엔터를 눌러서 공간을 내주고,

아래와 같이 입력합니다.

 

<style>

p {

font-family: 'startagain', cursive;

color: #000000;

font-size: 24px;

}

</style>

 

 

여기서 미리 보기를 눌러보면

 

 

 

p의 모든 글꼴이 'startagain'으로 변경된 것을 확인할 수 있습니다.

하지만 글꼴마다 크기가 조금씩 달라서 그런지 '다시 시작해' 글꼴은 조금 작게 보이더라고요.

그래서 24 포인트(px, 초록색 글씨)로  입력했으나 이미 줄에 size16으로 티스토리에서 정해놓은 크기가 있어서

이것을 강제로 키워보겠습니다.

 

 

 

보시면 

font-size: 24px !important;

와 같이 느낌표에 important(보라색)를 넣어서 기본 스타일을 무시하고 강제로 사이즈를 넣게 됩니다.

이렇게 하고 미리 보기를 하면

 

 

 

제가 원하는 글자 크기로 포스팅이 나가는 것을 확인할 수 있습니다!!!

 

 

 

 

4-1. 일부분 적용하기

 

<div>를 사용해서 일정 구간에 원하는 폰트를 입히는 방법입니다.

폰트 적용을 원하는 곳, 그 아랫줄에 </div>를 넣어서 구간을 정해줄 수 있습니다.

 

원했던 것처럼 물러가지 않더라고요 까지 적용된 모습입니다.

 

 

4-2 문장 적용하기

 

아예 문장에 넣는 방법입니다.

뭔가 강조하고 싶을 때 쓸 수 있겠네요.

 

 

맨 마지막 문장에만 적용한 모습입니다.

 

 

 

제가 준비한 것은 여기까지입니다.

네이버에서 블로그 작성할 때는 딸깍으로 글꼴이나 폰트 사이즈를 조절할 수 있었는데

이번 경험을 통해서 조금 더 근본적으로 블로그 작동 원리에 다가가는 법을 배운 것 같아서

생각보다 즐거웠습니다.

 

원하시는 폰트로 글 작성하셨으면 좋겠네요~

감사합니다!!