CSS-글꼴 | 티스토리 스킨 글꼴 바꾸기

내 블로그 스킨도 딱 좋고, 내용들도 알차고, 다 좋은데 가끔 뭔가 변화를 주고 싶을 때가 있나요?

너무 많은 변화는 뭔가 망칠까봐 무섭고, 부담도 되고...

글꼴이라도 바뀌면 좀 새로워 보일라나??

 

그래서 오늘은 실패 없이 글꼴 바꾸는 방법을 알아볼게요.

 

1. 구글 폰트에서 언어를 한국어로 설정하세요

언어를 한국어로 설정

2. 마음에 드는 글꼴을 찾아 클릭해서 글꼴 페이지로 가세요

글꼴 페이지

3. "스타일 선택"을 클릭하세요

스타일 선택하기

4. 오른쪽 사이드바에서 "삽입"탭을 선택하고 "@import"방식을 선택하세요

import, font-family 찾기

5. @import와 font-family를 메모장에 잠깐 복사해두세요

import, font-family

**<style></style>은 필요 없습니다**

 

6. 꾸미기 에서 "스킨 편집"을 열어주세요

꾸미기 > 스킨편집

7. 오른쪽 사이드바에서 "html 편집"을 클릭해주세요

html 편집 클릭

8. 위에서 CSS를 클릭하세요

CSS 탭

9. 스킨의 CSS파일에 import를 복붙 해주세요

** !!주의!!  @import가 제일 위에 있어야 합니다.**

import 붙여넣기

스킨에 import가 이미 있는 경우엔 그 밑에 붙여 넣어주시고, 없는 경우엔 제일 위에 붙여주시면 됩니다.

 

!! 여기서부터 말이 많아지는데 중요합니다 스압 주의!!

 

열려있는 CSS파일을 보시면 이런 코드가 보이실 거예요

body style

{} 사이의 내용은 스킨에 따라 다를 수 있습니다.

 

"저는 블로그 전체의 글꼴을 바꾸고 싶어요"

그러면 body{ ... } 있는 font-family를 구글에서 복사한 font-family로 바꾸면 블로그 전체의 글꼴이 바뀝니다.

 

팁

body {
/*font-family: 'Noto Sans KR', sans-serif;*/ /* 사용 안함 */
font-family: 'Cute Font', cursive; /* 사용중 */
}

이렇게하면 스킨의 본 글꼴을 잃어버리지 않고 내가 원하는걸로 바꿀수 있습니다.

/* */은 코멘트 입니다. 단순하게 말하자면 브라우저한테 "/* */ 사이에있는거는 무시해"라고 하는겁니다.

 

"저는 블로그 글의 글꼴만 바꾸고 싶어요"

블로그 글의 스타일이 어떻게 지정돼있는지 알아야 해요.

1. 아무 글을 새 탭에서 열어주세요 (수정 아니에요)

2. 키보드에서 F12를 눌러서 개발자 도구창을 열어주세요

개발자도구

3. 개발자도구 맨 왼쪽 위에 화살표를 클릭하세요. 파란색으로 변하면 활성화된 상태입니다.

4. 블로그 글을 클릭해주세요

팝업에 "p" 가 보이시죠? 이제 이 p의 스타일을 찾아야 해요

 

5. 개발자 도구 오른쪽에서 p의 스타일을 찾으세요. 주로 두번째 줄에 표시됩니다

CSS Selector

!잠깐만~!

.entry-content p를 CSS 셀렉터라고 부릅니다.
.entry-content p 에서 .entry-point는 스킨에 따라 다를 수도 있습니다.
중요한 건 p 가 포함돼있는 것입니다.

확실하지 않다면 개발자도구에서 CSS 셀렉터 위에 마우스를 올려놓으면 그 스타일을 사용 중인 것들이 하이라이트 됩니다

6. 스킨 편집 화면에 있는 CSS 파일에서 위에서 찾은 CSS 셀렉터를 찾으세요. Ctrl + f 으로 서치창을 열어 CSS 셀렉터를 쉽게 찾을수있습니다

Ctrl + f 서치

 

p 스타일

 

찾은 CSS 셀렉터안에 font-family가 이미 있을수도, 없을수도 있습니다.
만약에 font-family가 이미 있으면 위에서 처럼 /* */ 으로 감싸고 내가 원하는걸 넣어주세요.

font-size는 글자의 크기를 조절할수 있습니다.
새로넣은 글꼴에따라서 글자의 크기를 조절해야할수도 있습니다.
이거는 직접 바꿔보면서 원하는 사이즈를 찾으시면 됩니다.

 

7. 구글에서 복사해둔 font-family를 붙여넣어주세요

font-family 바꾸기

저는 글자크기도 바꿨습니다.

 

8. 맨위에 "적용"을 눌러 바뀐 스타일을 적용시키세요

 

블로그로가서 새로침하시면 글꼴이 바뀐것을 확인하실수 있습니다.

 

끝!