[CSS] @font-face 디자인에 맞춘, 맞춤형 폰트 적용 방법

웹사이트에 맞춤형 폰트를 적용하는 방법에 대해서 알아보겠습니다.

@font-face 란?

@font-face는 CSS 규칙으로, 외부 폰트를 불러와 웹페이지에서 사용할 수 있게 해 줍니다. 이를 통해 디자이너와 개발자는 웹브라우저에 기본으로 설치된 폰트 외에도 다양한 폰트를 활용할 수 있습니다.

 

- font-family : 폰트의 이름을 정의

- src : 폰트 파일의 경로를 지정

- font-weight, font-style : 굵기와 스타일 설정

다양한 폰트 파일 형식

웹에서 사용되는 주요 폰트 파일 형식은 다음과 같습니다.

 

- TTF (TrueType Font): 가장 일반적인 폰트 형식으로, 대부분의 운영 체제에서 지원됩니다.

- OTF (OpenType Font): TTF와 유사하지만, 더 많은 타이포그래피 기능을 제공합니다.

- WOFF (Web Open Font Format): 웹에서 사용하기 위해 최적화된 폰트 형식입니다.

- WOFF2: WOFF의 개선된 버전으로, 더 작은 파일 크기를 제공합니다.

- EOT (Embedded OpenType): 주로 Internet Explorer에서 사용됩니다.

 

@font-face 사용 예제

먼저, 원하는 폰트 파일의 경로도 맞춰줍니다.

'CustomFontName'이라는 이름의 폰트를 지정하고, 이를 기본 폰트로 사용하도록 설정했습니다. 폴백(fallback)으로 Arial과 sans-serif를 지정해 브라우저가 CustomFontName 폰트를 불러오지 못할 때, 기본 시스템 폰트를 사용하도록 했습니다.

 

폴백 폰트를 지정하는 것은 브라우저 호환성과 사용자 경험을 고려한 것으로 설정해 주시면 좋습니다.

@font-face {
    font-family: 'CustomFontName';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFontName', Arial, sans-serif;
}

 

폴백(fallback) 폰트 추천

아래의 폰트들은 대부분의 브라우저와 운영 체제에 널리 지원되며, 각 스타일에 맞는 폴백을 제공합니다. 고딕체와 궁서체 폰트를 적절히 조합하여 사용하면, 웹페이지가 더 일관된 느낌을 줄 수 있습니다.

고딕체(sans-serif) 폰트

획의 끝에 장식이 없는 글꼴 스타일을 의미합니다. 모던하고 현대적인 느낌을 주고 가독성이 좋아 본문 텍스트에 많이 사용됩니다.

body {
    font-family: 'CustomFontName', Arial, Helvetica, Verdana, Tahoma, sans-serif;
}

 

궁서체(serif) 폰트

획의 끝에 장식이 있는 글꼴 스타일을 의미합니다. 전통적이고 고전적인 느낌을 주고 제목 텍스트에 많이 사용됩니다.

body {
    font-family: 'CustomFontName', 'Times New Roman', Georgia, Garamond, Palatino, serif;
}

@font-face 최적화 방법

서브셋팅을 통해 필요한 문자만 포함한 경량화된 폰트 파일을 사용하는 것이 좋습니다. 이는 웹사이트 성능 최적화의 중요한 전략 중 하나입니다. 경량화된 폰트 파일은 빠르게 다운로드되어 초기 로딩 속도를 개선하며, 데이터 전송 비용을 절감하는 데 도움이 됩니다. 따라서 서브셋팅을 통해 사용자 경험을 향상하고 웹사이트 성능을 최적화할 수 있습니다.

 

 

 

@font-face는 웹사이트에 개성 있는 폰트를 적용할 수 있는 강력한 문법입니다. 올바르게 사용하면 웹사이트의 디자인을 한 단계 발전시킬 수 있습니다. 이번 포스팅을 통해 @font-face의 기본 개념과 활용법을 이해하고, 웹사이트에 맞춤형 폰트를 적용하는 데 도움이 되시길 바랍니다.

 

 

[Utility] 이미지 추출 기준이란? (feat. Figma를 활용한 이미지 추출 방법)

 

[Git] Git 리베이스: 작업 브랜치의 변경 사항을 최신 상태로 유지하는 방법

 

[AI] 1분이면 가능! Gamma로 빠르고 멋진 PPT와 웹사이트 제작하기

 

[macOS] macOS에서 다양한 문자 입력하기: 이모티콘, 특수문자, 한자

 

[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자