Font를 Preload하는 방법

본 내용은 공부용(학습용)으로 작성되었습니다.

• 5week Topic

폰트(Font)는 브라우저나 특정 웹사이트에서 사용자를 위한 가독성 또는 심미적인 관점에서 중요한 요소 중 하나이다. 이러한 폰트를 웹에 적용하는 방법에 대해 알아보자.

폰트 적용 시, 로컬 폰트와 웹 폰트(web font)로 적용하는 방법이 있습니다.

로컬 폰트란 ?

css에서 font-family로 선언한 글꼴이 사용자 시스템(로컬)에 기본으로 설치가 되어 있어 사용할 수 있는 경우를 말합니다.

로컬 폰트 다운

예를 들어, 네이버 나눔스퀘어(Nanumsquare) 폰트를 다운받게 되면 웹 브라우저에서 지원되는 다양한 포맷(호환성)으로 구성된 디렉토리 파일이 다운됩니다.

로컬 폰트 로딩

@font-face : local()

• local : 로컬에 이미 설치 된 폰트의 경로를 적음

css의 @font-face속성을 통해 로컬에 저장되어 있는 디렉토리의 경로를 지정해 줍니다.

<style>
@font-face {
    font-family: NanumSquare; /* 이름 지정하기 */
    src : local(NanumSquareB),
    local(NanumSquareEB),
    local(NanumSquareL),
    local(NanumSquareacB),
    local(NanumSquareacEB),
    local(NanumSquareacacL),
    local(NanumSquareacacR),
    url(NanumSquareR.oft),
    url(NanumSquareOTF_acR.otf);
    font-style: normal;
    font-weight: normal;
}
</style>

• url : 다운로드 할 웹폰트의 주소를 적음

url() 둘 다 함께 사용하는 것이 일반적이므로 local() 사용 가능한 경우 사용자가 설치한 글꼴 사본을 사용하고, 사용자 장치에서 글꼴 사본을 찾을 수 없는 경우 url을 통해 다시 다운로드 합니다.

웹 폰트란 ?

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이(로컬의 폰트 설치 상황에 상관없이) 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해 주는 웹 전용 폰트입니다.

웹 폰트 사용법

• font-family : 사용할 웹 폰트의 이름을 지정한다. 폰트 파일의 이름과 일치하지 않아도 상관없지만, 비슷하게 설정하는 것이 유지보수에 좋다.

• src : 폰트 파일의 경로와 폰트의 형식을 지정한다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정한다.

웹 폰트의 문제점 발생

웹 폰트를 다운로드 해 웹 페이지를 렌더링 하는 과정에서, 네트워크의 속도, 웹 폰트의 용량, 웹 폰트가 적용된 텍스트가 보이지 않는 문제 등이 발생한다.

문제를 해결하기 위한 웹 폰트 최적화 하기

1. 폰트 파일의 용량 줄이기

웹 폰트는 네트워크를 통해 다운로드하는 자원이기 때문에 파일의 크기가 크면 웹 폰트가 적용된 글자가 화면에 표시될 때까지 시간이 지연되는 문제가 발생한다. 이러한 이유로 폰트 파일의 용량을 최적화하여 완화할 수 있다.

• 폰트는 다양한 형식의 포맷이 존재 (ex. eot, ttf, woff, woff2, svg ...)
• 각 포맷의 용량을 비교해보고 최적화된 포맷으로 사용하기

2. 서브셋 폰트 사용
서브셋 폰트(subset font)는 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트이다.

• 한글 폰트 파일 용량 >>> 영문 폰트 파일 용량

3. unicode-range 속성
unicode-range 속성은 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성이다.
예시)

<style>
	@font-face {
    	font-family : NanumSquare;
        src : url(NanumSqareB.woff2) format('woff2');
        unicode-range : U+BC14, U+CC28;
    }
</style>

• 등록된 글자가 텍스트에 없으면 웹 폰트 다운도드를 요청하지 않음
• 웹페이지에서 사용할 문자에 필요한 폰트만 선택적으로 다운로드 하기 때문에 크기가 큰 한글 폰트를 동적으로 분할 다운로드하는 방법으로 용량을 최적화.

출처 및 더 자세한 정보 : Naver D2