728x90
웹 폰트란?
정확히 무엇일까요? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다.
기본 사용법
font-face 규칙에는 다음과 같은 두 가지 세부 속성을 설정합니다.
- font-family: 사용할 웹 폰트의 이름을 지정합니다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없습니다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋습니다.
- src: 폰트 파일의 경로와 폰트의 형식을 지정합니다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정합니다.
웹 폰트의 렌딩 방식
Foit : 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작입니다.
Fout : 웹폰트가 로드될 때따지 시스템의 기본 폰트를 보여주고 이후 flow해서 글꼴을 대체하는 방식
기본적으로 브라우저마다 폰트 렌더링 방식이 다르다.
Firefox와 Chrome Foit방식을 IE와 Edge는 FOUT방식으로 렌더링이 됩니다.
FOIT 방식은 Mitt Romney 사례와 같이 텍스트가 보이지 않는 문제가 있기 때문에 UX 관점에서 좋지 않습니다.
그러므로 모든 브라우저에서 FOIT 방식이 아닌 FOUT 방식으로 작동하게 한다면 텍스트가 보이지 않는 문제를 해결할 수 있습니다.
웹폰트 최적화
확장자 선택
font-display
- auto 옵션은 브라우저의 기본 동작에 맡기는 방식입니다.
- block 옵션은 FOIT와 동일하게 작동하는 옵션이다. 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링 하지 않습니다(최대 3초). 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다.
- swap 옵션은 FOUT와 동일하게 작동하는 옵션으로 우선 폴백 폰트로 글자를 렌더링 하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보입니다.
- fallback 옵션을 사용하면 우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링 합니다. 특이한 점은 약 2초의 전환(swap) 시간이 있다는 점인데 이 시간 안에 로딩이 완료되면 웹 폰트로 전환합니다. 하지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 폴백 폰트를 유지합니다. 전환 시간 이후에 다운로드된 웹 폰트는 웹 페이지에 적용되지는 않지만 캐시에는 저장됩니다. 그래서 추후에 사용자가 다시 방문했을 때 바로 웹 폰트가 적용된다는 장점이 있습니다.
- optional 옵션은 fallback 옵션과 비슷하지만 다르게 작동하는 옵션입니다. 우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환합니다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점이 이 옵션의 특이한 점으로 예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않습니다.
preload 옵션으로 먼저 로딩하기
<link rel="preload" href="./nanumGothic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
Base64 인코딩
@font-face {
font-family: 'NotoSans_Regular';
src: url('data:font/woff2;charset=utf-8;base64,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')
format('woff2'),
url('data:font/woff;charset=utf-8;base64,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')
format('woff');
font-weight: normal;
font-style: normal;
font-display: optional;
}
body {
font-family: 'NotoSans_Regular';
}
솔직히 필자는 위의 preloading보다 base64로 인코딩하는 방식을 좋아한다.
fast 3g로 비교해보면 base64인코딩의 경우 네트워크 요청을 거의 거치지 않기 때문에 더 빠르게 로딩 된다.
728x90
'옥소폴리틱스' 카테고리의 다른 글
옥소폴리틱스 4주차 회고 (0) | 2022.10.22 |
---|---|
open graph 작업 (0) | 2022.10.21 |
오픈 그래프 (0) | 2022.10.20 |
옥소폴리틱스 인턴 프로젝트 1주차 회고 - 2 (0) | 2022.10.12 |
옥소폴리틱스 인턴 프로젝트 1주차 회고 - 1 (0) | 2022.10.12 |