[Tistory] 티스토리 스킨 hELLO!! 폰트 수정, 굵기 변경 (2)

hELLO 스킨을 감사히 사용하고 있지만, 더욱 내가 원하는 스타일로 조금 변경해보고자 한다.

 

 

1. 폰트 수정

 

1) 바꾸고 싶은 폰트 복사

눈누에서 바꾸고 싶은 폰트의 폰트를 복사한다.

https://noonnu.cc/

눈누

 

필자는 'S-CoreDream' 으로 정했다.

 

 

2) CSS에 추가

상단에 추가하였다.

@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); */
     font-weight: normal;
     font-style: normal;
}

 

 

3) 굵기 변경

원하는 폰트의 굵기 조절은 font-weight 로 하면 되는데, 안 된다..!!!

 

그래서 폰트 이름으로 변경하였다. 폰트 이름으로 변경하는 방법은 아래와 같다.

S-CoreDream은 Thin, Extra Light, Light, Regular, Medium, Bold, Extra Bold, Heavy, Black 의 9가지 굵기를 가진 폰트를 가진다.

💡 원하는 굵기로 바꾸고 싶다면 아래 내용으로 선정하자 !
S-CoreDream-1Thin
S-CoreDream-2Extra Light
S-CoreDream-3Light
S-CoreDream-4Regular (필자는 기본 글자 굵기를 이 폰트로 지정하였다.)
S-CoreDream-5Medium
S-CoreDream-6Bold
S-CoreDream-7Extra Bold
S-CoreDream-8Heavy
S-CoreDream-9Black

 

 

4) 폰트 적용

그 다음 html{} 의 font-family 를 찾아 font-family: '폰트 이름'을 추가해 준다.

 

⭐ 모바일도 적용하고 싶다면 @media로 시작하는 코드에 font-family: '폰트 이름'을 추가하면 된다. (필자는 안 함)

 

 

 

 

2. Strong 폰트만 굵기 수정

 

그런데.. 기본으로 선정된 폰트가.. Bold(굵게 표시) 를 해도 굵게 잘 보이지가 않는다..

 

이를 위해 본문 내용에서 Bold 부분의 폰트를 변경해준다.

 

1) CSS에 추가

새 폰트 정의: 5Medium 으로 변경하여 상단에 추가하였다.

@font-face {
  font-family: 'S-CoreDream-5Medium';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

 

 

2) 굵게 표시된 부분에 폰트 적용

b, strong {} 부분 코드를 찾아 font-family: '폰트 이름'을 추가해 준다.

b,
strong {
  font-family: 'S-CoreDream-4Bold', sans-serif;
  font-weight: bold;
}

 

 

전 보다 Bold 구분이 잘된다!