티스토리 블로그 폰트는 맑은 고딕과 나눔 고딕 외에 스킨에 따라 다양한 글꼴이 기본 폰트로 적용되어 있고, 헤더와 본문, 사이드바와 푸터 등 스킨 구성에 따라 구글 폰트와 눈누 이외의 기업과 공공기관 등에서 공개하고 있는 적절한 웹 폰트를 적용하여 인터페이스를 변경할 수 있습니다. TISTORY 폰트는 스킨과 함께 블로그 구성에 가장 많은 영향을 주는 요소 중 하나로, 경제와 금융, 음식과 여행, 영화와 문화, 생활 정보와 인터넷 등 Blog를 운영하는 주제에 맞추어서도 사용하는 글꼴을 고딕과 명조, 필기와 캘리그래피 등 다양한 형태의 글꼴을 디자인 형태로 HTML과 CSS 편집에서 적용할 수 있습니다.
1. 티스토리 폰트 변경하는 방법 : 눈누 글꼴과 Google Font 적용
link 방식
<head>
<!-- GmarketSans Web Font Start -->
<link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">
<!-- GmarketSans Web Font End. -->
</head>import 방식
/* GmarketSans Web Font Start */
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
/* GmarketSans Web Font End. */font-face 방식
/* GmarketSans Web Font Start */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* GmarketSans Web Font End. */티스토리 블로그 제목과 본문, 사이드바와 댓글, 헤더와 푸터 등 스킨 폰트 변경하는 방법은 먼저, Google 검색을 통해 ‘눈누’ 또는 ‘구글 폰트’ 사이트로 이동한 후 고딕과 명조, 필기와 픽셀, 고전과 코딩, 캘리그래피 등 다양한 유형의 글꼴 중에서 TISTORY에 적용할 폰트를 선택합니다.
웹폰트를 적용하는 방식은 ‘link’ 방식과 ‘import’ 방식, 그리고 ‘font-face’ 방식 중 선택하여 이용하면 되는데, 코드 블록 내에는 ‘GmarketSans Web Font’의 ‘font-face’로, 폰트 페이스를 복사하여 TISTORY 관리의 ‘CSS’에 추가해 주고, 변경하고자 하는 글꼴 ‘font-family:’ 첫번째 부분에 ‘GmarketSans’ 또는 ‘GmarketSansMedium’를 추가해 주면 됩니다.
2. TISTORY 웹 폰트 적용하는 방법
티스토리 블로그에 웹폰트를 추가하는 방법은 먼저, TISTORY 계정에 로그인 한 다음, ‘🏠 블로그관리 홈 – 꾸미기 – 스킨 편집’을 선택하면, 인터넷 웹 브라우저의 새 탭으로 스킨 편집 미리 보기 화면이 활성화 되며, 우측 상단의 적용하고 있는 스킨 ‘ex.Book Club’ 오른쪽의 ‘html’ 편집 버튼을 클릭 합니다.
링크 방식의 웹 폰트 적용하는 방법은 TISTORY 스킨 편집의 HTML 편집에서 ‘<head> ~ </head>’ 사이에 ‘link’ 코드를 붙여넣기 하고 우측 상단의 ‘적용’ 버튼을 누르면, CSS 편집의 ‘font-family:’ 항목에 적용되어 있는 기본 폰트를 ‘ex.GmarketSans’ 등 설정한 폰트로 변경할 수 있습니다.
임포트 방식과 폰트-페이스 방식으로 웹 폰트 적용하는 방법은 ‘TISTORY 블로그관리 홈 – 꾸미기 – 스킨 편집 – HTML 편집 – CSS’에서 스킨에 따라 ‘ex. Book Club 스킨의 경우 상단의 ‘/* Web Font Load */’ 형태로 주석 처리되어 적용되어 있는 폰트 상단 또는 하단 또는 사용자가 관리하기 편한 하단 등에 ‘import’ 방식 또는 ‘font-face 방식’의 폰트 코드를 붙여 넣기 하고 ‘적용’ 버튼을 누르면, CSS 편집의 ‘font-family:’ 항목에 적용되어 있는 기본 폰트를 ‘ex.GmarketSans’ 등 설정한 폰트로 변경할 수 있습니다.
3. TISTORY 블로그 웹폰트로 ‘font-family:’ 변경하는 방법 : 눈누 글꼴과 구글 웹폰트 적용
/* Type Selector Reset */
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'GmarketSans, Nanum Gothic, Malgun Gothic, Roboto Mono, monospace, Dotum, Gulim, Verdana, Arial, Trebuchet MS';
font-size: 1em;
line-height: 1.25;
color: #555;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
font-size:15px;line-height:1.5;font-family:'GmarketSans','D2Coding', sans-serif;color:#666666
margin: 0;
padding: 0;
}
티스토리 블로그 웹폰트 변경하는 방법은 CSS 편집의 검색(단축키: Ctrl + F) 창에 ‘font-family:’를 입력하고 검색하면, 위의 코드 블록의 내용 기본 글꼴이 ‘Nanum Gothic’ 또는 ‘Malgun Gothic’ 등이 적용되어 있으며, ‘Nanum Gothic, Malgun Gothic, Roboto Mono, monospace, Dotum, Gulim, Verdana, Arial, Trebuchet MS’;’ 등의 여러가지 글꼴이 적용되어 있는 경우에는 가장 앞에 위치해 있는 폰트 부터 스킨에 출력되어 앞 부분에 ‘ex.GmarketSans’를 입력하고 적용 버튼을 누르면 G마켓 산스가 기본 폰트로 적용 됩니다.
참고로, 스킨의 본문과 사이드바, 헤더와 푸터, 카테고리와 링크 등 글꼴이 적용되어 있는 영역은 ‘font-family:’ 또는 ‘font’ 검색을 통해 사용되고 있는 글꼴을 확인하거나 구글 크롬과 마이크로소프트 엣지, 모질라 파이어폭스와 오페라 브라우저에서 TISTORY 페이지에 접속한 다음 ‘F12’ 키를 눌러 활성화 되는 개발자 도구를 통해서도 확인하고 폰트 종류와 함께 크기와 굵기, 색상 등을 변경할 수 있습니다.
