웹폰트와 CSS font-display 속성 정보
웹폰트와 CSS font-display 속성
본문
구글 Material Icons을 웹에서 사용할 때
이렇게 사용하라고 명시되어 있습니다.
https://fonts.googleapis.com/icon?family=Material+Icons
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<span class="material-icons">store</span>
그런데, 문제점은 웹폰트를 로딩하기 전에는
아이콘이 나오지 않으므로
위의 예시에서 store 텍스트가 랜더링된 후
웹폰트가 로딩되면 아이콘이 랜더링 되죠.
웹폰트 로딩 전
웹폰트 로딩 후
웹폰트 로딩 전까지 텍스트가 나타나지 않게 하려면
font-display 속성을 이용하면 됩니다만 ( font-display: block; )
구글 웹폰트에서는 font-display에 대한 파라메터를 제공하고 있습니다. (display=block)
(다른 구글 웹폰트에서는 display=swap을 기본으로 안내하고 있습니다.)
https://fonts.googleapis.com/icon?family=Material+Icons&display=block
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
<span class="material-icons">store</span>
웹폰트 로딩 전
웹폰트 로딩 후
----------
참고
# Google Material Icons
https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts
# Google Material Icons Resource
https://fonts.google.com/icons
https://material.io/resources/icons/?icon=settings_input_composite&style=baseline
# CSS font-display
https://developer.mozilla.org/ko/docs/Web/CSS/@font-face/font-display
# NAVER D2 폰트 디스플레이에 대한 자세한 설명 (꼭 읽어보세요)
https://d2.naver.com/helloworld/4969726
2
댓글 1개
