반응형
Wanted Sans는 Wanted Dev에서 설계한 모던하고 다재다능한 서체입니다. 이 폰트는 명확하고 가독성이 뛰어나며, 디지털 인터페이스부터 인쇄 디자인에 이르기까지 다양한 용도로 사용하기에 적합합니다. 깨끗한 선과 기하학적인 형태가 특징인 이 폰트는 현대적인 느낌을 필요로 하는 프로젝트에 이상적인 선택입니다.
Wanted Sans의 주요 특징:
- 모던한 디자인: Wanted Sans는 헤드라인과 본문에 모두 적합한 깨끗하고 미니멀한 디자인이 특징입니다.
- 다양한 용도: 웹 디자인, 브랜딩, 인쇄 등 다양한 용도에 적합합니다.
- 오픈 소스: 이 폰트는 오픈 소스로 제공되어 개발자와 디자이너가 자유롭게 사용하고 커스터마이징할 수 있습니다.
Wanted Sans를 웹폰트로 사용하는 방법
Wanted Sans를 웹폰트로 사용하려면 다음 단계를 따르세요:
1. 폰트 파일 다운로드
먼저 GitHub 저장소에서 폰트 파일을 다운로드합니다. 웹 사용에 적합한 .ttf
또는 .woff
형식의 다양한 폰트 웨이트와 스타일을 찾을 수 있습니다.
2. 로컬에 폰트 호스팅
다운로드한 폰트 파일을 프로젝트 내의 디렉토리에 배치해 로컬에서 호스팅합니다. 예를 들어, fonts/
라는 디렉토리에 폰트 파일을 저장합니다.
3. CSS에 폰트 포함
웹 프로젝트에서 폰트를 사용하려면 CSS 파일에 @font-face
규칙을 사용해 선언해야 합니다. 아래는 폰트를 포함하는 예시입니다:
@font-face {
font-family: 'Wanted Sans';
src: url('/fonts/wanted-sans-regular.woff2') format('woff2'),
url('/fonts/wanted-sans-regular.woff') format('woff'),
url('/fonts/wanted-sans-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Wanted Sans';
src: url('/fonts/wanted-sans-bold.woff2') format('woff2'),
url('/fonts/wanted-sans-bold.woff') format('woff'),
url('/fonts/wanted-sans-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
/* 이탤릭 스타일 예시 */
@font-face {
font-family: 'Wanted Sans';
src: url('/fonts/wanted-sans-italic.woff2') format('woff2'),
url('/fonts/wanted-sans-italic.woff') format('woff'),
url('/fonts/wanted-sans-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
4. 요소에 폰트 적용
@font-face
를 사용해 폰트를 정의한 후, font-family
속성을 사용해 HTML 요소에 폰트를 적용할 수 있습니다:
body {
font-family: 'Wanted Sans', sans-serif;
}
h1, h2, h3 {
font-family: 'Wanted Sans', sans-serif;
font-weight: bold;
}
p {
font-family: 'Wanted Sans', sans-serif;
font-weight: normal;
}
5. Google Fonts 대안 사용
폰트를 직접 호스팅하는 것을 피하고 싶다면, Google Fonts와 같은 웹 폰트 서비스를 사용하는 것도 고려할 수 있습니다. 폰트를 계정에 업로드한 후, @font-face
링크를 생성해 HTML에서 직접 사용할 수 있습니다.
Wanted Sans 사용의 장점:
- 커스터마이징: Wanted Sans는 오픈 소스이기 때문에, 특정 필요에 맞게 폰트를 수정할 수 있습니다.
- 라이선스 비용 없음: 오픈 소스 프로젝트로서, 개인 및 상업적 프로젝트에 라이선스 비용 없이 사용할 수 있습니다.
- 넓은 브라우저 지원:
@font-face
규칙은 Chrome, Firefox, Safari, Edge 등 최신 브라우저에서 폰트가 작동하도록 보장합니다.
이 단계를 따르면 Wanted Sans를 웹 프로젝트에 쉽게 통합할 수 있으며, 사이트에 모던하고 깔끔한 타이포그래피 스타일을 제공할 수 있습니다.
반응형