티스토리 폰트 변경 방법은 크게 두 가지로 나눌 수 있습니다.
1) 폰트 파일을 업로드 하여 적용하는 방법
2) 웹폰트를 사용하는 방법 (구글폰트/눈누폰트)
오늘은 제가 사용하고 있는 오디세이(odyssey) 스킨에 웹폰트를 타이틀과 본문에 적용하는 방법에 대해서 포스팅하려고 합니다 :)
눈누폰트 - https://noonnu.cc/
개인 적으로 한글 폰트가 많이 있는 눈누 폰트를 선호하기 때문에 눈누 폰트 사용법을 먼저 설명하도록 하겠습니다 헤헤 😉
① 폰트고르기
우선 자신의 블로그에 적용하고 싶은 폰트를 골라줍니다. 추천 폰트는 블로그 주제에 따라 다르겠지만, 아무래도 가독성이 좋은 폰트가 가장 좋겠죠?
타이틀 폰트와 본문 폰트를 분리하고 싶다면 거기에 맞게 따로따로 선정해 주셔도 괜찮습니다!
눈누 폰트 사이트의 상단 메뉴에서 모든 폰트를 눌러준 뒤, 폰트 형태별로 보실 수 있어요. 개인적으로 명조체를 선호하지만, 오늘은 가독성도 좋고 귀엽기도 한 나눔바른펜을 적용해보겠어요 :)
폰트를 클릭하면 상세페이지로 이동합니다. 웹폰트로 사용이라고 되어 있는 부분을 복사합니다. 복사하기 아이콘을 클릭하면 쉽게 복사할 수 있어요!
② 스킨에 적용하기
블로그 설정에서 스킨 편집을 클릭합니다.
CSS 탭을 선택하고, 웹폰트로 사용 부분에서 복사한 것을 붙여 넣어 줍니다. /* 웹폰트 - 나눔바른펜 */라는 주석을 달아주시면, 나중에 본인이 수정한 부분을 보기가 편해요 ㅎㅎ
/* 웹폰트 */
@font-face {
font-family: 'NanumBarunpen';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumBarunpen.woff') format('woff');
font-weight: normal;
font-style: normal;
}
이제 폰트를 넣어줬으니 CSS에서 변경하고 싶은 부분을 찾아줍니다. 저는 포스팅 제목 부분과 본문 부분만 수정했습니다.
포스팅 제목 부분
포스팅 제목의 카테고리: .article-header .box-meta .category
포스팅 제목: .article-header .title-article
포스팅 제목 아래의 작성자: .article-header .box-info .writer
포스팅 제목 아래의 작성시간: .article-header .box-info .date
해당 위치를 찾아서 { } 괄호 안에 아래와 같이 font-family: 'NanumBarunpen'; 를 삽입해 주면 됩니다.
.article-header .box-meta .category {
margin-bottom: 12px;
font-family: 'NanumBarunpen';
font-size: 14px;
font-weight: 600;
}
.article-header .title-article {
display: block;
width: 100%;
max-width: 760px;
margin: 0 0 33px 0;
font-family: 'NanumBarunpen';
font-size: 28px;
font-weight: 400;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: keep-all;
}
.article-header .box-info {
font-size: 13px;
line-height: 1.54;
opacity: .7;
}
.article-header .box-info .writer {
margin-right: 15px;
font-family: 'NanumBarunpen';
}
.article-header .box-info .date {
position: relative;
font-family: 'NanumBarunpen';
}
포스팅 본문 부분
포스팅 본문: .article-view p
해당 위치를 찾아서 제목 부분에서 했던 것과 똑같이 { } 괄호 안에 font-family: 'NanumBarunpen'; 를 삽입해 주면 됩니다.
반응형의 경우 위의 이미지와 같이 두 곳 모두 넣어줘야 합니다. @media 아래에 있는 곳도 잊지말고 넣어주세요 :)
구글폰트 - https://fonts.google.com/
① 폰트고르기
구글 폰트 사이트에 들어가서, 한국어를 선택해줍니다. 26개의 폰트가 뜨는데요. 그 중에 마음에 드는 폰트를 고릅니다. 이번에는 나눔 명조체를 선택했습니다.
나눔 명조체를 클릭하면 그 안에 여러가지 스타일이 있는데요. 레귤러 400을 선택하고, 오른쪽 상당에 있는 아이콘을 눌러줍니다.
그럼 이렇게 오른쪽에 이렇게 웹 폰트를 사용할 수 있는 링크가 나옵니다.
② 스킨에 적용하기
구글 폰트의 경우 html과 css 모두 수정이 필요합니다.
html 편집
<link>라고 되어 있는 부분을 복사해 줍니다.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet">블로그 설정 - 스킨 편집 - html 편집으로 들어가서 html 탭을 클릭해 줍니다.
<head> 아랫부분에 삽입해주고 적용을 눌러줍니다. html에서 주석을 달 때는 <!-- 주석 -->를 사용합니다. 나중에 글씨체를 바꿀 때 알아보기 쉽게 주석을 달아주세요 :)
CSS 편집
CSS 편집은 앞서 포스팅 한 것과 같이 포스팅 제목 부분과 본문 부분을 찾아서 해당 폰트를 적용해 주면 됩니다.
font-family: 'Nanum Myeongjo', serif;
오늘은 웹폰트를 사용하여 티스토리 블로그 글씨체를 변경하는 것에 대해서 알아보았는데요 :) 부디 많은 도움이 되었기를 바라겠습니당 ㅎㅎ
'[Blog&iPhone] > 팁&정보' 카테고리의 다른 글
| [해외입국] 유럽 국가별 코로나 입국 관련 사항 정리 (2021년 5월 21일자) - 영국 / 독일 / 아일랜드 / 프랑스 / 스위스 (0) | 2021.05.21 |
|---|---|
| [갤럭시 S8 리뷰] 카메라 비교 - 아이폰6 / 아이폰7 / 갤럭시 S7 엣지 / 갤럭시 S8 (0) | 2017.04.17 |
| [이모티콘] 아이폰에서 ღෆ 하트 특수문자 사용하기 - 단축키 / 텍스트 대치 (4) | 2017.02.22 |
| [카카오톡 이모티콘] 카카오 이모티콘 샵 - 설맞이 20% 할인쿠폰 이벤트 (0) | 2017.01.25 |
| [카카오톡 이모티콘] 카카오 이모티콘샵 오픈기념 할인 이벤트 (3) | 2017.01.25 |