[CCS] 티스토리 글씨체 변경

안녕하세요, 수염난 아이티 입니다.

 

티스토리를 꾸미다보면 글씨체를 변경하고 싶을 수 있는데,

이번 페이지에서는 티스토리의 글씨체 변경하는 방법을 알아보겠습니다.

 

우선 글씨체를 변경하기 위해서 원하는 글씨체를 찾아야 하는데요,

저는 아래의 사이트에서 무료글씨체를 찾아서 적용했습니다.

 

무표글씨체 사이트 : 눈누

https://noonnu.cc/font_page/pick

눈누

 

저는 '스포카 한 산스 네오' 라는 글씨체를 제 티스토리에 적용했습니다.

 

★주의사항★

글씨체마다 무료/유료의 차이인지 모르겠으나, 글씨체 별 제공 코드가 다릅니다.

원하시는 글씨체를 찾으시되 제 CSS 에 적용한 코드와 동일한 코드가 제공되는지 우선 확인을 해주세요.

[코드보러가기]

 

이제 제가 적용한 사례를 아래와 같이 설명 드리겠습니다.

 

순서가 조금 많아보일 수 있으나 생각보다 간단하여 차근차근 따라오시면

충분히 적용 가능하실거라고 생각합니다.

 

1. 눈누 사이트에 접속해서 우측 상단 검색바에서 원하시는 글씨체를 검색합니다.

 

2. 검색해두고 다시 티스토리로 접속하여 우측의 '관리' 버튼을 클릭합니다.

 

3. 좌측메뉴 하단으로 이동하여 '스킨편집'을 클릭합니다.

 

4. 우측의 'html 편집' 을 클릭합니다.

 

5. 눈누 사이트로 돌아가 코드 복사 버튼을 클릭합니다.

 

6. 다시 티스토리 창으로 돌아와서 상단의 'CSS'를 클릭합니다.

그리고 아래의 코드를 입력합니다. 저는 CSS 코드 거의 상단에 해당 코드를 아래 파란박스처럼 입력했습니다.

해당 코드는 물론 눈누 사이트에서 복사한 코드 입니다.

아래 코드의 /*web font load*/ 내용은 눈누 사이트에서 복사한 코드는 아니고

제가 주석으로 별도로 입력한 코드입니다. 나중에 어떤 내용인지 구분하기 위함입니다.

 

7. 이제 거의 다 왔습니다.

적용한 코드를 잘 보면 아시겠지만, 'SpoqHanSansNeo-Regular' 라고 새로운 폰트의 개체명이 적용되어 있습니다.

이제 이 것을 CSS 모든 font-family 코드에 복사 붙여넣기를 했습니다.

저는 총 16개 검색되어서 수정 했습니다.

 

8. 다 적용했다면 '적용'을 클릭합니다.