식상한 기본 폰트 변경하고 싶지 않나요?

이런 마음이 들어 이 홈페이지(워드프레스) 폰트를 변경했었는데요. 요즘 티스토리를 다시 사용할 일이 생겨 만지작하고 있습니다. 근데 티스토리 기본 폰트 또한 식상함이 느껴져 손글씨로 변경하고 싶더라구요. 그래서 변경했고 그 절차를 남겨봅니다.

외부 폰트 다운로드

폰트는 구글 또는 네이버에서 다운로드 받을 수 있습니다. 허나 한글은 네이버가 짱이죠? 다운로드는 아래 블로그를 참고하세요.

워드프레스 외부 폰트 적용하는 법

ttf 파일 티스토리 업로드

경로 : 티스토리 관리자 페이지 > 꾸미기 > 스킨편집 > 파일업로드

해당 경로로 이동해서 추가 > ttf 파일을 등록 > 저장합니다. 저 같은 경우는 newfont, goldfont 2개를 업로드 하였습니만 goldfont만 사용합니다.

CSS 편집해서 폰트 적용

파일업로드 옆에 CSS 탭으로 이동해서 다음과 같이 코드를 입력합니다.

@font-face {
	font-family: 'goldfont';
	src: url('./images/goldfont.ttf');
	}

다운로드 받은 파일명을 goldfont로 변경하고 적용한 모습입니다. 똑같이 쓰시되 파일명만 수정하시면 되겠습니다.

body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'goldfont', 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
	font-size: 1.5em;
	line-height: 1.25;
	color: #555;}

body 부분에서 font-family에 goldfont를 추가합니다.

#header
h1 {
	padding: 23px 0 ;
	font-family: 'goldfont', 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 2.35em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;}

header h1 부분에서 goldfont를 추가합니다. 다시 한번 말씀드리지만 goldfont는 제가 임의로 수정한 ttf파일명입니다. 본인이 수정한대로 변경하시면 됩니다.

완료하셨다면 저장하세요.

외부 폰트 적용 결과

이렇게 폰트가 간단하게 변경됩니다. 워드프레스 외부 폰트 적용하는 것에 비하면 일도 아니죠.

추가 팁!

외부 폰트 적용했을때 폰트 사이즈가 급격하게 작아지는 걸 볼 수 있는데요. 해결방법을 알려드립니다.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 120%;}

CSS 탭에 html, body 안에 font-size라고 있습니다. 디폴트 값은 100% 인데요. %를 늘려주세요. 저 같은 경우는 120%가 적당했습니다.

이렇게 하면 각 적용되는 CSS별로 각각 변경할 필요 없이 블로그 내 모든 폰트가 다같이 커집니다.

티스토리 외부 폰트(ttf) 적용하는 법