초간단 꿀팁 티스토리 폰트 글꼴 변경 및 무료 폰트

티스토리는 html 과 CSS를 잘 알고 계시는 분들에게는 아주 유용하게 꾸밀 수 있도록 되어 있습니다.
그런데 티스토리 글꼴 변경하고 싶은데 어려워서 엄두가 안나시는 분들 계신가요?

아주 초간단하게 바꿀 수 있는 방법이 있습니다.

아래에 있는 것을 그대로 따라 하시면 얼마든지 바꿀 수 있습니다.
추천하는 폰트도 제공하니 꼭 해보시길 추천드립니다!

변경방법

내가 바꾸고 싶은 폰트를 골라준 후 웹폰트로 사용가능 한 영역을 우선 복사합니다.

그리고 블로그 관리 - 스킨 편집에 들어갑니다.

오른쪽 상단 부분에 Html 편집을 눌러줍니다.

Html 에서 CSS로 변경 해준 후

Ctrl+F로 Web font 또는 Body를 찾아줍니다.

그리고 사진 속 빨간 영역과 동일하게
/* 폰트이름(구분할 수 있는 글자)*/ 를 넣어준 후
아래 영역에 Ctrl+V 로 붙여넣기 해줍니다.

위에 사진과 동일하게 font-familly:'폰트의 주어진 이름'을 복사한 후 붙여넣기 합니다.

이후 적용을 눌러 새로고침을 하면 변경이 완료됩니다.

저는 강원교육체를 좋아해서 넣어보았습니다.

폰트 사이트

먼저 무료 폰트 사이트를 추천드리겠습니다.
https://noonnu.cc/



직접 찾으셔도 되지만 많고 번거롭다 보니 몇가지 추천해 드리겠습니다.
고딕체, 손글씨체 등 여러가지가 있으니 마음에 드시는 코드는 위의 방법을 이용하시길 바랍니다.

추천 폰트

@font-face {
    font-family: 'Humanbumsuk';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Humanbumsuk.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GangwonEdu_OTFBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '양진체';
    src: url('https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LeeSeoyun';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GangwonEduSaeeum_OTFMediumA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduSaeeum_OTFMediumA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KNPSKkomi-Regular00';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/KNPSKkomi-Regular00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LeferiPoint-WhiteObliqueA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/LeferiPoint-WhiteObliqueA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'insungitCutelivelyjisu';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/insungitCutelivelyjisu.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}