티스토리 반응형 #2 웹폰트로 글꼴(폰트) 바꾸는 방법과 뭉개짐(깨짐)현상 해결법
마음에 드는 웹폰트를 찾아 나만의 블로그에 적용하는 방법
이 블로그는 티스토리 반응형 #2 스킨을 사용 중이므로 반응형 #2 스킨을 기준으로 작성.
블로그에 웹폰트 적용하기
1. 마음에 드는 웹폰트 찾기
제일 먼저 블로그에 적용시키고 싶은 폰트를 찾아야한다.
아래 두 사이트는 많은 이용자들이 이용하는 눈누와 구글폰트이다. 해당 사이트에서 마음에 드는 폰트를 찾는다.
눈누
상업용 무료한글폰트 사이트
noonnu.cc
눈누
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트
(1) 눈누 이용
필자는 눈누에서 유토이미지고딕R을 선택했다. 여기서 오른쪽에 보이는 웹폰트로 사용 부분의 코드를 복사한다.
(2) 구글 폰트 이용
폰트와 스타일을 선택하면 우측에 폰트 정보가 뜬다. 하단에 <link>와 @import 중 하나를 선택하여 아래 코드를 복사한다.
2. 폰트 가져오기
[블로그 관리] - [스킨 편집] - [html 편집]의 경로로 들어간다.
(1) 눈누
CSS로 들어가 복사한 코드를 붙여 넣어 폰트를 가져온다.
가져온 코드 부분 중 font-family: 부분에 적힌 'BBTreeGL'이 폰트의 이름이다.
(2) 구글 폰트 - 1
구글 폰트는 방법이 2가지로 나뉜다.
첫 번째 방법은 <link>로 가져왔을 때.
HTML 부분에서 <head> 태그 아래에 복사한 코드를 붙여 넣는다.
<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=Nanum+Gothic&display=swap" rel="stylesheet">적용 예시
3번째 줄 코드 중 family=Nanum+Gothic 에서 +는 공백으로 적용하여 'Nanum Gothic'가 폰트 이름이니 기억해둔다.
2번째 방법 @import 코드로 가져왔을 때
<link>와 같은 방법으로 복사한 코드를 <head> 태그 안에 그대로 붙여 넣는 방법 (1)
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
</style><style> 태그를 지우고 CSS에 붙여넣는 방법 (2)
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');폰트의 이름은 동일하게 family= 뒤에 있는 'Nanum Gothic'이다.
3. 적용시키기
반응형 #2 스킨 기준으로 body,th,td,input,select,textarea,button 부분에서 font-family 가장 앞부분에 가져온 글꼴의 폰트 이름을 적으면 된다.
적용 코드
body,th,td,input,select,textarea,button {
font-size:18px;
line-height:1.5;
font-family: 'BBTreeGR', 'Spoqa Han Sans', sans-serif;
color:#666
}해당 방법으로 하면 블로그의 모든 폰트가 웹폰트로 적용이 된다.
여기서 부분별로 다른 폰트를 적용하거나 글씨 크기 등을 수정하려면 해당 부분만 따로 CSS를 적용시키면 된다.
폰트 뭉개짐(깨짐) 현상 해결
폰트를 적용시키고 난 후 윈도우 크롬에서 폰트가 뭉개져 보이는 현상이 발생했다.
화질 차이를 감안하고서도 오른쪽 사진에선 글자의 굵기가 일정하기 않고 겹쳐지듯 보여 같은 글꼴임에도 환경에 따라 가독성이 급격하게 떨어지고 지저분해 보이는 것을 확인할 수 있다.
검색을 해보니 간단하게 글씨를 약간 기울어 출력하여 해당 문제를 해결할 수 있다.
해결법
스킨 편집 - HTML 편집에서 CSS에 아래 속성을 추가해주면 된다.
필자의 경우 1번째 방법으로는 해결이 안 되어 2번째 방법으로 문제를 해결하였다.
transform: skew(-0.001deg); /*방법1*/
transform: rotate(0.04deg); /*방법2*/반응형 스킨 #2를 기준으로 본문의 모든 글에 적용시키기 위해 아래 코드처럼 작성하였다.
.area_view p,a,h1, h2, h3, h4, h5, h6, ol, ul, li{
transform: rotate(0.04deg);
}