[개발 블로그/CSS] 티스토리 스킨 편집 - 폰트 전체 적용

현재 내 블로그는 pc버전 기준으로 

코드 블록을 제외한 모든 영역에

학교안심 그림일기체가 적용되어있다

 

해당 폰트가 아니더라도 

원하는 폰트를 전체에 적용하는 방법을 소개하려고 한다

 

단계별로 코드의 의미를 소개할 예정이지만

급하다면 최종으로 바로 이동해도 좋다

 

1. 폰트 정의

/* 폰트 정의 */
@font-face {
    font-family: 'HakgyoansimGeurimilgiTTF-R';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimGeurimilgiTTF-R.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GowunDodum-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face 영역을 이용해 사용자 정의 폰트를 선언한다.

 

font-family 에 작성한 문자열이 폰트의 이름이 되고

src로 폰트 파일의 위치를 지정해주는데 웹페이지에서 가져오는 것이 제일 편하다.

 

가져올 폰트의 url을 괄호 안에 담아주고

폰트 파일 형식을 format 괄호 안에 담는다

 

예시에 포함된 woff2 형식은 웹에서 주로 사용하는 압축 폰트 형식이다

 

font-weight 속성으로 폰트의 굵기를 지정하는데

normal 이외에 bold, lighter, bolder도 있고 다른 숫자로 지정할 수도 있다. 

숫자를 지정할 때 normal이 400, bold가 700임을 참고하면 좋다. 

 

font-style 속성으로 텍스트 모양을 결정할 수 있는데

normal 이외에 italic, oblique 등이 있다. 

oblique도 italic처럼 기울임꼴이지만 기울기를 NNdeg 형태로 지정할 수도 있다. 

 

 

나는 변경하고 싶을 때 폰트 적용 영역에서 폰트 종류만 변경할 수 있게 하려고 font family를 여러 개 선언해두었다. 

 

2. 폰트 적용 영역 지정

/* 페이지 전체 텍스트에 HakgyoansimGeurimilgiTTF-R 폰트 적용 */
body, body * {
    font-family: 'HakgyoansimGeurimilgiTTF-R', sans-serif !important;
}

 

웹 페이지 전체 컨텐츠가 들어있는 body 영역과 

body 영역 내부 모든 요소에 폰트를 지정하되

동일한 폰트를 사용하기 위해 하나의 블록에서 처리하도록 했다. 

 

font family 속성으로 종류를 지정해주고 

sans-serif는 'HakgyoansimGeurimilgiTTF-R' 폰트를 사용할 수 없을 때

폴백(fallback) 폰트로 사용하기 위해 

원하는 폰트 다음 차례에 콤마와 함께 작성해주었다. 

 

!import는 스타일 규칙의 우선 순위를 높여주기 위해 추가했고

다른 css 파일이나 브라우저 기본 스타일이 우선 적용되는 경우에는 

해당 폰트 적용이 원활하게 되지 않는 경우가 많아서 추가했다. 

 

티스토리는 기본 폰트 스타일을 재정의하기 어려운 상황이라 

강제로 원하는 폰트가 사이트 전체에 적용되도록 작성한 것이다. 

 

3. 폰트 적용 영역 예외 처리

/* 코드 블록에 기본 폰트 유지 */
pre, code {
    font-family: monospace !important;
}

코드 블록에 적용되는 폰트는 원래대로 유지하기 위해 

코드 블록에 사용하는 폰트 종류인 고정폭 폰트를 다시 지정해주고

해당 규칙도 강제로 적용될 수 있게 했다. 

 

pre는 사전 포맷 (코드블록이나 테이블 같은 요소)을, 

code는 코드나 키보드 입력, 명령어 같은 텍스트를 이야기하므로

 

코드나 고정된 형식의 텍스트에는 고정폭 폰트를 적용할 수 있게 규칙을 선언했다. 

 

4. 최종

/* 폰트 정의 */
@font-face {
    font-family: 'HakgyoansimGeurimilgiTTF-R';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimGeurimilgiTTF-R.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GowunDodum-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 페이지 전체 텍스트에 폰트 적용 */
body, body * {
    font-family: 'HakgyoansimGeurimilgiTTF-R', sans-serif !important;
}

/* 코드 블록 폰트는 그대로 유지 */
pre, code {
    font-family: monospace !important;
}