본문 바로가기
Blog/시작해보자

티스토리 폰트(글꼴) 적용 2가지 방법

by 둥둥동동# 2021. 4. 25.
728x90

티스토리 글꼴(폰트) 변경하기

 

오늘은 티스토리 글꼴 변경하는 방법에 대해 포스팅 하겠습니다.

스킨변경을 하다려고 찾다가 복붙수준의 글이 너무 많아 정확한 자료를 찾는데 정말 한참 걸렸습니다.

제가 찾은 두가지 방법을 한포스팅에 모아보았습니다.

 

거두절미하고 본론만 말씀드리겠습니다.  

티스토리에 폰트를 적용하는 방법은 2가지가 있습니다. 

하나는 폰트를 블로그에 저장하는법, 다른 하나는 외부 사이트와 연결하는 방법이 있습니다.
자세한 사항은 아래에 

 

 

1.폰트 직접 등록하는 방법

 

우선 적용하고 싶은 폰트를 다운받아 주세요.

 

 

다운 받으셨다면 이제 관리 페이지로 들어가 파일을 업로드 해줍시다

 

 

 

추가를 완료하면 다음과 같이 리스트에서 확인할 수 있습니다.

 

 

이젠 CSS를 수정할 차례입니다.

다음 소스코드를 복사하여 CSS에 복사해주세요

font-family: 'BMHANNA11yrs'; 는   본인이 다운받은 글씨체 이름을 적어주세요

1
2
3
4
5
6
@font-face {
font-family: 'BMHANNA11yrs';
font-style: normal;
font-style: normal;
src: url('./images/BMHANNA_11yrs_ttf.ttf');
}
cs

 

복사한 뒤 CSS코드 최상단에 코드를 추가합니다.

src가 가리키는 폰트를 사용하것이라고 선언한것으로 이해하면 되시겠습니다.

 

 

이제 적용하고자하는 클래스에 다음 폰트를 적용시키면 됩니다.

 

 

 

적용 버튼을 누르고 나면 적용이 완료됩니다.

 

 

 

 

2. 외부 사이트에서 불러오는 방법

 

티스토리에 저장하지 않고 외부사이트에서 불러오는 방법도 있습니다.

구글폰트 혹은 눈누폰트 등 무료 폰트를 배포해주는 사이트를 들어가줍시다.

저는 한글폰트가 다양한 눈누폰트를 들어가 보겠습니다.

noonnu.cc/

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 

모든폰트에서 필요한 폰트를 검색해 들어가 줍니다.

 

 

 

접속하셨다면 네모 박스를 복사합니다

 

코드를 CSS에 붙여넣고 

 

 

원하는 곳에 적용시켜줍니다.

 

 

적용버튼을 누르면 끝!

728x90

댓글