블로그 폰트 바꾸는 법 CSS html 티스토리 꾸미기

차근차근 꾸며나가보는 티스토리 블로그

사실 예전부터 신경이 쓰였던 블로그 들어오면 가장 먼저 보이는 블로그 이름(제목)

 

여기 역시 html CSS로 간단하게 꾸밀 수 있다.

 

---

블로그 이름(제목)폰트 바꾸기

 

 

① 가장 먼저, 사용할 폰트를 정해야하는데

사용 가능한 무료폰트들이 있는 '눈누' 추천

(로그인 없이 사용 가능)

 

② 다양한 폰트들 중 마음에 드는 폰트를 클릭하고

 

③ 위와 같은 페이지가 나오면 우측 상단쪽에 있는 [웹폰트로 사용] 부분으로 가서 코드를 복사해 준다.

 

웹폰트로 사용 우측 버튼을 누르면 굳이 드래그 하지 않아도 쉽게 복사할 수 있음

 

④ 그 다음에는 늘 그렇듯이

[스킨편집] - [html 편집] - [CSS]로 들어가준다.

 

⑤ CSS 맨 윗줄의 @charset "ut-f8"; 아랫줄에

눈누에서 복사한 폰트 코드를 넣어준다.

 

여기서 보이는 font-family: 옆에 보이는것이 폰트 이름인데, 교체할때 필요하니 따로 남겨두거나 복사해놓으면 편하다.

 

 

⑥ font-family를 검색해주고

아랫쪽으로 쭉쭉 내려가다보면 보이는

#header h1 아래 부분의 font-family 폰트를 변경해주면 된다.

(원래있던 폰트를 지우고 변경할 폰트의 이름으로 교체)

 

#header h1 → 블로그 이름(제목) 부분의 html 코드

 

⑦ 적용 전 [미리보기] 버튼을 통해 코드가 잘 되었는지 확인해볼 수 있으니, 미리 체크한 후 [적용] 버튼을 눌러주면 완료된다.

 

 

---

 

그리고 역시나 눈누에서 복사한 폰트 코드로 변경할 수 있는 본문의 인용구 폰트.

만약 블로그 이름에 들어가는 폰트와 같다면, 제일 윗줄 @charset "ut-f8"; 에 추가할 필요는 없으며, 새로운 폰트라면 폰트 추가까지는 같은 방법으로 해놓으면 된다.

 

인용문 폰트 변경하기

 

글 작성시 인용문에 따라 폰트가 바뀌는것을 볼 수 있는데,

이 역시 [HTML] - [CSS]에서 변경이 가능하다.

차례대로 style 1, 2, 3 으로 되어있으니 참고하기

 

① 역시나 편집창에서 CSS 로 들어간 후

ctrl + F(윈도우)  혹은 ⌘ + F(맥) 으로 '인용문'을 검색해준다.

② 위 사진처럼 /* 인용문 */ 이 뜨는 부분이 나오는데 (차례대로 style 1, 2, 3)

 

③아래에 있는 font-family 부분에 있는 폰트를 같은 방법으로 교체해주면 된다.

style 2 /3 에는 font-family가 없는데

이럴경우 엔터치고 만들어주면 된다.

 

---

 

 

이렇게 간단하게 꾸며 본 티스토리 블로그

순서대로 차근차근 따라하면 아주 간단하고 쉬우니 참고하기!

 

 

 

optd.tistory.com

들기름메밀국수 블로그

많이 들어와보걸아