3.1 웹 폰트
웹 페이지에 폰트를 연결하는 것은 독창적이고 매력적인 디자인을 만드는 데 중요한 요소야. 웹 폰트를 사용하면 사용자의 컴퓨터에 설치되어 있지 않은 폰트를 서버에서 로드해서 사용할 수 있어. Google Fonts는 웹 폰트를 사용하는 데 가장 인기 있는 서비스 중 하나야. 웹 폰트랑 Google Fonts를 웹 페이지에 어떻게 연결하는지 자세히 알아보자.
웹 폰트는 사용자의 기기에 설치되어 있지 않더라도, 원격 서버에서 로드되어 웹 페이지에 표시되는 폰트를 말해. 덕분에 폰트를 선택하는 데 더 많은 유연성을 제공하고, 더 매력적인 디자인을 만들 수 있어.
웹 폰트 연결하기
@font-face를 이용한 웹 폰트 연결 예제:
먼저 폰트 파일을 서버에 업로드해야 돼. 일반적으로 .woff, .woff2, .ttf, .eot, .svg 형식의 파일들이야.
2단계. CSS에서 @font-face 사용하기:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
@font-face 사용의 장점:
- 제어: 폰트를 선택하고 사용하는 데 있어 전적인 제어
- 호환성: 다양한 브라우저와의 호환성을 보장할 수 있도록 여러 포맷을 지원함
- WOFF (Web Open Font Format): 웹 폰트를 위한 널리 사용되는 포맷
- WOFF2: 더 나은 압축을 제공하는 WOFF의 개선된 버전
- TTF (TrueType Font): 대부분의 브라우저에서 지원되는 표준 폰트 포맷
- EOT (Embedded OpenType): Internet Explorer에서 지원되는 포맷
- SVG: SVG 그래픽에서 폰트를 사용하기 위한 포맷
3.2 Google Fonts
Google Fonts는 무료 폰트 모음을 제공하고, 쉽게 웹사이트에 통합할 수 있어. Google Fonts를 사용하면 폰트를 쉽게 연결할 수 있고, 다양한 폰트를 사용할 수 있는 장점이 있어.
Google Fonts를 이용한 폰트 연결:
1. Google Fonts 사이트에서 폰트 선택하기:
Google Fonts로 이동해서 사용하고 싶은 폰트를 선택해.
2. 연결을 위한 링크 얻기:
선택한 폰트의 페이지에서 필요한 스타일과 두께를 선택해. 그러면 Google Fonts가 폰트 연결을 위한 링크를 생성해줄 거야.
3. 링크를 HTML 문서에 삽입하기:
생성된 링크를 HTML 문서의 <head> 섹션에 붙여넣어.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. CSS에서 폰트 적용하기:
페이지의 요소에 폰트를 적용하기 위해 font-family 속성을 사용해.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
HTML을 이용한 Google Fonts 사용 예제:
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>이 텍스트는 Roboto 폰트를 사용하여 표시됩니다.</p>
</body>
</html>
3.3 CSS @import 사용하기
Google 폰트를 @import 규칙을 사용하여 CSS에서도 연결할 수 있어.
@import를 이용한 Google Fonts 사용 예제:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Google Fonts 사용의 장점:
- 사용의 용이함: 한 줄의 코드로 폰트를 쉽게 통합할 수 있어
- 다양한 선택: 다양한 스타일과 종류의 많은 폰트를 이용할 수 있어
- 성능 최적화: Google의 고성능 서버에서 폰트를 로드해
display="swap" 속성은 Google Fonts 웹 폰트 로드 시 성능과 사용자 경험을 개선해. 웹 폰트를 연결할 때 브라우저는 먼저 폰트를 로드하고 표시해야 하며, 이는 인터넷이 느릴 때 지연을 발생시킬 수 있어. display="swap"는 이 문제를 해결하는데, 브라우저가 웹 폰트가 로드되는 동안 기본 시스템 폰트를 사용하도록 지시해. 웹 폰트가 로드되면, 브라우저가 시스템 폰트를 해당 웹 폰트로 교체할 거야.
성능에 미치는 영향:
웹 폰트를 사용할 때는 웹 페이지의 성능에 미치는 영향을 고려하는 게 중요해. 많은 양의 폰트나 스타일을 로드하면 페이지의 로드 시간이 증가할 수 있어. 이 영향을 최소화하기 위해 다음의 권장 사항을 따라:
- 필요한 스타일 최소화: 정말 필요한 스타일만 선택해 사용해
- 속성 사용
display="swap": 웹 폰트 로딩 동안 시스템 폰트를 표시해 사용자 경험을 향상해 - 폰트 전송 최적화: 캐싱 및 preload를 사용해 성능을 개선해
GO TO FULL VERSION