티스로리 원하는 폰트로 변경이 안 된다면
폰트, 글꼴은 네이버를 하면서 네이버 나눔 고딕체가 익숙해졌습니다. 그 이전에는 맑은 고딕을 사용해 오면서 네이버에서는 나눔 고딕체를 사용하고 있는데요. 사용자가 불편하지 않고 본문을 읽을 수 있게 올바른 폰트를 사용하는 것도 하나의 배려가 되겠습니다. 그렇게 하므로서 방문객이 오랜 시간 페이지에 머물게 하는 효과도 생기겠죠.
최근 티스토리 블로그의 스킨에서 사용되는 폰트는 스킨에 최적화되었다고 할 만큼 이상적으로 보입니다. 굳이 변경할 필요를 느끼지 못할 수도 있는데요, 그래도 다른 폰트로 변경하고 싶다면 참고삼아 보여드리겠습니다.
구글에서 웹폰트를 제공하고 있지만 경로가 조금씩 변경되는 것 같기도 합니다. 지금은 웹폰트를 적용하기도 하는데, 웹폰트는 제공하는 측에서 경로를 바꿔버리면 적용이 되지 않습니다. 번거롭더라도 직접 설치한다면 웹폰트 경로와는 다르게 영구적으로 폰트를 바꿀 수 있습니다.
그래서 오늘 소개하는 방법도 폰트를 스킨에 설치하고 영구적으로 사용하는 방법을 알려드립니다. 먼저 사이트에 방문하셔서 폰트를 가지고 옵니다.
https://google-webfonts-helper.herokuapp.com/fonts
나눔고딕 적당한 이름을 넣고 나눔 고딕을 선택합니다.
언어와 크기를 선택합니다.
관련된 폰트를 다운받습니다. 압축파일을 풀어 놓습니다.
CSS코드도 복사해서 준비합니다.
티스토리 블로그로 들어갑니다.
블로그 관리 / 스킨 편집
CSS코드는 에디터툴을 이용해서 css파일로 만들어 봅니다. 붙여넣고 저장을 css로 하면 됩니다. 아래 코드를 이용합니다.
/* nanum-gothic-regular - latin_korean */
@font-face {
font-family: 'Nanum Gothic';
font-style: normal;
font-weight: 400;
src: url('./images/nanum-gothic-v9-latin_korean-regular.eot'); /* IE9 Compat Modes */
src: local('NanumGothic'),
url('./images/nanum-gothic-v9-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./images/nanum-gothic-v9-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('./images/nanum-gothic-v9-latin_korean-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-700 - latin_korean */
@font-face {
font-family: 'Nanum Gothic';
font-style: normal;
font-weight: 700;
src: url('./images/nanum-gothic-v9-latin_korean-700.eot'); /* IE9 Compat Modes */
src: local('NanumGothic Bold'), local('NanumGothic-Bold'),
url('./images/nanum-gothic-v9-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./images/nanum-gothic-v9-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-700.woff') format('woff'), /* Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('./images/nanum-gothic-v9-latin_korean-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-800 - latin_korean */
@font-face {
font-family: 'Nanum Gothic';
font-style: normal;
font-weight: 800;
src: url('./images/nanum-gothic-v9-latin_korean-800.eot'); /* IE9 Compat Modes */
src: local('NanumGothic ExtraBold'), local('NanumGothic-ExtraBold'),
url('./images/nanum-gothic-v9-latin_korean-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('./images/nanum-gothic-v9-latin_korean-800.woff2') format('woff2'), /* Super Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-800.woff') format('woff'), /* Modern Browsers */
url('./images/nanum-gothic-v9-latin_korean-800.ttf') format('truetype'), /* Safari, Android, iOS */
url('./images/nanum-gothic-v9-latin_korean-800.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
실제로 복사하고 저장할 때는 인코딩을 ANSI로 저장합니다.
스킨 편집 / CSS에서 표시된 곳이 폰트 이름을 넣는 곳입니다.
여기에 'Nanum Gothic'이라는 이름으로 넣습니다. 이 이름은 사이트에서 css코드를 가져올 때 font-family: 'Nanum Gothic'; 이라고 정의가 되어있습니다. 그 이름 그대로 넣어야 합니다.
이번에는 HTML에서 설정을 마무리합니다. 기존에 적용되어 있어 코드를 <!-- --> 입력하여 비 활성화하고 그 아래 기존 코드에서 이름만 Nanum_Gothic.css 로 변경합니다.
이 이름은 업로드할 때 만들어진 Nanum_Gothic.css파일 이름입니다.
두 가지로 정의하는 이유는 익스플로러와 그 외의 브라우저에서도 보이기 위해서입니다.
결과를 보겠습니다.
앞서도 설명했지만 스킨이 기존 폰트와 어울려 있어 크게 다르게 보이지 않을 수도 있습니다. 지금 사용하는 스킨에서 폰트가 어울리지 않으면 천천히 해보시면 충분히 할 수 있을 겁니다.