💻 Frontend
pre-connect와 FOIT를 통한 웹폰트 최적화
date
Oct 27, 2022
slug
webfont
author
status
Public
tags
Vue.js
Web
summary
Webfont 및 Googlefont 리서치 및 성능최적화 구현
type
Post
thumbnail
category
💻 Frontend
updatedAt
Apr 12, 2023 01:24 PM
[목차]
1. 웹 폰트란?1-1) font-face1-2) font-face options2. Google Font2-1) html link링크의 구성(CSS파일과 폰트파일)구글 폰트 사용 설정하기(preconnect, crossorigin, font-display)2-2) css import2-3) font-face src3. Lang selector3-1) What is Lang3-2) Lang with css4. 구현
1. 웹 폰트란?
온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트
이를 통해 사용 환경에서 설치 여부와 상관없이 의도한 폰트를 보여줄 수 있다.
1-1) font-face
기존에 font-family로만 폰트 사용을 통제했었으나, font에 필요한 여러가지 속성과 url옵션이 들어간 폰트페이스가 만들어지고 나서는 웹폰트는 font-face로 주로 사용한다.
@font-face {
font-family: NanumSquareWeb;
src: local(NanumSquareR),
local(NanumSquare),
url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
url(NanumSquareR.woff) format('woff'),
url(NanumSquareR.ttf) format('truetype');
font-style: normal;
font-weight: normal;
unicode-range: U+0-10FFFF;
}
h1 {
font-family: NanumSquareWeb, sans-serif;
} 1-2) font-face options
font-family (name, list)
@font-face {
font-family: NanumSquareWeb;
src: url(NanumSquareR.woff) format('woff')
}
@font-face {
font-family: '블로그 제목';
src: url(NanumSquareR.woff) format('woff')
}- 폰트 패밀리명과 import한 font 명이 반드시 같아야 하는 것은 아님
- 이 폰트 패밀리는 명시된 순서된 목록을 모두 훑어서 사용가능한 폰트가 있는지를 찾고 적용한다.
src (local, url, format)
@font-face {
font-family: NanumSquareWeb;
src: local(NanumSquareR), /* 첫번째 */
local(NanumSquare), /* 두번째 */
url(NanumSquareR.eot), /* 세번째 */
url(NanumSquareR.woff) format(woff), /* 네번째 */
url(NanumSquareR.ttf); /* 다섯번째 */
}- local
- local은 사용자의 로컬환경에 설치된 폰트는 Local()이라는 구문을 사용하여 지정이 가능함.
- url (폰트파일)
- url은 외부 링크 혹은 폴더에 저장된 경로를 통해 폰트를 입력할 때 사용
- format()
- 파일에 맞게 글꼴 형식을 지정하고, 브라우저에서 지원하는 형식만 다운로드를 할 수 있음.
- 예를 들어 위와 같은 예시가 있다고 한다면 크롬브라우저에서는 eot를 지원하지 않기 때문에 woff를 다운받게 된다.
font-style
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;- normal
- italic : 이탤릭
- oblique (deg) : 기울임 글자 (deg) 각도 설정 가능
- 테스트는 파이어폭스로 할 것..!! 크롬은 별 차이 없다.
font-weight
h1 {
font-family: NanumSquareWeb, sans-serif;
font-weight: 200; /* ? */
}
h2 {
font-family: NanumSquareWeb, sans-serif;
font-weight: 600; /* ? */
}만약 import한 font-weight가 200이 없는데 200을 불러온다면? 혹은 600이 없는데 600을 불러온다면?
불러오는 기준
300이하일 때는 낮은순
600이상일 때는 높은순
400일 때 → 500이 없으면 300이하 규칙
500일 때 → 400이 없으면 300이하 규칙
unicode-range
@font-face {
font-family: NanumSquareWeb;
src: url(NanumSquareL.woff) format('woff');
unicode-range: U+AC01, U+AC08;
}
특정문자에만 font 적용 가능
2. Google Font
구글 폰트는 구글API에서 제공하는 폰트 소스
해당 폰트는 다운로드에서 파일로 들고 있거나, 외부의 url로 요청해서 다운로드 할 수 있다.
파일을 다운로드해서 읽게 되면 구글에서 수정한 폰트파일 반영이 어렵기도하고,
초기 css 파일의 크기가 커지기 때문에 링크로 다운받는 것이 바람직하다.
2-1) html link
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<style>
{
font-family: Noto Sans;
}
</style>링크의 구성(CSS파일과 폰트파일)
https://fonts.googleapis.com (css파일)
실제 폰트 파일이 아닌 font-face로 정의된 css 폰트 파일을 들고 있는 링크이다
https://fonts.gstatic.com (폰트파일)
해당 font-face의 src 속성에 보면 실제 폰트 파일이 있다. 이 링크로 파일을 다운받는 것이다.
구글 폰트 사용 설정하기(preconnect, crossorigin, font-display)
preconnect (미리 커넥션 후 사용 시 다운로드)
- preconnect는 시간이 많이 소요되는 작업(이미지,폰트 등)을 미리 연결해 캐시에 저장해놓는다.
- 생각보다 폰트가 용량이 크다
- 이미지든 폰트든 연결을 한다.
- vue CLI의 index.html에서 link태그로 설정할 수 있다. 위에 두 개의 링크를 preconnect한 것은 google font가 폰트의 파일을 찾는 방식이 두 번에 걸쳐서 받아지기 때문이다.
- 이 때 font-family에서 해당 폰트가 사용되게 되면 그 때 다운로드를 진행한다.
crossorigin (CORS 세팅)
font-display (폰트 적용 시점 컨트롤)
font-display란 글꼴을 다운받고 교체되는 타이밍에 어떻게 표시할 것인지 결정하는 속성
이 때 두 가지 개념이 나오는데 FOIT와 FOUT이다.
FOIT(Flash of Invisible Text)
FOIT란 브라우저가 폰트를 완전히 다운로드 하기 전까지 컨텐츠가 보이지 않는 현상
FOUT(Flash of Unstyled Text)
FOUT란 브라우저가 폰트를 완전히 다운받기 전에 기본폰트를 보여주가 변경된 폰트 적용
font-display options
이를 조절할 수 있는 font-display 옵션은 4가지가 있다.
auto : 기본 값. 브라우저에 기본 동작에 따름 block : FOIT와 같은 설정 swap : FOUT fallback : 0.1초 동안 FOIT 후, 3초 후에도 불러오지 못했을 경우 기본 폰트 사용 optional : 0.1초 동안 FOIT 후, 네트워크 상태에 따라 기본 폰트 혹은 웹폰트 적용 여부 결정 후 사용
구글 폰트는 default 값으로 swap을 설정해놨기 때문에 해당 속성을 변경하기 위해서는 요청보내는 url에 추가해주거나, 직접 요청 보내는 font-face 속성 내에서 font-display를 설정해주면 된다.
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=block');
@font-face {
font-family: Dancing Script;
src: url('https://fonts.gstatic.com/s/dancingscript/v24/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8hNX6plRP.woff2');
font-weight: 400;
font-display: fallback;
}2-2) css import
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
.classname {
font-family: Noto Sans;
// display: swap;
font-display: swap;
}
</style>2-3) font-face src
@font-face {
font-family: Dancing Script;
src: url('https://fonts.gstatic.com/s/dancingscript/v24/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8hNX6plRP.woff2');
font-weight: 400;
}3. Lang selector
3-1) What is Lang
<p lang="en-GB">This paragraph is defined as British English.</p>
<p lang="fr">Ce paragraphe est défini en français.</p>- lang 전역속성은 특정 요소에 language 속성을 정의할 수 있는 html 속성
- 해당 속성의 값이 빈 문자열일 경우에는 unknown이며, 유요하지 않은 값은 invalid이다.
- 지역속성은 활자 하위태그와 지역 하위태그가 있는데 언어를 사용하는 나라와 지역에 따라 세분화된다.
유효한 lang 속성:lang(es)lang="es-ES"lang="es-419"
유효하지 않은 lang 속성:lang(xyzzy)lang="xyzzy-Zorp!"
3-2) Lang with css
:lang(en-US) {
font-family: Noto Sans;
font-display: swap;
}- css에서 lang 속성은 가상 선택자(Pseudo-classes)를 통해 가상의 상태를 갖고 해당 상태에 따른 css 효과를 가질 수 있다.
What is Pseudo-classes?
Pseudo-classes(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어
:hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라
탐색기 히스토리(
:visited 등),
콘텐츠의 상태(특정 폼 요소에 적용한 :checked등),
마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover등)처럼
외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.+) Pseudo-elements (가상 요소)
Pseudo-elements(가상 요소)는 선택자에 추가하는 키워드로,
선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어
::first-line (en-US)
을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.4. 구현
참고자료
