🖥️ IT, 컴퓨터/🔍 티스토리 ・애드센스

[티스토리] 전체 글꼴 / 사이드바 1차, 2차 메뉴 글꼴 변경하기

김 홍시 2023. 2. 17.
반응형

글꼴 바꾸기

전체 글꼴

스킨편집

 

html 편집 클릭 > CSS 클릭

웹폰트를 불러온 후

* 뒤에 가장 앞에 있는 폰트가 전체 폰트이다.

 

나의 경우 iropke batang을 전체 폰트로 설정하였다.

 

설정 결과

 

사이드바 1차, 2차 메뉴 글꼴

 

.sidebar가 있는 부분으로 이동하여 (나의 경우 1970번대 근처)

새롭게

////1차 메뉴
.sidebar .category .link_tit {
	font-family: Pretendard-ExtraBold;
		font-size: 1.2em;}
.sidebar .category .link_item {
	font-family: 'GmarketSansMedium';
		font-size: 14.875px;}
.sidebar .category .link_item .c_cnt {
	font-family: 'pretendard';
		font-size: 14.875px;}
		


////2차 메뉴
.sidebar .category .link_sub_tit {
	font-family: Pretendard-ExtraBold;
		font-size: 1.2em;}
.sidebar .category .link_sub_item {
	font-family: 'NEXON Lv1 Gothic OTF';
		font-size: 13.81px;}
.sidebar .category .link_sub_item .c_cnt {
	font-family: 'pretendard';
		font-size: 13.81px;}

를 붙여넣는다.

 

나의 경우 카테고리 1차 메뉴 글꼴은 Gmarket Sans Medium으로,

카테고리 2차 메뉴 글꼴은 Nexon Lv1 Gothic으로 설정하였다.

 

1차 메뉴, 2차 메뉴 각각 최하단에 있는 c_cnt는 글 개수이다.

 

 

설정 결과

 

 

 

꿀팁

바꾸고 싶은 부분이 있다면

개발자도구 > 검사요소 선택 버튼 클릭해서 

바꾸고 싶은 곳에 마우스오버한다.

오버 시 모습 : 글꼴 알 수 있음
클릭 시 모습

이렇게 html칸에서 어떤 이름에 해당하는지가 보인다.

이 경우, link_sub_item의 하위항목이므로, 

 

.sidebar .category .link_sub_item .c_cnt {
  font-family: 'pretendard';
    font-size: 13.81px;}

 

.sidebar .category .link_sub_item .c_cnt이라는 이름으로 설정하면 되는 것이다.
 
반응형

댓글