🎀 티스토리 폰트 변경, 본문 글씨 변경하기

개발일지를 쓰기위해 예전에 운영했던 티스토리 블로그 정리하던 중

갑자기 티스토리 폰트를 너무 변경하고 싶어졌다.

 

요새 직업훈련교육으로 풀스택을 듣고 있어 CSS를 조금 해석할 줄 알게 되었다.

 

📑 개발일지

- 티스토리

- 미디어

- 벨로그

 

위에 세가지 사이트중 가장 익숙하고 내가 사용하기 편해보이는 티스토리 선택!

일단 설정으로 들어갔다.

[설정] - [꾸미기] - [스킨편집] 에 들어가 CSS를 선택!

[html편집] 클릭

[CSS] 선택!

그런다음 코드를 살펴보니

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

Web Font를 구글 폰트에서 불러온걸 확인할 수 있었다.

https://fonts.google.com/?subset=korean

Google Fonts

 

위 링크에 접속해 원하는 폰트를 선택한다.

[select this style] 선택 오른쪽 우측 상단  클릭하면 다음과 같이 css코드가 나온다.

css코드와 유사한 [@import]선택

해당 코드를 붙여넣기 하면된다.

 

🪓 font-family가 있는 자리엔 font-family코드 복붙

/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'Gowun Dodum', sans-serif, 'Gugi', cursive;
	/* font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; */
	font-size: 1em;
	line-height: 1.25;
	color: #555;
}



input, select, textarea, button {
	/* font-family: 'Noto Sans KR', sans-serif; */
	font-family: 'Gowun Dodum', sans-serif, 'Gugi', cursive;
	font-size: 100%;
	border-radius: 0;
}

#header h1 {
	padding: 23px 0 ;
	/* font-family: 'Nanum Myeongjo'; */
	font-family: 'Gugi', cursive, 'Gowun Dodum', sans-serif;
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}

 

🪓  @import url 자리엔 @import url를 복사 붙여넣기 해 변경해주면 끝이다.

/* Web Font Load */
/* @import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean'); */
/* @import url('//fonts.googleapis.com/earlyaccess/notosanskr.css'); */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Gugi&display=swap');

 

---

시간이 지나서 다시 접속해보면

모바일 폰트도 변경된 걸 확인할 수 있다.