이번 시간에는 티스토리 블로그 폰트(글꼴)를 원하는 부분만 변경, 바꾸는 방법에 대해서 알아보도록 하겠습니다. WHATEVER 반응형 스킨의 ① 블로그 이름(타이틀) 폰트 변경하는 방법 과 ② 글 더보기 글자에 마우스를 올렸을 때 바뀌는 색상 변경 에 대한 댓글 문의가 있었어요.
우선 제가 사용하고 있는 WHATEVER 스킨 기준으로 설명드릴게요. 어떤 스킨을 사용하든 같은 방법을 적용하면 원하는 부분 폰트, 글꼴 수정은 어렵지 않게 하실 수 있습니다. 보통 블로그 전체 글꼴, 폰트 수정은 기본적으로 많이 하시죠. 저도 많은 분들이 사용하시는 나눔 고딕(Nanum Gothic)으로 변경하여 사용 중인데요.
블로그 이름(블로그명, 타이틀)이나 본문 제목 등 원하는 부분마다 다르게 글꼴 적용을 하고 싶을 때가 있어요. 방법도 간단합니다. 우선 원하는 글꼴 폰트를 찾아야겠죠. 구글 폰트 사이트에서 원하는 폰트를 선택하면 코드가 생성이 됩니다. 그 코드를 스킨 편집에서 HTML, CSS 해당 위치에 삽입만 해주면 끝이에요. 참 간단하죠?
WHATEVER 스킨은 상단에 메뉴바(상단 메뉴, 상단 바, 헤더, HEADER) 좌측에 블로그 이름이 들어갑니다. 제 블로그 네임인 앨리's Room 폰트는 기본 글꼴로 설정한 나눔 고딕이었고, 색상과 크기만 수정해서 사용하고 있었습니다.
customizing, WHATEVER 스킨, 반응형 스킨, 반응형 웹스킨, 블로그, 블로그 스킨, 커스터마이징, 코딩, 티스토리, 티스토리 whatever 스킨
위 이미지는 블로그명을 다른 폰트로 수정한 상태인데요. 구글 폰트에서 찾은 Gamja Flower입니다. 타이틀로 쓰기에 그다지 적합한 폰트는 아니라고 생각하지만, 동글동글하니 귀여운 느낌이 제 블로그명과 잘 어울려서 설정해 봤어요. 그럼 원하는 폰트를 찾으러 구글 폰트 사이트로 이동해 보겠습니다.
Google Fonts ▶ https://fonts.google.com/
우측 언어(Languages)를 보면 전체 언어(All Languages)로 기본 설정되어 있습니다. 변경할 부분의 글자가 한글로 되어 있다면, 언어 설정을 한국어(Korean)로 바꿔주세요. 25종의 한글 폰트를 지원하고 있습니다.
+버튼을 클릭하면 원하는 폰트가 선택되고, 선택된 글꼴은 -로 바뀝니다. 저는 Gamja Flower 하나만 선택했는데, 여러 개 선택도 가능합니다. 하단의 블랙박스에 선택된 폰트 숫자 (1 Family Selected)를 확인하실 수 있어요. 그 부분을 클릭하면 스킨에 삽입할 코드를 확인할 수 있습니다.
티스토리 반응형 스킨, 티스토리 스킨, 티스토리 스킨 수정, 글꼴 변경, 글꼴 수정, 폰트 수정, 폰트 변경, 구글 폰트, Google Fonts
우측 상단에 다운로드 표시를 클릭하면, PC에 바로 저장도 가능합니다. 색깔 박스 표시된 두 코드를 복사하여 스킨의 HTML, CSS 해당 위치에 각각 삽입해 주겠습니다. 그런데 이 코드를 그대로 사용할 경우 크롬(Chrome)에서는 폰트가 정상적으로 보이지만, 인터넷 익스플로러에서는 폰트가 정상적으로 보이지 않아요.
인터넷 익스플로러에서도 폰트가 정상 출력하기 위해 &subset=korean 을 첫 번째 코트 중간에 넣어주겠습니다.
<link href="https://fonts.googleapis.com/css?family=Gamja+Flower&display=swap&subset=korean" rel="stylesheet">
이 코드를 복사(Ctrl+C) 해서 블로그 관리 홈으로 이동합니다.
블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > HTML에서 헤드 사이에 붙여 넣어(Ctrl+V) 줍니다. <head>와 </head> 사이 편한 곳에 삽입 후 적용 클릭합니다.
그다음 구글 폰트로 다시 가서 두 번째 코드를 복사해 옵니다.
font-family: 'Gamja Flower', cursive;
블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 블로그 이름에 해당되는 위치에 삽입해 주겠습니다. 제가 사용하는 WHATEVER 스킨의 경우는 107번째 줄 #header h1 a를 찾으시면(Ctrl+F) 됩니다.
font-family가 이미 있다면 원하는 폰트로 수정하면 되고, 없는 경우는 그대로 붙여넣기하면 되겠습니다. 사이즈가 작아서 font-size:1.5em; 추가하여 크기를 좀 더 크게 수정했어요. 마지막에 적용 클릭합니다.
블로그명, 타이틀이 원하는 폰트로 수정된 걸 확인하실 수 있습니다. 크롬과 인터넷 익스플로러, 모바일 버전으로 모두 확인해 보시길 바랍니다. 글 "더보기" 글자에서 마우스를 올렸을 때 바뀌는 색상 변경은 다음 글에서 바로 설명드리겠습니다.
읽어주셔서 감사합니다 :)
' 정보 > 티스토리·애드센스' 카테고리의 다른 글
| F12 개발자 도구, 블로그 스킨 편집 CSS 위치 찾기 (4) | 2019.05.30 |
|---|---|
| 티스토리 WHATEVER 스킨 수정, 글 "더보기" 색상 변경하기 (0) | 2019.05.30 |
| 새로운 구글 서치 콘솔(Google Search Console)로 검색 노출 빠르게 하자. (0) | 2019.05.06 |
| 티스토리 WHATEVER 스킨 수정 ③ (4) | 2019.04.27 |
| 티스토리 WHATEVER 스킨 수정 ② 상단 메뉴 고정-본문 위치 아래로 이동 (8) | 2019.04.24 |
| ♥ 공유 버튼 이용 온라인 스크랩만 허용합니다. ♥ 무단 복사 도용 및 2차 변경을 금지합니다. |
댓글