CSS font-family 글꼴 변경

홈페이지나 티스토리같은 HTML이 수정 가능한 오픈형 플랫폼에서는 텍스트 폰트 수정이 가능합니다. 글꼴 변경은 CSS에서 간단하게 제어할 수 있는데 font-family라는 옵션을 사용하여 원하는 글꼴을 적용시킬 수 있습니다. font-family에는 다음의 속성이 적용됩니다.

 

속성

1. font-family : 폰트명

2. font-family : initial

3. font-family : inherit

 

1번은 가장 기본 형태로 원하는 글꼴명을 입력하는 것입니다. 글꼴명에 띄어쓰기가 있는 경우에는 따옴표를 사용하여 하나로 묶어줍니다. 큰 따옴표든 작은 따옴표든 상관 없습니다. 예를 들어서 noto sans kr 이라는 폰트를 적용시키고자 한다면 "noto sans kr" 이라고 입력하면 됩니다. 만약 햇갈린다면 그냥 모든 폰트에 따옴표를 적용시켜도 상관 없습니다.

 

2번은 기본값이라는 뜻입니다. 글꼴의 Default 값을 적용해 출력합니다.

 

3번은 부모 요소의 속성값을 그대로 이어받아 적용시킨다는 뜻입니다. 만약 부모 요소의 글꼴이 고딕체라면 inherit을 적용시킨 요소에도 똑같이 고딕체가 적용된다는 뜻입니다.

 

serif 그리고 sans-serif

웹페이지의 font-family를 유심히 살펴보면 끝 부분에 글꼴명 외에 sans 또는 sans-serif라는 추가 옵션이 마크업 되어있는 경우를 많이 목격하셨을 겁니다. 이 부분은 이미 한 차례 다뤘습니다. 아래의 글을 참고하시면 될 것 같습니다.

 

Serif 그리고 Sans-serif 차이점은 명조 VS 고딕

Serif 그리고 Sans-serif 차이점은 명조 VS 고딕

사실 없어도 되지만 웹페이지의 가독성 및 접근성을 위해서 해두시는게 좋습니다.

 

속성2 : 여러개의 글꼴 마크업

첫번째 내용에서 font-family에 대해 배웠습니다. 다음의 경우를 살펴보겠습니다.

 

font-family : Nanumgothic, "바탕체", sans-serif;

 

이렇게 세 개의 글꼴을 정의하게 되는 경우가 있습니다. 이런 경우는 글꼴에 오류가 생겨서 정상적으로 폰트가 동작하지 않을때를 대비한 일종의 배려 차원에서 여러개의 글꼴을 입력해둔 상황입니다. 첫번째인 Nanumgothic (나눔고딕) 폰트가 로드되지 않는 경우, 그 다음 글꼴인 바탕체를 로드한다는 뜻입니다. 만약 바탕체마저 오류로 인해 로드되지 않는다면 마지막으로는 웹폰트의 가장 기본인 sans-serif 폰트를 사용한다는 의미입니다.

 

글꼴 로드 방식

기본 글꼴을 제외한 별도의 폰트를 이용하고자 할 때 통상적으로 아래의 두 가지 방법을 가장 많이 사용합니다.

 

1. 서버에 직접 글꼴 파일을 올려 로드하는 방식

2. 웹 폰트를 로드하는 방식

 

각각 장단점이 있습니다. 먼저 1번의 경우는 2번 대비 로딩이 빠른 편입니다. 하지만 글꼴 파일까지 관리를 해줘야하는 단점이 있습니다. 2번은 1번의 반대라고 생각하시면 됩니다. 폰트 플랫폼에서 제시하는 방법을 사용하면 편리하게 원하는 글꼴을 로드해 사용할 수 있는 장점이 있는 반면 단점은 1번 대비 로딩 시간이 약간 더 소요가 될 수 있다는 점입니다. 대표적으로 구글 폰트가 그것인데 현재 많은 웹페이지에서 구글 폰트를 사용하고 있습니다. 그렇다고 엄청 느리거나 하지는 않습니다. 다만 접속중인 디바이스의 사양에 따라서 글꼴 로딩 처리가 늦어질 수 있습니다.

 

CSS font-family @font-face 폰트 글꼴 글씨체 불러오기 및 사용 방법

CSS font-family @font-face 폰트 글꼴 글씨체 불러오기 및 사용 방법

이게 1번의 글꼴 로드 방법입니다. 궁금하시면 한번 살펴보시기 바랍니다.

 

구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방법

구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방법

이건 2번 방식이고요. 끝.