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

HTML에서 글꼴을 스크립트 혹은 링크로 로드하는 방법이 있듯 CSS에서도 @font-face를 사용해 원하는 폰트(글꼴) 파일을 불러와 적용하는 방법에 대해 알아보겠습니다. 방법은 너무나도 간단하고 쉽습니다. 먼저 사용하고자 하는 글꼴 폰트 파일을 준비합니다. 그전에 웹에서 사용 가능하고 여러 브라우저에서 지원이 가능한 폰트 확장자에 대해 알아볼 필요가 있습니다.

웹용 폰트 확장자

다음의 확장자들이 있습니다. 보시죠.

	Internet Explorer	Chrome	Safari	Opera	FireFox
TTF/OTF	IE9 이상	O	O	O	O
SVG	IE9 이상	O	O	O	X
EOT	IE6 이상	X	X	X	X
WOFF	X	O	O	O	O
WOFF2	O	O	O	O	O

현재 인터넷 익스플로러(Internet Explorer)는 단종이 되었기 때문에 사실상 현존하는 대부분의 브라우저에서는 위의 확장자명을 가진 폰트들을 전부 지원한다고 볼 수 있겠습니다. EOT만 빼구요. EOT는 (Embedded Open Type)의 약자로 내장된 글꼴이라는 뜻입니다. 이 확장자는 과거의 유물입니다. 따라서 요즘 사용중인 대다수의 브라우저에 맞추려면 압축율이 가장 뛰어난 WOFF2 포맷으로 글꼴을 변환하여 사용하는것이 가장 좋습니다. 물론 WOFF도 대다수 브라우저에서 지원하므로 해당 확장자를 사용해도 상관 없습니다. 친효스킨도 WOFF로 변환해 글꼴을 사용 중입니다.

@font-face

이제 CSS에서 폰트를 로드하는 방법을 알아봅니다. 먼저 WOFF 확장자의 글꼴을 하나 준비해 주세요. 혹시 글꼴 변환에 대해 궁금하시면 아래의 글을 참고하시기 바랍니다.

TTF 폰트를 WOFF 포맷으로 변환하는 사이트 Convertio (컨버티오)

폰트 변환이 모두 이루어졌다면 파일을 서버에 업로드합니다. 티스토리의 경우 첨부파일에 올려두면 됩니다. 이제 아래의 방법대로 글꼴을 로드합니다.

@font-face {
    font-family: "IropkeBatang";
    font-style: normal;
    font-weight: 400;
    src: url('이미지경로/IropkeBatangM.woff') format('woff');
}

친효스킨의 경우 본문에서는 「이롭게 바탕체」를 사용하고 있습니다. @font-face 안쪽에 font-family, font-style, font-weight, src등의 스타일 옵션들을 마크업 할 수 있습니다. 특히 마지막 src에서 url 안쪽에는 이롭게바탕체가 들어있는 경로를 정확하게 지정해줘야하며 format을 반드시 추가 입력해줘야 정상 작동합니다. 나머지 font-style이나 font-weight는 보통 @font-face를 같은 글꼴을 사용하되, 굵기라던지 살짝 기울기(italic) 등의 추가 글꼴을 로드해주고자 할 때 구분지어 사용할 수 있습니다.

@font-face {
    font-family: 'Nanum Gothic'; 
    font-style: normal;
    font-weight: 400;
    src: url(폰트경로/NanumGothic-Regular.woff2) format("woff2"), 
        url(폰트경로/NanumGothic-Regular.woff) format("woff"),
}

/* 두껍게 */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url(폰트경로/NanumGothic-Bold.woff2) format("woff2"),
        url(폰트경로/NanumGothic-Bold.woff) format("woff"), 
}

/* 두껍게2 */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 800;
    src: url(폰트경로/NanumGothic-ExtraBold.woff2) format("woff2"), 
        url(폰트경로/NanumGothic-ExtraBold.woff) format("woff"), 
}

/* 기울게 */
@font-face {
    font-family: 'Nanum Gothic';
    font-style: italic;
    font-weight: 400;
    src: url(폰트경로/NanumGothic-Regular-italic.woff2) format("woff2"), 
        url(폰트경로/NanumGothic-Regular-italic.woff) format("woff"), 
}

이런 경우입니다. 여기에서는 가장 압축률이 좋고 브라우저의 지원이 다양한 woff2 확장자 폰트를 먼저 로드해주고, 만약 woff2 폰트에 오류가 생기거나 기타 안드로이드 브라우저에서 지원하지 않는 경우 차선책인 다음 확장자인 woff를 로드해 줍니다. 그래서 woff2를 먼저 입력해 준 것입니다. TTF나 OTF는 윈도우에서 사용하는 글꼴이기에 파일 용량이 큽니다. 따라서 woff 폰트로 변환 후 글꼴을 로드하는것이 브라우저의 속도를 조금이라도 빨리 로딩하는 방법이라고 할 수 있겠습니다.

font-family

위에서 언급했던 font-family에 대해 좀 더 자세히 알아보겠습니다. 기본 형태는 다음과 같습니다.

font-family: "IropkeBatang", sans-serif;

가장 먼저 사용하고자 하는 글꼴명을 입력합니다. 글꼴명을 입력할때는 한국어 입력도 가능하지만 기왕이면 폰트 파일명을 영어로, 마찬가지로 font-family에서도 영어로 지정해주는것이 좋습니다. 폰트명에는 작은 따옴표 또는 큰 따옴표를 사용합니다. 그리고 폰트명마다 쉼표(,)를 사용해 구분지어 줍니다. 그런데 마지막의 sans-serif는 무엇일까요? 한국식으로 바꿔 불러보자면 고딕 글꼴에 해당합니다. 기본 폰트죠. 이것에 대해 더 자세히 알고싶으시면 아래의 글을 참고하시면 도움이 될 것입니다.

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

font-family에서는 여러개의 글꼴을 추가 입력이 가능합니다. 아래처럼요.

font-family: "IropkeBatang", "NanumGothic", "Batang", "Gothic", sans-serif, serif;

여러개의 글꼴을 입력의 장점은 처음 글꼴을 로드하지 못했을 때 다음의 글꼴로 대처가 가능하다는 부분입니다. 하지만 이만큼의 글꼴을 필요로하는 경우는 거의 없기에 보통 사용하고자 하는 글꼴 하나를 로드하고 오류로 인해 로드하지 못했다면 모든 브라우저의 기본 글꼴인 sans-serif나 serif를 로드하도록 하는 것입니다. 끝.