웹폰트란 웹사이트에서 사용하는 폰트를 말합니다. 웹폰트는 웹사이트의 디자인과 가독성에 큰 영향을 미치기 때문에 중요한 요소입니다. 웹폰트를 사용하면 웹사이트의 특성과 목적에 맞는 폰트를 선택하고 적용할 수 있습니다.
웹폰트의 종류
웹폰트는 크게 두 가지 종류로 나눌 수 있습니다. 첫 번째는 시스템 폰트입니다. 시스템 폰트란 사용자의 컴퓨터나 스마트폰에 설치된 폰트를 말합니다. 시스템 폰트는 웹사이트에서 바로 불러와서 사용할 수 있기 때문에 로딩 속도가 빠르고, 호환성이 좋습니다. 하지만 시스템 폰트는 사용자의 기기에 따라 다르게 보일 수 있고, 원하는 폰트가 없을 수도 있습니다.
두 번째는 외부 폰트입니다. 외부 폰트란 웹사이트에서 제공하는 폰트 파일을 말합니다. 외부 폰트는 웹사이트에서 다운로드하거나 CDN 서비스를 통해 불러와서 사용할 수 있습니다. 외부 폰트는 원하는 폰트를 자유롭게 사용할 수 있고, 모든 기기에서 동일하게 보입니다. 하지만 외부 폰트는 파일 크기가 크기 때문에 로딩 속도가 느리고, 라이선스 문제가 있을 수도 있습니다.
웹폰트의 장단점
웹폰트는 웹사이트의 디자인과 가독성을 향상할 수 있는 장점이 있습니다. 웹폰트를 사용하면 웹사이트의 특성과 목적에 맞는 폰트를 선택하고 적용할 수 있습니다. 예를 들어, 정보 전달을 위한 웹사이트라면 심플하고 깔끔한 폰트를, 감성적인 웹사이트라면 독특하고 예쁜 폰트를 사용할 수 있습니다. 또한, 웹폰트를 사용하면 모든 기기에서 동일한 폰트로 보여줄 수 있어서 일관성을 유지할 수 있습니다.
웹폰트는 로딩 속도와 라이선스 문제 등의 단점이 있습니다. 웹폰트는 파일 크기가 크기 때문에 로딩 속도가 느릴 수 있습니다. 로딩 속도가 느리면 사용자의 경험을 저해할 수 있으므로, 필요한 폰트만 선택하고 최적화하는 것이 중요합니다. 또한, 웹폰트는 저작권이 있는 경우가 많으므로, 라이선스를 확인하고 적절하게 사용하는 것이 필요합니다.
웹폰트의 사용 방법
웹폰트를 사용하면 방문자의 컴퓨터에 폰트가 설치되어 있지 않아도 원하는 폰트로 화면을 표시할 수 있습니다. 웹폰트는 CSS의 @font-face 규칙을 사용하여 적용할 수 있습니다.
웹폰트를 적용하기 위해서는 다음과 같은 순서로 진행합니다.
- 웹폰트 파일을 준비합니다. 웹폰트 파일은 다양한 형식이 있지만, 가장 널리 지원되는 형식은 WOFF와 WOFF2입니다. WOFF2는 WOFF보다 압축률이 높아 용량이 적고, 성능이 좋습니다. 하지만 IE와 구형 안드로이드 브라우저에서는 지원되지 않으므로, WOFF와 함께 사용하는 것이 좋습니다. 또한 IE8 이하에서는 EOT 형식을 사용해야 합니다.
- 웹폰트 파일을 서버에 업로드합니다. 웹폰트 파일은 웹 사이트와 동일한 도메인에 위치해야 합니다. 만약 다른 도메인에서 웹폰트 파일을 불러오려면, CORS(Cross-Origin Resource Sharing) 설정을 해야 합니다.
- CSS에 @font-face 규칙을 작성합니다. @font-face 규칙에는 다음과 같은 속성들이 있습니다.
- font-family: 웹폰트의 이름을 지정합니다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 되며, CSS에서 사용할 때 이 이름을 참조합니다.
- src: 웹폰트 파일의 경로와 형식을 지정합니다. url() 함수에 폰트 파일의 URL을 작성하고, format() 함수에 폰트 파일의 형식을 작성합니다. 여러 개의 폰트 파일을 콤마로 구분하여 작성할 수 있으며, 브라우저는 지원 가능한 첫 번째 폰트 파일을 다운로드합니다.
- font-weight: 웹폰트의 굵기를 지정합니다. normal, bold, bolder, lighter 또는 숫자 값(100~900)을 사용할 수 있습니다.
- font-style: 웹폰트의 스타일을 지정합니다. normal, italic, oblique를 사용할 수 있습니다.
- unicode-range: 웹폰트가 적용될 유니코드 범위를 지정합니다. 이 속성을 사용하면 필요한 글자만 웹폰트로 표시할 수 있어 성능을 향상시킬 수 있습니다.
예를 들어, 나눔스퀘어 폰트를 웹폰트로 사용하려면 다음과 같이 작성할 수 있습니다.
@font-face {
font-family: 'NanumSquare';
src: url('NanumSquareR.eot'); /* IE8 이하 */
src: url('NanumSquareR.eot?#iefix') format('embedded-opentype'), /* IE9 이상 */
url('NanumSquareR.woff2') format('woff2'), /* 최신 브라우저 */
url('NanumSquareR.woff') format('woff'), /* 구형 브라우저 */
url('NanumSquareR.ttf') format('truetype')
}