제가 블로그를 시작하며 많이 사용하는 네이버가 아니라 티스토리를 선택한 이유는 커스텀이 가능하다는 점이 가장 컸습니다. 그래서 제공되는 기본 폰트 외에 원하는 폰트를 사용할 수 있다는 점이 가장 결정적이었습니다.
디자인에서 폰트는 중요한 역할을 합니다. 아무리 좋은 이미지와 좋은 레이아웃이라고 하더라도 타이틀 폰트가 별로면 뭔가 어색하고, 본문 폰트가 맑은 고딕과 같은 기본 폰트라면 가독성이 떨어져보입니다. 그래서 저는 웹디자인을 할 때 <h1> ~ <h6>과 같은 타이틀은 디자인 폰트를 쓰고, <p>와 같은 본문에는 구글에서 제공하는 Noto Sans KR을 사용합니다.
디자인 폰트는 각자 생각하는 블로그나 웹페이지의 디자인에 맞게 잘 활용하면 되고, 본문은 아직 Noto Sans KR를 대체할만한 폰트를 찾지 못해 거의 기본처럼 사용합니다.
그러면 지금부터 원하는 웹폰트를 찾고 티스토리 블로그와 웹페이지에 반영하는 방법을 알아봅시다.
1. 구글 웹폰트
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
위 사이트에 들어가면 다음과 같은 화면이 나옵니다.
이 중 원하는 폰트를 골라서 선택해봅니다. 저는 바로 보이는 Noto Sans Korean을 선택해보겠습니다.
화면에 크게 폰트를 보여주고 오른쪽 사이드바를 보면 정보와 링크들이 나와있습니다. 노토산스는 9개의 굵기 옵션이 있는데 페이지를 하단으로 내리면 그 중 원하는 굵기를 선택할 수 있습니다.
여기서 선택을 하면 오른쪽 사이드 바가 변경이 됩니다. 화면을 보면 지금은 400, 900 두가지가 선택되어 있네요.
사이드바 중간을 보면 옵션을 선택하는 칸이 있습니다. <link> 방식과 @import 방식이 있는데요, 전자는 html에, 후자는 css에 입력하는 방법입니다. 저는 보통 css에 입력하는 방법을 선호하는데, 어차피 폰트 지정도 css에서 하는게 편하기 때문입니다. css를 편집하기 어려운 경우에는 전자의 방식을 사용해야겠지요.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"><link> 방식은 위 내용을 복사해서 <head> </head> 사이에 넣어주면 됩니다. 보통 </head> 바로 윗줄에 입력합니다.
@import 방식을 선택하면 다음과 같은 코드가 나옵니다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap');
</style>위 태그 역시 <head> </head> 사이에 넣어주는 방식입니다. 이것을 css에 넣어주기 위해서는
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap');이 부분만 넣어주면 됩니다. 보통 css에서는 최상단에 입력합니다.
만약 나중에 굵기를 추가하고 싶다면 400;900 부분을 바꾸면 됩니다. 300;600;900 이런식으로요.
만약 티스토리 스킨에서 css 편집으로 이동하는 것을 모르시는 분은 아래 글을 참고해주세요.
https://jaeheepapa.tistory.com/entry/CSS-티스토리-스킨에서-마우스-드래그-색상을-바꿔보자
[CSS] 티스토리 스킨에서 마우스 드래그 색상을 바꿔보자
웹서핑을 하다보면 필요한 부분을 복사하기 위해서이기도 하지만 저는 의미없는 마우스 드래그를 하며 글을 읽는 편입니다. 드래그를 하면 보통 다음과 같은 모습이 나옵니다. 마우스로 드래그
jaeheepapa.tistory.com
블로그 혹은 웹페이지에 불러오는 것은 완료했습니다. 이제 이 폰트를 적용해봐야겠지요?
위 태그 아래에 다음과 같이 입력해봅니다.
body {
font-family: 'Noto Sans KR';
font-size: 16px;
color: #2b2b2b;
font-weight:300;
}위 내용 중 첫번째인 font-family는 글꼴을, font-size는 크기, color는 색상, 마지막 font-weight는 굵기를 의미합니다. 굵기는 자신이 선택한 옵션 중에서 골라야하고 만약 고르지 않은 굵기를 입력하면 첨부되어있는 굵기 중 비슷한 것으로 맞춰집니다.
웹페이지의 경우 여러 웹폰트를 쓰면 통일성 측면이나 로딩시간이 길어지기 때문에 최소화하는 것이 좋은데요. 저는 보통 본문은 굵기 300을, h1~h6과 같은 타이틀에는 굵기 800을 사용하는 편입니다. 이 블로그도 그렇게 되어있고요.
body { } 로 하는 것은
html에서 <body> </body>에 들어가는 모든 글꼴에 적용한다는 이야기입니다. 만약 본문에만 적용을 하고 싶다면 바꿔주는 게 좋습니다.
p, span {
font-family: 'Noto Sans KR';
}보통 본문에 많이 들어가는 태그는 위와 같이 p와 span 입니다. 보통은 <p>만 반영을 해도 대부분 포함이 되는데 <span>도 쓰는 경우가 많은 편이라 같이 넣어줬습니다. 만약 이렇게 변경을 했는데 반영이 안된다면 css 중에 하단에 p 태그를 다른 폰트로 지정을 해두어서 그렇습니다. 그 부분을 찾아서 지워줘도 되고 어렵다면 다음과 같은 방법이 있습니다.
p, span {
font-family: 'Noto Sans KR' !important;
}!important 를 속성과 ; 사이에 넣으면 무조건 이 속성을 따르게 해줍니다.
이제 다시 확인해보시면 잘 적용된 것을 볼 수 있습니다. 이처럼 구글에서 노토산스 외에 다른 폰트도 같은 방식으로 적용하면 됩니다. 상단에 카테고리에서 Language 를 Korea로 바꾸면 한글폰트만 따로 보여주니 편하게 고르실 수 있습니다.
2. 눈누
눈누
상업용 무료한글폰트 사이트
noonnu.cc
눈누는 한글 무료 폰트만 따로 모아두었습니다. 한글폰트만 따지면 구글보다 더 많고 디자인폰트가 많아 타이틀로 활용하기 좋은 것이 많습니다.
접속을 하면 다음과 같은 화면이 나오는데요, 여기서 하나를 선택해볼까요?
제가 요즘 많이 쓰는 강원교육튼튼체를 골라보았습니다. 타이틀 폰트는 이렇게 굵은게 잘 어울리는 것 같더라고요.
원하는 문구를 써보면 반영된 결과를 확인해볼 수 있고 더 내리면 라이선스 정보가 나옵니다. 라이선스는 잘 활용해서 사용해야겠지요? 상업용이 아닌 개인 블로그의 경우에는 거의 문제가 없다고 보시면 됩니다.
오른쪽에 보면 웹폰트로 사용이라는 부분이 보입니다. 마찬가지로 다음 내용을 css 상단에 입력해봅니다.
@font-face {
font-family: 'GangwonEduPowerExtraBoldA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}구글의 방식과 조금 달라보이는데 결과는 같습니다. 폰트명이 조금 어렵네요.
font-family: 'GangwonEduPowerExtraBoldA';이부분을 복사해둡니다.
적용 방법은 구글폰트와 동일합니다. 이번에는 본문용으로 자주 쓰이는 p, span 태그가 아닌 타이틀에 반영을 해볼까요?
h1, h2, h3 {
font-family: 'GangwonEduPowerExtraBoldA';
}이렇게 하면 h1, h2, h3 의 폰트가 달라진 것을 확인할 수 있습니다.
저는 타이틀 폰트를 따로 쓰는 경우 종종 h1 ~ h3 만 반영해주고 h4 ~ h6의 경우는 노토산스를 사용해줍니다. 그러면 타이틀을 쓸 때 이미지 폰트와 일반적인 고딕 폰트를 둘 다 쓸 수 있으니까요.
h1, h2, h3 {
font-family: 'GangwonEduPowerExtraBoldA';
}
h4, h5, h6 {
font-family: 'Noto Sans KR';
}검색엔진에는 주로 h1, h2를 강조하기 때문에 좋은 방법만은 아닙니다. 이런 식도 가능하다는 것을 보여주려는 것이기에 본인이 선택하시면 됩니다.
이렇게 적용을 하면 가독성도 높아지고, 블로그도 좀 더 깔끔한 느낌을 줄 수 있겠지요?
오늘도 좋은 티스토리 생활 보내시길 바랍니다.
