웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
무료 또는 유료 폰트를 자신의 홈페이지, 웹사이트에 적용하는 방법을 알아보려고 합니다. 어떻게 해야할까요?
우선 CSS를 사용하여 폰트를 바꾸는 것이 가능합니다. 아래는 폰트를 다른 것으로 바꾼는 방법에 대하여 자세히 알아봅니다. 일반적으로 브라우저에서 사용하는 기본 폰트는 다를 수 있어 폰트 설정이 필요합니다.
# CSS를 사용하여 웹폰트를 변경하기
아래 예제를 봐주세요 만약 webisfree라는 폰트가 있는경우 아래처럼 @font-face에 사용할 폰트를 적용하는 코드입니다. 다음으로 body에 해당 폰트를 적용합니다.
@ src 설정시 format 타입 설정하기
폰트는 여러가지 확장자를 가지는데 대표적으로 otf, ttf가 많이 사용됩니다. 이처럼 다른 타입의 폰트 사용시 폰트 타입을 지정할 수 있습니다. 다만 폰트 타입을 지정하지 않아도 폰트는 출력될 수 있으니 참고하세요.
아래처럼 해당 폰트의 위치를 src에 지정할 때 url과 함께 여러 포맷 타입 중에서 값을 설정할 수 있습니다.
폰트타입은 여러가지가 있는데 아래와 같은 타입으로 설정할수 있습니다. 호환성은 아래를 참고하세요.
format('truetype') // TrueType 폰트
format('opentype') // OpenType 폰트
format('woff') // woff 폰트
format('woff2') // woff2 폰트
format('svg') // SVG 폰트
또한 내부에 공통 스타일, 볼드체 등을 적용할 수 있으며 @font-face {} 내부에 함께 선언하여 사용합니다. 예를들어 bold를 사용하는 경우...
이제 로컬된 설치된 폰트 webisfree를 먼저 찾고 없는 경우에 다음 경로 /fonts/ 내부의 webisfree.ttf를 찾습니다. 이처럼 로컬을 설정해두면 로딩이 빠르다는 점과 트래픽을 줄이는 장점을 갖습니다.
! 호환성 확인하기. 적용 가능한 브라우저별 폰트 타입(확장자)
각각의 폰트들은 폰트타입(확장자)에 따라서 지원 가능한 환경, 브라우저가 다를 수 있습니다. 즉 각각의 환경에 맞는 폰트 타입을 사용하는 것이 좋습니다. 가장 좋은 폰트 선택은 여러가지 폰트를 동시 지정하거나 가장 많이 쓰이는 폰트를 설정하는 것이 좋겠죠. 그럼 아래의 정보를 참고하시기 바랍니다.
! 무료 폰트 구하기 요즘은 무료 폰트를 매우 쉽게 구할 수 있습니다. 특히 성장하는 스타트업이나 중견 이상의 회사에서 홍보 등을 목적으로 제작된 폰트를 무료로 공개하는 경우가 많으며 구글에서도 역시 무료로 제공하는 폰트가 있습니다. 폰트를 적용하는 것만으로도 여러 브라우저의 폰트에 일관성을 줄 수 있어 동일한 UI를 제공하는데 좋습니다.
웹폰트를 변경하면 화면 전체에 반영되므로 매우 중요하죠. 가독성을 높여주고 시각적으로 미적 아름다움도 큽니다. 아무래도 이쁘고 눈에 띄는 폰트를 사용하는 것도 상대적으로 효과적입니다. 폰트 변경은 꼭 고려해볼 수 있는 사항입니다.
우선 CSS를 사용하여 폰트를 바꾸는 것이 가능합니다. 아래는 폰트를 다른 것으로 바꾼는 방법에 대하여 자세히 알아봅니다. 일반적으로 브라우저에서 사용하는 기본 폰트는 다를 수 있어 폰트 설정이 필요합니다.
# CSS를 사용하여 웹폰트를 변경하기
아래 예제를 봐주세요 만약 webisfree라는 폰트가 있는경우 아래처럼 @font-face에 사용할 폰트를 적용하는 코드입니다. 다음으로 body에 해당 폰트를 적용합니다.@font-face {
font-family: webisfree;
src: url('./static/fonts/webisfree.ttf');
}
body {
font-family: webisfree;
}
위 예제는 webisfree라는 이름으로 폰트를 등록하였습니다. 폰트 설정시 이처럼 @font-face에 여러 값을 설정할 수 있습니다. 위 예제는 폰트의 이름과 폰트가 위치한 서버의 경로를 설정하였습니다.font-family: webisfree;
src: url('./static/fonts/webisfree.ttf');
}
body {
font-family: webisfree;
}
@ src 설정시 format 타입 설정하기
폰트는 여러가지 확장자를 가지는데 대표적으로 otf, ttf가 많이 사용됩니다. 이처럼 다른 타입의 폰트 사용시 폰트 타입을 지정할 수 있습니다. 다만 폰트 타입을 지정하지 않아도 폰트는 출력될 수 있으니 참고하세요.
아래처럼 해당 폰트의 위치를 src에 지정할 때 url과 함께 여러 포맷 타입 중에서 값을 설정할 수 있습니다.
@font-face {
src: url('/fonts/webisfree.ttf') format('truetype');
}
src: url('/fonts/webisfree.ttf') format('truetype');
}
폰트타입은 여러가지가 있는데 아래와 같은 타입으로 설정할수 있습니다. 호환성은 아래를 참고하세요.
format('truetype') // TrueType 폰트
format('opentype') // OpenType 폰트
format('woff') // woff 폰트
format('woff2') // woff2 폰트
format('svg') // SVG 폰트
또한 내부에 공통 스타일, 볼드체 등을 적용할 수 있으며 @font-face {} 내부에 함께 선언하여 사용합니다. 예를들어 bold를 사용하는 경우...
@font-face {
src: url('/fonts/webisfree.ttf') format('truetype');
font-weight: bold;
}
src: url('/fonts/webisfree.ttf') format('truetype');
font-weight: bold;
}
! 로컬, 운영체제에 설치된 폰트를 우선 적용하는 방법
커스첨으로 폰트 적용시 서버에 폰트를 설치하는 방법 외에 사용중인 OS, 즉 운영체제에 동일한 폰트를 가지는 경우 이를 먼저 적용하는 것이 가능합니다. 이 경우 아래와 같이 사용합니다. 만약 webisfree 폰트가 로컬에 있는 경우를 생각하면 다음과 같습니다.@font-face {
font-family: webisfree;
src: {
local('webisfree'),
url('/fonts/webisfree.ttf');
}
}
font-family: webisfree;
src: {
local('webisfree'),
url('/fonts/webisfree.ttf');
}
}
이제 로컬된 설치된 폰트 webisfree를 먼저 찾고 없는 경우에 다음 경로 /fonts/ 내부의 webisfree.ttf를 찾습니다. 이처럼 로컬을 설정해두면 로딩이 빠르다는 점과 트래픽을 줄이는 장점을 갖습니다.
! 호환성 확인하기. 적용 가능한 브라우저별 폰트 타입(확장자)
각각의 폰트들은 폰트타입(확장자)에 따라서 지원 가능한 환경, 브라우저가 다를 수 있습니다. 즉 각각의 환경에 맞는 폰트 타입을 사용하는 것이 좋습니다. 가장 좋은 폰트 선택은 여러가지 폰트를 동시 지정하거나 가장 많이 쓰이는 폰트를 설정하는 것이 좋겠죠. 그럼 아래의 정보를 참고하시기 바랍니다.- url('webisfree.eot?#iefix') format('embedded-opentype') // IE 6 ~ IE 8 지원
- url('webisfree.eot') // eot, IE 9 적용 가능
- url('webisfree.woff2') // 최근 브라우저 지원
- url('webisfree.ttf') format('truetype') // 안드로이드, 사파리, iOS
- url('webisfree.otf') format('opentype') // 최신 브라우저에서 대부분 지원함
! 무료 폰트 구하기 요즘은 무료 폰트를 매우 쉽게 구할 수 있습니다. 특히 성장하는 스타트업이나 중견 이상의 회사에서 홍보 등을 목적으로 제작된 폰트를 무료로 공개하는 경우가 많으며 구글에서도 역시 무료로 제공하는 폰트가 있습니다. 폰트를 적용하는 것만으로도 여러 브라우저의 폰트에 일관성을 줄 수 있어 동일한 UI를 제공하는데 좋습니다.
웹폰트를 변경하면 화면 전체에 반영되므로 매우 중요하죠. 가독성을 높여주고 시각적으로 미적 아름다움도 큽니다. 아무래도 이쁘고 눈에 띄는 폰트를 사용하는 것도 상대적으로 효과적입니다. 폰트 변경은 꼭 고려해볼 수 있는 사항입니다.
아래의 글도 찾고 계시지 않나요?
