티스토리 ] 블로그 제목 폰트 바꾸기 + 눈누 웹 폰트 원하는 굵기 사용하기

 

 

블로그 제목 폰트 바꾸는법

 

 

 

 

 

1. 상업용 무료한글폰트 사이트인 눈누에 접속해서 원하는 폰트를 찾는다.

 

 

 

 

 

 

내가 찾은 Y클로버체는 굵기가 2가지라고 나와있다.

 

옆에 웹폰트로 사용 박스에 있는 코드를 복사해서 티스토리 블로그 제목 폰트로 적용하려고 하는데, YClover-Bold만 있고 일반굵기의 코드가 안보인다.

 

 

2. 원하는 굵기의 @font-face 찾는방법

 

 

구글 크롬에서 F12를 누르고 개발자 모드를 연 뒤 좌측 상단의 화살표 표시를 누른다.

 

 

 

 

 

그리고 원하는 굵기의 폰트로 써있는 글씨에 마우스를 가져다 댄 후 클릭한다.

 

 

 

 

 

개발자 도구 Styles에서 font-family를 알아낼 수 있다.

 

 

 

 

 

알아냈으면 위의 Element 화면에서 Ctrl + F를 누르고 해당 font-family를 검색해서 @font-face를 찾아낸다.

 

 

 

 

            @font-face {
    font-family: 'YClover-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/YClover-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
            @font-face {
    font-family: 'YClover-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/YClover-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

 

 

 

 

 

 

이제는 티스토리 - 스킨 편집 - CCS에 들어가서 찾은 @font-face를 복사해준다.

 

 

 

 

 

 

 

CCS 에서 header h1을 검색하고 그 안의 font-family를 아까 추가한 것으로 수정해준다.

 

굵기를 수정하려면 font-weight를 normal이나 눈누사이트에서 봐뒀던 수치로 변경해준다.

 

#header h1 {
	padding: 23px 0 ;
	font-family: 'YClover-Regular';
	font-weight: normal;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}

 

 

 

티스토리 블로그 제목 폰트 변경하기 끝