먼가 작고 귀여운 코드..

티스토리 블로그 폰트 변경 본문

카테고리 없음

티스토리 블로그 폰트 변경

먼작코 2024. 4. 7. 08:40

지난번 마우스 커서를 변경했으니 오늘은 폰트 변경 방법을 알아보자  ♡⸜(ˆᗜˆ˵ )⸝♡

참고로 타 블로거님들에 따르면 블로그 메뉴, 제목 등은 폰트 변경이 가능하지만 작성된 내용은 변경 불가하다고 한다...

일반적인 방법으론 게시글 작성을 끝낸 뒤 HTML 모드에서 폰트를 수정한다고 하지만 난 다른 방법을 적용했더니 성공했다.

본문 내용까지 변경하고 싶다면 아래 내용까지 읽어보면 알 수 있다. ദ്ദി*ˊᗜˋ*)

 

[ 티스토리 블로그 폰트 변경 ]

1. 우선 적용할 폰트를 골라야 하는데 '눈누'라는 사이트를 추천한다.

상업용 무료 한글 폰트 사이트로 수익 목적을 두고있다면 강력 추천한다!
https://noonnu.cc/

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 

2. 선택한 폰트 클릭 후 빨간색으로 표시한 부분의 코드를 복사한다.

여담이지만 폰트도 부트스트랩처럼 외부 CDN(Content Delivery Network)을 통해 파일을 가져올 수 있다.
CDN은 웹 콘텐츠를 제공하기 위해 여러 위치에 저장된 데이터를 사용자에게 제공하는 서비스로,
웹 페이지의 성능을 향상시키고 글꼴 파일을 빠르게 로드하는 데 도움이 되니 웹 개발자라면 참고하자!


3. 복사한 코드를 '티스토리 관리 > 꾸미기 > 스킨 편집 > CSS > CSS 상단의 문자 인고딩 지시자인 @charsesr "UTF-8"; 아래에 붙여넣기 해준다.
  ᕦ( ᐛ )ᕡ
✅ CSS 영역에도 주석 추가 시 아래와 같이 주석 태그로 감싼 뒤 작성해 주어야 한다.
/* 주석 내용 */


4. 그리고 CSS 영역서도 body 영역의 폰트를 바꿔주면 끝난다. CSS 영역에서 마우스 클릭 후 'Ctrl+f'를 누르면 해당 페이지 내에서 단어 검색이 가능하다. 'font-family' 입력 후 'body'라고 적혀있는 중괄호 영역 안의 'font-family'를 변경하려는 폰트명으로 바꿔주면 된다. 이때 여러 폰트가 적혀있는 경우가 있는데 좌측부터 순차적으로 적용되며 우선순위가 높은 폰트로 출력 불가능한 문자가 있다면 다음 폰트가 적용되는 방식이다. 첫 번째 폰트만 변경해 주고 이후에 있는 폰트들은 변경하지 않는 걸 추천한다.  
중괄호의 이름과 중괄호 안에 적혀있는 코드는 적용된 스킨마다 달라지므로 위 이미지와 내용이 다를 수 있는데 body라고 적혀있는 영역 내에 있는 'font-family'만 바꿔주면 된다. 무지성으로 모든 영역 내의 'font-family' 영역을 변경할 시 내 블로그처럼 폰트가 깨지니.. 주의하자 ^_T


이제 아래와 같이 예쁘게 적용된 걸 볼 수 있다. 야호 ヾ(^∇^)

 

[ 게시글 본문까지 폰트 변경하는 방법 ]

사실.. 방법이랄 것도 없다.. 그냥 CSS 적용 시 CSS 영역 내의 모든 'font-family' 영역에 변경하려는 폰트명을 추가해 주었다.

참고로 나는 변경하려는 폰트에 적용되지 않은 문자가 있을 수 있으므로 기존 폰트를 지우지 않고 그 앞에 작성해 주었다.

그랬더니 내용까지 완벽히 변경되었다 하하

하지만 단점이 있으니... 글씨체 두께등이 변경 불가하는 것이다.. 큰 담점이라.. 폰트 스타일에 예민한 타입을 나와 같은 방법으로 변경하기 않길 권장한다.. 


💟 추천 폰트 💟

IM혜민체 https://noonnu.cc/font_page/686

 

오뮤 다예쁨체 https://noonnu.cc/font_page/1136


강원교육모두체 https://noonnu.cc/font_page/802


엘리스 디지털코딩체 https://noonnu.cc/font_page/920


나눔고딕코딩 https://noonnu.cc/font_page/40