티스토리 글꼴(폰트) 적용하기
오늘은 티스토리 글꼴 변경하는 방법에 대해 포스팅 하겠습니다.
티스토리에 폰트를 적용하는 방법은 2가지가 있습니다. ① 폰트를 직접 다운로드하고 등록하는 방법 ②외부에서 웹 링크로 폰트(글꼴) 불러오는 방법입니다.
| 폰트 다운로드 | 웹링크 폰트 불러오기 |
| 파일 업로드 | HTML <link>태그 |
| CSS @font-face | CSS @import |
1. 폰트를 직접 다운로드하고 등록하는 방법
우선 적용하고 싶은 폰트를 다운받아 주세요. 우리는 경기도체를 다운받아보겠습니다.
다운 받으셨다면 이제 관리 페이지로 들어가 파일을 업로드 해줍시다
1) 서체 파일을 업로드하기
Title_Medium.woff추가되었습니다.
추가를 완료하고 다음과 같이 리스트에서 확인할 수 있습니다.
2)CSS로 이동하여 웹폰트 로드하기 - @font-face 코드 입력후 적용
이젠 CSS를 수정할 차례입니다.
다음 소스코드를 복사하여 CSS에 복사해주세요.
@font-face {
font-family: 'Title_Medium.woff';
font-style: normal;
font-style: normal;
src: url('./images/Title_Medium.woff');
}font-family: 'Title_Medium'; 는 ... 지금사용 할, 자신이 다운받은 글씨체 이름을 적어주세요
복사한 뒤 CSS코드 최상단에 코드를 추가합니다.
'src:url이 가리키는 폰트를 사용하라'로 선언한 것으로 이해하시면 됩니다.
이렇게 입력한후, 이제 적용하고자하는 클래스에 다음 폰트를 '적용'시키면 됩니다. body부분 font-family에 'Title_Medium'입력한 후 '적용'버튼을 누릅니다.
/*layout Selector */의 #header h1은 '블로그 제목' 폰트입니다.
'적용' 버튼을 누르면 적용이 완료됩니다.
2. 외부 사이트에서 불러오는 방법
티스토리에 저장하지 않고 외부사이트에서 불러오는 방법도 있습니다.
구글폰트 혹은 눈누폰트 등 무료 폰트를 배포해주는 사이트를 들어갑니다.
우리는 아래 사이트-'네이버 나눔 폰트'를 알아보겠습니다.
https://hangeul.naver.com/font
1) 웹폰트 URL, 주소를 복사해서 붙여넣습니다.
2) 아래코드를 CSS에 붙여넣고 습니다. 이름하여 font-family:????? 를 설정합니다.
원하는 곳에 적용시켜줍니다.
** 글 작성 시에는 변경한 글꼴이 표시되지 않으며, 미리보기나 글 작성이 완료된 글에서 바뀐 글꼴을 확인할 수 있습니다.