웹 폰트 죄거화하는 방법에 대해 알아보자.
먼저 로컬폰트와 웹폰트는 무엇일까 ?
ㅇ로컬 폰트란 ?
사용자의 컴퓨터에 이미 설치되어 있는 폰트이다. 운영체제에 의해 제공된다.
ㅇ웹 폰트란?
웹 폰트는 웹 페이지에서 사용되는 폰트를 온라인상에서 다운로드하여 쓸 수 있는 기술이다.
ㅡ장점
ㅡ 모든 사용자가 일관된 환경에서 일관된 디자인을 경험 할 수 있다.
ㅡ 웹 페이지에서 고유하면서도 다양한 폰트를 사용할 수 있게 되었다.
ㅡ 사용자가 미리 시스템을 설치하지 않아도 사용이 가능하다.
ㅇ단점
ㅡ 웹 페이이지의 성능을 낮춰서 사용자 경험을 해칠 수도 있다.
ㅇ 웹 폰트가 동작하는 방식
ㅡ 온라인상에서 폰트 파일을 다운로드해서 사용하게 된다.
ㅡ 페이지 접근 > 브라우저가 HTML을 요청> 웹 서버 or 다른 서버로 웹 폰트 요청 > 브라우저 렌더링 >브라우저가 텍스트를 채운다.
ㅇ 웹 폰트 최적화는 왜 필요한가 ?
ㅡ FOIT, FOUT 현상 발생으로 사용자 경험 저하와 개발자가 의도하지 않은 동작을 한다. 이를 방지하기 위해 웹폰트 최적화가 필요하다.
ㅡ FOIT ( Flash Of Invisible Text)
: 브라우저가 렌더링시에 폰트가 준비되지 않으면 사용자에게 일시적으로 글자가 보이지 않음
ㅡ FOUT(Flash of Unstyled Tex)
: 글자가 보이지만 기본 시스템 폰트로 표시되는 현상이다. 글자는 보이지만 의도한 디자인이 아니고,
기본 시스템 폰트에서 설정된 폰트로 재랜더링 될 때 글자가 꿈틀 거리는 현상이 있다.
>> 그러므로 웹폰트를 사용할 때는 최적화 작업 후에 load해준다.
< 최적화 방법 3가지 >
1) Font 파일의 크기를 줄인다.
ㅡ WOFF(Web Open Font Format) 을 이용한다.
: css에서 font-face로 폰트를 저으이해서 사용하면 된다 . src에 format("WOFF")로 어떤 형식을 사용할 것인지 명시하면 됨
ㅡ WOFF2 : WOFF를 개선했지만 비교적 낮은 호환성을 가지고 있다. WOFF를 폴백(fallback)폰트로 같이 사용한다.
2) 서브셋을 사용해서 최적화한다.
ㅡ 웹 폰트 파일에서 필요한 문자 집합만을 선택해서 추출한 폰트 파일이다.
ㅡopentype.jp의 서브셋 메이커 사용한다. ( 만들어 낸 서브셋 폰트를 WOFF로 변환시에는 WOFF컨버터 설치 필요)
: 서비셋 폰트는 특정 부분에 사용되는 폰트파일의 용량을 낮추고, 폰트파일 로딩시간을 개선할 수 있다.
3) Preload 사용하기
ㅡ Font파일을 사전에 다운로드 할 수 있다. 실제로 폰트가 필요한 시점에서 폰트 로딩 지연을 최소화해준다.
ㅡ preload남용은 렌더링 시간을 지연시킬 수 있기 때문에 개발자의 의도에 따라 우선순위가 높은 요소를 선별해야함
< Font Preload 이란 ? >
ㅡ 사용자 지정 폰트를 사용하는 웹 페이지의 성능과 로딩 시간을 개선하는 기술이다.
ㅡ 브라우저는 해당 폰트를 먼저 다운로드 해야 한다.
ㅡ Font Preloading을 사용하면 특정 폰트가 우선적으로 로드되도록 브라우저에게 알려줌으로써 텍스트 렌더링 지연을 줄임
ㅇ 적용방법 : link요소로 preload를 추가하고, css스타일로 정의한다.
1) HTML : <head>섹션에 <link>요소를 사용하고 rel속성을 preload로 as속성을 font로 지정한다.
<link rel="preload" href="/fonts/testfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">위에서 실제 폰트파일의 경로로 대체해야함.type속성은 폰트파일 형식(WOFF2형식을 사용했음)
crossorigin속성은 선택적이다. 폰트파일이 다른 도메인에 호스팅되어 있는 경우 사용한다.
2) css : @font-face를 사용하여 웹 페이지에서 사용자 지정 폰트를 로드한다.
<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<style>
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
/* 추가적인 폰트 포맷 지정 가능 */
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>위의 CSS 코드에서 @font-face을 사용하여 "CustomFont"라는 폰트 패밀리를 정의합니다.
src 속성에서는 실제 폰트 파일의 경로를 지정하고, format 속성으로 해당 파일의 형식을 명시합니다.
여러 개의 폰트 파일 형식을 지정하여 다양한 브라우저에서 호환성을 보장할 수 있습니다.
그리고 font-weight와 font-style 속성을 사용하여 폰트의 두께와 스타일을 추가로 설정합니다.
이후 body 요소에서 font-family 속성을 사용하여 웹 페이지의 텍스트에 "CustomFont"를 적용합니다.