티스토리 폰트 임베딩하기(폰트 파일 티스토리 적용 방법)

2년쯤 전에 티스토리 폰트를 변경하는 방법에 대해서 포스팅을 한 적이 있다. 그 때에는 웹폰트를 적용하는 방법에 대해서 설명했었다. (궁금하다면 아래 링크 클릭!)

 

2021.02.06 - [혼자서도 잘 해요/Tistory] - 티스토리 블로그 폰트 변경하기 - 전체적용

티스토리 블로그 폰트 변경하기 - 전체적용

 

그때 변경했던 폰트를 사용한지도 어언 2년이 지나서 슬슬 지루해지던 참에... 우연히 인터넷에서 마음에 드는 폰트 하나를 발견했다. 알아보니 유료 폰트였지만... 폰트 임베딩을 하려면 더 비쌌지만... 그래도 지름신이 찾아온 나를 막을수는 없었다-_-;

 

그래서 결국 폰트 라이센스를 구입했고, 포스팅을 쓰고 있는 2023년 5월 현재에는 이 티스토리 블로그에 해당 폰트가 적용되어 있는 상태이다. (그래서 나는 기분이 매우 좋은 상태이지🥰)

 

웹폰트가 아닌 일반 폰트 파일을 웹사이트에 적용하는 것은 웹폰트와 비교했을 때, 폰트를 서버에 업로드하는 단계 하나가 더 추가되어야 한다. 그리 어렵지는 않으니 티스토리 폰트를 변경하고 싶은 분들은 천천히 따라해보시기를 바란다. 

 

폰트 임베딩이란?

임베딩(embedding)은 '~을 깊숙이 넣다, ~을 단단히 끼워넣다' 등의 사전적 의미를 가지고 있다. 프로그램 용어로서의 임베딩은 뭔가를 끌어와서 포함시킬 수 있다는 의미이다. 즉 폰트 임베딩이란, 특정 폰트를 내가 만든 웹사이트, 블로그, 어플 등의 콘텐츠 안에 포함시킨다는 뜻이다.

 

티스토리 블로그에 폰트 임베딩하는 방법 

먼저 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집 항목을 선택한다.

 

 

그러면 스킨 편집 창이 새로 뜰 것이다. 화면의 오른쪽 부분에서 'html 편집' 버튼을 누른다.

 

 

그 다음 나오는 화면에서 파일업로드 탭을 선택한 후, 하단의 '추가' 버튼을 클릭해서 적용하고 싶은 폰트를 업로드한다. 당연하겠지만 업로드를 위해서는 폰트 파일이 PC 안에 다운로드된 상태여야 한다. (폰트 파일 미리 준비할 것) 나는 미리 라이센스를 구매한 Carmen Sans OTF 파일을 업로드했다.

 

 

폰트가 업로드되었다면 CSS 탭으로 이동한다. 그리고 아래와 같이 코드를 추가한다.

 

@font-face {
  font-family: '폰트이름(자유롭게)';
  src: './images/업로드한폰트파일확장자명까지정확하게');
  font-weight: normal;
  font-style: normal;
}

 

업로드한 폰트가 여러개라면 각각 입력해준다.

 

 

스크롤을 내려 /* Type Selector Reset */ 부분을 찾는다. 만약 해당 부분을 찾는 것이 어렵다면 단축키 command + F를 이용하면 도움이 될 것이다. (윈도우는 ctrl + F) 그 다음 body 옆의 대괄호{ } 안에서 font-family를 찾아 새롭게 업로드한 폰트명으로 바꾸어주면 된다.

 

 

폰트명을 바꾸었다면 상단의 새로고침, 적용 버튼을 차례대로 누른다. 다시 티스토리 블로그 메인으로 돌아와서 브라우저창을 새로고침하면 폰트가 제대로 변경된 것을 확인할 수 있을 것이다.

 

---

+ 여기서 잠깐!

블로그 타이틀과 소제목 두께를 본문보다 두껍게 적용하고 싶다면 아래 링크를 참고하면 된다.

 

https://heina-fantasy.tistory.com/101

티스토리 블로그 폰트 변경하기 - 세부설정

 

다만 위의 포스팅은 '북클럽' 스킨에 한정되어 있는데, 조만간 기회가 되면 원하는 부분의 태그를 찾아 해당 부분만 폰트를 변경하는 방법에 대해서 정리하도록 하겠다🙏🏻