[#티스토리] 스킨 살짝 손보기 - 웹 폰트를 적용해보자

 

티스토리에서 사용하는 기본 폰트말고, 본인이 원하는 웹 폰트를 사용하고 싶은 경우가 있다. 이 경우 아주 간단하게 코드 두줄만 바꿔주면 바로 적용가능하다.

 

1. 웹 폰트 cdn 주소 찾기

우선 웹 폰트 CSS CDN 주소를 찾아야한다. 여기선 나눔고딕체를 예시로 들겠다. 구글에서 나눔고딕 웹폰트 라고 검색하면 

https://fonts.googleapis.com/earlyaccess/nanumgothic.css 이 주소를 찾을 수 있다.

 

 

 

2. 웹 폰트 적용하기

블로그 관리 페이지의 왼쪽 탭 메뉴의 꾸미기 - 스킨 편집을 눌러 스킨 편집창을 띄우고, html편집 - CSS 를 눌러 CSS 편집창을 띄워보자. 그리고 @import url('아까 찾은 CSS 주소'); 로 임포트 해준다. 나눔 고딕의 경우,  아래 코드를 추가 해주면 된다.

 
 @import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
 

 

 

html편집 - CSS

 

 

그리고 body 안에 font-family: '폰트명', sans-serif; 로 변경해준다. 폰트명은 CSS 주소에 들어가면 font-family: 에 명시되어있다. 이 값을 그대로 써야 적용된다.

 

CSS 파일 내용

나눔 고딕의 경우,

 
body {
  // 다른 속성값은 그대로
  font-family: 'Nanum Gothic', sans-serif;
}
 

을 적어주고, 적용을 누르면 전체 폰트 새로 설정한 웹 폰트로 변경된다.