티스토리 블로그 글씨체 변경하는 방법

@거대토끼의개발일지

 

티스토리 블로그 개설하고 이것저것 써보고 알아보다가 티스토리는 HTML, CSS 코드 변경을 할 수 있다는 것을 알게 되었습니다. 그래서 글씨체를 변경하는 방법을 간단히 알게되었습니다. 저만 따라오세용~

 

변경할 글씨체 고르기

 

변경할 글씨체는 어디서 골라오냐면, 눈누에서 선택합니다!

 

1️⃣ 눈누 홈페이지에 접속하기

https://noonnu.cc/

눈누

 

2️⃣ 눈누 홈페이지에서 원하는 글씨체/폰트 선택하기

눈누 홈페이지에 접속하면 위와 같이 다양한 폰트를 확인할 수 있습니다. 

 

해당 폰트가 어떻게 쓰여질지에 잘 모르겠다면, 원하는 문장을 해당 폰트 이름 아래에 직접 입력해서 볼 수 있습니다.

 

3️⃣ 해당 폰트/글씨체 속성 복사하기

저는 Line Seed라는 폰트를 블로그에 쓰고 싶어서 선택했습니다.

 

폰트 이름 오른쪽에 화살표를 클릭합니다.

이 폰트 속성 페이지에서 웹폰트로 사용 오른쪽을 클릭해서 복사합니다.

 

제가 복사한 것은 아래와 같습니다.

@font-face { font-family: 'LINESeedKR-Bd'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2'); font-weight: 700; font-style: normal; }

 

티스토리 블로그 스킨 편집하기

https://oranjipatchdev.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EC%8A%A4%ED%82%A8-%ED%8E%B8%EC%A7%91%ED%95%98%EA%B8%B0

[티스토리] 티스토리 꾸미기 스킨 편집하기

 

블로그 인용문 글씨체 변경하기

 

저는 인용문 글씨체를 변경해보겠습니다!

인용문 뿐만 아니라 본문 글이나 다른 글도 글씨체 변경이 가능합니다. 단, 2️⃣번에서 해당 속성 코드를 찾아야합니다 :)

 

1️⃣ 글씨체 변경 가능한 환경 만들기

CSS 코드에 눈누 홈페이지에서 복사한 폰트 코드를 붙여넣습니다.

 

저같은 경우엔 CSS 코드 맨 위에 붙여넣었습니다. 위치는 상관없으니 원하는 곳에 붙여넣기하면 됩니다.

 

그리고 여기서 font-family 를 복사해주세요. 3️⃣에서 쓰입니다.

 

2️⃣ 인용문 속성 코드 찾기

CSS 코드 창을 클릭해서 ctrl + F (윈도우) 혹은 ⌘ + F (맥) 한 후에 '인용문'을 입력해 검색을 합니다.

 

그러면 위 사진과 같이 /* 인용문 */ 부분을 찾을 수 있습니다.

 

그리고 인용문 아래 빨간 박스 부분이 인용문 속성 코드입니다.

 

인용문 속성 코드에서 공통적으로 보이는 것이 blockquote입니다. 무슨 뜻이냐 하면 blockquote로 둘러싸인 모든 속성은 인용문 속성이라는 것입니다.

 

이 때, data-ke-style 로 style1, 2, 3 이 있는게 보이죠? 이것은 각 인용문 스타일 속성을 보여주는 코드입니다.

각 스타일

 

3️⃣ 인용구 글씨체 변경하기

드디어! 글씨체를 변경합니다.

 

만약에 내가 style2 인용문만 글씨체를 변경하고 싶을 경우에는 style2 코드에 1️⃣에서 복사한 font-family를 붙여넣습니다.

 

짠! 글씨체가 변경된 걸 확인할 수 있습니다 :)

 

만약에 내가 모든 인용문 스타일에 글씨체를 변경하고 싶다면 font-family를 모든 인용문 코드에 붙여넣기 하면 됩니다.

 

---

 

이렇게 하시면 티스토리 인용문 글씨체 변경을 할 수 있습니다. 끄읕~