[웹폰트] 사용과 최적화

https://www.youtube.com/watch?v=4YCBBoSg2fk&index=6&list=PLZl3coZhX98oeg76bUDTagfySnBJin3FE&t=0s


위 동영상을 보고 정리한 내용이다.






네트워크 상태가 좋지 않고
웹폰트의 용량이 크고
렌더링 도중 보이지 않는 텍스트

일 때 웹폰트가 안보일 수 있다.




웹폰트 최적화



1.

woff2 파일이 다른 파일들에 비해 용량이 작다.



그러나 브라우저마다 지원 범위가 상이하다.
eot파일은 ie9부터 대응하는 추세에 따라 안써도 된다.(네이버)



fallback처리


웹폰트 변환 사이트▼
https://onlinefontconverter.com/



2.

subset 폰트 사용하기 == 사용하지 않는 문자 삭제




3.

unicode-range 사용


http://www.unicode.org/charts/




----------------------------------------------------------------------------------------------------------------------------------------



폰트 용량이 커서 폰트 파일을 불러오는데 걸리는 시간이 길때 브라우저별 대응



*모던 브라우저(크롬, 사파리, 파이어폭스) -> FOIT(보이지 않는 텍스트)

- 웹 폰트가 다운로드 될 때까지 텍스트를 랜더링 하지 않다가, 로딩이 된 이후에 텍스트를 보여준다.
- 웹폰트가 로딩이 되지 않을때, 해당 텍스트 "rendering Block"
- 기다리는 제한시간 3초가 있다.


*IE계열 브라우저(익스프로어) -> FOUT(ugly한 기본 폰트 텍스트)

- 웹폰트가 다운로드 될 때까지 unstyled텍스트(fall back폰트)를 보여주고, 로드가 되면 웹폰트로 대처하는 방식.
- 웹폰트 로딩에 관계없이 텍스트는 항상 보인다.
- 글꼴의 자간, 높이에 따라 "레이아웃"이 변결 될 수 있다.
=> 레이아웃이 틀어져서 이상해보인다.




▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼


텍스트를 항상 보이게 하자!


1. FontLoader 라이브러리 == 의도적 FOUT 만들기






2. css의 font-display속성
http://font-display.glitch.me/



font-display: swap
즉시 대체 폰트 렌더링(rendering block기간 없음)
무한정 웹폰트 응답 대기(FOUT)

font-display: fallback
아주 짧은 시간(0.1초) block후, 대체폰트 렌더링
swap기간(약 2초)내 폰트 로드 완료시 렌더링이 되고 초과시엔 렌더링 하지 않음
장점: 다운은 했기 때문에 사용자가 추후에 재방문하면 남아있는 캐싱이 작용함

font-display: optional
0.1초 block후, 대체폰트 렌더링.
네트워크 상태에 따라 빠르면 webfont상태로 넘어가고, 느리면 fallback상태로 넘어간다.
이 역시 다운은 진행된다.


=> 웹폰트 로드 여부에 관계없이 항상 텍스트가 보이게 하려면?
swap / fallbak / optional 사용


* font-display는 IE에서 작용을 안한다. 하.지.만!!!!
  이게 필요한 브라우저는 모던 브라우저이기 때문에 써도 된다!!!



3. 폰트간 차이 줄이기

발표자분이 만든 사이트..▼
https://sangziii.github.io/fontStyleMatcher/






4. 먼저 다운받기

<link> 태그에 preload 옵션을 주면, 다른 리소스보다 빨리 받아올 수 있음













2018.11.29 후기)


일을 하다보면 웹폰트 이슈가 종종 일어난다.

지금도 신입이지만 더 신입이었을때 웹폰트를 cdn으로 불렀는데, 해당 사이트가 유리서버라 폰트를 읽는데 너무 오래 걸려서 폰트가 안보였었다.

그 때 이후로 가능하면 폰트는 직접 서버에 올려서 font-family로 연결하는 방법을 쓰고 있다. 하지만 이 같은 경우에는 폰트 파일이 너무 무거워서 사이트가 통째로 느려진다.

그래서 경량화된 폰트를 서치해서 썼더니 이번엔 크롬에서 폰트가 흐리게(?) 보이는 이슈가 생겨서 결국 다시 용량 큰 폰트파일을 통째로 쓰기도 했고...ㅎㅎㅎㅎㅎ

또 어떤때에는 익스에서 폰트가 적용이 되기까지 오래 걸려서 기본 폰트로 연결되다 보니 레이아웃이 다 틀어져서 골치 아팠던 적도 있었다. 이런 이슈들을 그저 브라우저 이슈라고만 생각했었는데 각자의 이름이 있었구나 ㅋㅋㅋ 심지어 해결방법도 있다ㅠㅠ..나 반성.

원래 나는 이슈가 생기면 그렇구나 하고 넘어가는 스타일인데, 이 발표를 보니 개발자에게 이슈란 풀어야 할 도전과제구나 라고 생각하게 됐다. 이 마음이 얼마나 갈지는 모르겠지만ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

매우 유익한 발표였다! 웹폰트와 한뼘 더 친해진 기분~