[CSS] 티스토리 블로그 폰트 글씨체 변경하기

☘️ 시작하기 앞서

티스토리 블로그는 사용자가 자유롭게 커스텀할 수 있다는 장점이 있다.

그래서 티스토리 블로그의 기본 글씨체 폰트를 본인이 원하는 대로 수정을 해보겠다.

 

☘️ 폰트 선택하기

먼저 사용할 폰트를 선택해야 한다.

나는 주로 눈누 라는 사이트를 사용하며 프로젝트를 진행할 때에도 주로 눈누에 있는 폰트를 사용한다.

눈누

 

다양한 폰트들이 있는데 거기서 원하는 폰트를 골라준다. 나는 오뮤 다예쁨체 를 선택하였다.

폰트 선택하기

 

라이선스

사용하기 앞서, 먼저 이 폰트가 웹 사이트에서 사용할 수 있는지 라이선스를 확인해야 한다.

다행히 이 폰트는 웹 사이트에서 사용 가능한 폰트이다.

 

웹 폰트

티스토리 블로그에 사용하기 위해 오른쪽에 있는 웹폰트로 사용 안에 있는 내용들을 복사해 준다.

웹 폰트로 사용

 

☘️ 티스토리 블로그 적용

스킨 편집

티스토리 관리 페이지에 들어와 꾸미기 -> 스킨 편집 을 클릭해 준다.

스킨 편집

 

html 편집

폰트를 적용하기 위해서는 블로그 파일을 직접 수정해야 되기 때문에, 오른쪽에 있는 html 편집 버튼을 눌러준다.

html 편집

 

웹 폰트 붙이기

아까 복사한 폰트를 사용하기 위해 CSS 최상단에 아까 코드를 붙여 넣는다.

그리고 font-weight, font-style 이 기본적으로 정해져 있으면

내 블로그 요소에 있는 font-weigth 속성을 무시하고 그냥 적용이 되므로 이 두 줄을 없애고 font-family, src 만 붙였다.

폰트 적용

 

font-family 설정

컨트롤+F or 커맨드+F 를 눌러 body 태그 안에 있는 font-family 를 찾아 주고,

맨 앞에 아까 붙여 놓은 font-family 이름을 적어준다.

 

참고로 font-family 앞에 있는 폰트가 먼저 적용되며, 만약 해당 폰트가 없으면 옆에 있는 폰트가 적용되며,

또 그 폰트가 없으면 그 옆에 있는 폰트가 적용된다.

하지만 우리는 아까 최상단에 웹 폰트를 붙였으니 모든 사용자들은 이 폰트가 적용될 것이다.

font-family

 

☘️ 결과

적용 버튼을 누르면 정상적으로 내 티스토리 블로그에 해당 폰트가 적용된다. 

지금 보고 있는 이 화면도 직접 적용한 폰트이다.