티스토리 블로그에 폰트 변경하기: 쉽고 간단한 방법 가이드

블로그를 운영하다 보면 더 개성 있는 글꼴로 분위기를 바꾸고 싶다는 생각이 들 때가 있습니다. 하지만 티스토리의 기본 폰트만으로는 만족스럽지 않을 때, 원하는 폰트로 커스터마이징하는 방법이 궁금하시죠? 오늘은 티스토리에서 폰트를 변경하는 방법을 처음부터 끝까지 간단히 설명드리겠습니다.

1. 티스토리에서 폰트를 변경하려면 무엇이 필요할까요?

티스토리에서 폰트를 변경하려면 CSS 파일 편집과 폰트 파일 두 가지가 필요합니다.

CSS 파일 편집: 폰트를 블로그에 적용하는 코드 작업입니다.
폰트 파일: 원하는 폰트를 적용하기 위해 필요한 리소스입니다.

그럼, 여기서 첫 번째 질문이 생길 수 있습니다.
"폰트 파일은 어디에서 구하나요?"
여기서 소개할 사이트는 **눈누(noonnu.cc)**입니다. 눈누는 무료로 사용할 수 있는 다양한 한글 폰트를 제공하는 플랫폼으로, 상업적 사용 가능 여부도 명확히 표시되어 있어서 안심하고 사용할 수 있습니다.

2. 눈누를 활용한 폰트 파일 준비

눈누에 접속하기
눈누에 접속하면 다양한 무료 폰트가 카테고리별로 정리되어 있습니다.
"어떤 폰트를 선택해야 할까?" 고민된다면 블로그 주제와 스타일을 떠올려 보세요. 예를 들어:
- 감성적인 블로그라면 부드러운 손글씨 폰트
- 깔끔한 정보 전달 블로그라면 고딕체
폰트 다운로드
원하는 폰트를 선택한 뒤, 다운로드 버튼을 클릭하면 .woff, .woff2, 또는 .ttf 형식의 파일이 저장됩니다.
이때, 폰트의 사용 조건(개인용/상업용 가능 여부)을 꼭 확인하세요.

3. 티스토리에서 폰트 파일 업로드

티스토리는 스킨 편집에서 파일 업로드를 지원하기 때문에, 추가적인 서버 없이도 폰트 파일을 쉽게 업로드할 수 있습니다.

1) 티스토리 관리 페이지 접속
티스토리 블로그의 관리 페이지로 이동한 후, 꾸미기 > 스킨 편집 메뉴를 엽니다.

2) 스킨 파일 업로드
스킨 편집 화면에서 오른쪽 상단의 스킨 파일 업로드 버튼을 클릭합니다.
다운로드한 폰트 파일을 업로드하면, 해당 폰트 파일의 URL이 생성됩니다.

궁금증: "URL은 어디에서 확인할 수 있나요?"
업로드된 파일 목록에서 파일 이름을 클릭하면 URL을 확인하고 복사할 수 있습니다.

4. CSS에서 폰트 적용하기

이제 업로드한 폰트를 블로그에 적용할 차례입니다. CSS 파일에서 간단히 몇 줄만 수정하면 됩니다.

1) CSS 편집 열기
스킨 편집 화면에서 CSS 파일(style.css 또는 비슷한 이름)을 엽니다.

2) 폰트 추가 코드 작성
업로드한 폰트 URL을 이용해 @font-face를 추가합니다:

@font-face {
    font-family: 'CustomFont'; /* 원하는 폰트 이름 */
    src: url('https://tistory-user-skinedit-url/font-file.woff2') format('woff2'),
         url('https://tistory-user-skinedit-url/font-file.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

3) 폰트를 요소에 적용하기
body 태그에 기본 폰트를 적용하거나, 특정 요소에만 설정할 수 있습니다:

body {
    font-family: 'CustomFont', sans-serif;
}
h1, h2, h3 {
    font-family: 'CustomFont', serif;
}

궁금증: "왜 폰트 이름을 마음대로 정할 수 있나요?"
font-family에 설정한 이름은 CSS 내부에서만 사용됩니다. 원하는 이름을 자유롭게 지정해도 됩니다.

5. 저장 및 확인

모든 작업이 끝났다면, 저장 버튼을 눌러 변경 사항을 저장하고 블로그를 새로고침하세요.
폰트가 제대로 적용되지 않는다면?

브라우저 캐시를 삭제하거나 강제 새로고침(Shift + F5) 시도.
CSS 파일에서 경로가 올바른지 다시 확인.

6. 추가 팁: 폰트 적용 후 가독성 개선

폰트를 변경한 후, 블로그의 가독성을 높이기 위해 폰트 크기와 줄 간격을 적절히 조정하세요.

body {
    font-size: 16px;
    line-height: 1.6;
}

블로그에 개성을 더하는 첫걸음

폰트를 바꾸는 작업은 블로그의 첫인상을 결정짓는 중요한 요소입니다.
눈누와 티스토리의 파일 업로드 기능을 활용하면 서버나 외부 호스팅 없이도 쉽게 적용할 수 있습니다.
여러분의 블로그에 어울리는 폰트를 적용해 개성을 더해 보세요! 😊

혹시 작업 중 궁금한 점이 생기셨나요? 댓글로 질문을 남겨주세요. 도움을 드리겠습니다!

저작자표시 비영리 변경금지

안스토리의 개발블로그