개발하는 사막여우
개발하는 사막여우
개발하는 사막여우
전체 방문자
오늘
어제
  • All (310)
    • Books (13)
      • 읽기 좋은 코드가 좋은 코드다 (13)
    • Study (6)
      • Blockchain (3)
      • Algorithm (3)
    • Baekjoon (36)
    • Programmers (166)
    • LeetCode (15)
    • Open Source (1)
      • Youtube Popout Player (1)
    • Language (32)
      • Python (9)
      • JS (8)
      • Java (5)
      • HTML (6)
      • CSS (4)
    • Library & Framework (15)
      • React.js (15)
    • IDE (2)
      • IntelliJ (2)
    • Airdrop (9)
    • Tistory (2)
    • etc.. (12)
      • Cozubi (6)
      • lol-chess (0)

블로그 메뉴

  • Github

공지사항

인기 글

태그

  • Java
  • 알고리즘문제풀이
  • 프로그래머스
  • 파이썬
  • 코인줍줍
  • 백준
  • 신규 코인 에어드랍
  • 프로그래머스 위클리 챌린지
  • Cozubi
  • programmers
  • 카카오 공채
  • 카카오 코딩테스트
  • Python
  • 카카오 알고리즘 문제
  • 클린 코드 작성법
  • 클린 코드
  • 읽기 좋은 코드가 좋은 코드다
  • 코주비
  • 2018 KAKAO BLIND RECRUITMENT
  • 코딩테스트연습

최근 댓글

최근 글

티스토리

반응형
hELLO · Designed By 정상우.
개발하는 사막여우

개발하는 사막여우

[티스토리 팁] 폰트 변경하기 / 글씨체 바꾸기
Tistory

[티스토리 팁] 폰트 변경하기 / 글씨체 바꾸기

2021. 1. 7. 16:58
반응형

TITLE

티스토리는 폰트를 바꾸려면 css를 직접 바꿔줘야합니다.

css에 친숙하지 않은 분들은 어려움을 느낄 수 밖에 없습니다.

따라서 그런 분들을 위해 폰트를 바꾸는 방법을 아주 쉽게 설명해보도록 하겠습니다.

우선 폰트 설정은 두 가지로 나눠서 할 수 있습니다.

 

A. 블로그 제목 폰트 설정

B. 블로그 내용 폰트 설정

 

제목 / 내용 폰트 설정을 따로따로 할 수 있습니다.

 

A와 B를 동일한 폰트로 할 수도 있고, 다른 폰트로 할 수도 있습니다. 

개인적으로 제목에 적용하기 좋은 폰트와 내용에 적용하기 좋은 폰트는 좀 다르다고 느껴져 저는 따로 쓰고 있습니다.

아래 사진으로 따라하기 쉽게 방법을 적어놓았으니 해보시고 궁금한 점은 댓글 달아주시면 바로 확인하도록 하겠습니다.

 


A. 블로그 제목 폰트 설정


 

1. 원하는 폰트 찾기

>>>모든 폰트 보기: fonts.google.com/

>>>한글 폰트 보기: fonts.google.com/?subset=korean

위의 홈페이지는 구글에서 제공하는 일종의 폰트 모음집입니다. 여기서 원하는 폰트를 선택하시고, 클릭해주세요. 

 

2. "Select the style" 클릭

 

3. "@import"클릭

@import를 클릭하여 아래와 같이 바뀌는지 확인해주세요.

 

4. 티스토리 > 스킨 편집 클릭

 

5. "html 편집" 클릭

 

6. "CSS" 클릭

7. 폰트 홈페이지 > "<style> @import .... </style>" 에서 "@import..." 부분 복사

<style> 과 </style> 사이의 부분을 복사하면 됩니다.

 

8. 티스토리 > 이미 있는 @import 밑에 복사한 "@import..."  붙여넣기

기존의 @import를 지우고 붙여넣기 해도 상관없으나, 혹시 모르는 상황을 대비해 그냥 붙여넣기 하시는 걸 추천드립니다.

 

9. @import 아무거나 클릭 후 Ctrl+F > "header h1" 입력 > "header h1 { ..... " 확인

제목을 담당하는 부분을 찾는 것입니다. 우리가 건드릴 부분은 "font-family :..." 부분입니다.

 

10. 폰트 사이트 > "CSS rules to specify family " 밑의 부분 복사

 

11. "header h1" 밑의 "font-family : ..." 드래그하고 복사한 거 붙여넣기

저" font-family "부분을 교체한다고 생각하시면 됩니다.

 

12. "font-family" 바뀐거 확인 > 적용 클릭 > 새로고침 클릭 > 바뀐 제목 확인

제목 폰트 바꾸기 성공!

 


B. 블로그 내용 폰트 설정


※1~8번 A(블로그 제목 폰트 설정)과 동일합니다!

9. 폰트 사이트 > "CSS rules to specify family" 밑의 부분 복사

 

10. 티스토리 > 사진과 같이 "AppleSDGothicNeo" 뒷 부분 드래그, 복사한 것 붙여넣기

 

11. "font-family: ...." 바뀐거 확인 > 적용 클릭 > 새로고침 클릭 > 바뀐 내용 확인

 

 

질문 및 수정은 항상 환영합니다😊

반응형

'Tistory' 카테고리의 다른 글

[티스토리 팁] 코드블럭 다루기 / 코드블럭 색깔입히기  (10) 2020.12.23
    'Tistory' 카테고리의 다른 글
    • [티스토리 팁] 코드블럭 다루기 / 코드블럭 색깔입히기
    개발하는 사막여우
    개발하는 사막여우
    개발개발 주저리주저리

    티스토리툴바