글꼴 표시 설정으로 웹 글꼴 성능 맞춤화

마지막 업데이트 날짜 2023년 7월 11일

글꼴 표시 설정을 사용하여 웹 글꼴 성능을 수정하는 방법을 알아봅니다.

글꼴 표시 설정을 사용하면 웹 브라우저에 웹 글꼴이 로드되고 웹 사이트에 적용되는 방식을 지정할 수 있습니다. 다음과 같은 다섯 가지 글꼴 표시 옵션이 있습니다.

글꼴 표시 값 

비헤이비어 

자동

브라우저가 기본 방식을 사용하여 글꼴을 로드하도록 허용합니다.

차단

웹 글꼴이 다운로드될 때까지 웹 사이트에서 텍스트를 숨깁니다. 이 옵션을 사용하면 웹 사이트 방문자에게 보이지 않는 텍스트의 깜박임(FOIT)이 표시될 수 있습니다.

대체

웹 글꼴이 다운로드될 때까지 CSS에서 설정한 대체 글꼴을 표시합니다. 웹 사이트 방문자에게 스타일이 적용되지 않은 텍스트가 순간적으로 표시되거나 이 옵션으로 인한 FOUT가 나타날 수 있습니다.  

폴백

짧은 기간 동안 차단 비헤이비어를 사용한 다음 대체 비헤이비어로 전환하고 예비 글꼴을 텍스트에 적용합니다.교체 기간이 끝날 때까지 Web Fonts가 로드되지 않으면 대체 글꼴이 계속 사용됩니다. 

선택 사항

짧은 기간 동안 차단 비헤이비어를 사용한 다음 예비 글꼴을 텍스트에 적용합니다. 이 값을 사용하면 웹 브라우저가 웹 글꼴을 전혀 다운로드하지 않도록 선택할 수 있습니다. 예를 들어, 웹 사이트 방문자의 인터넷 연결이 느린 경우입니다. 

글꼴 표시 및 지원되는 값에 대한 기술적인 세부 정보는 CSS 글꼴 모듈 레벨 4 사양을 참조하십시오.

메모

기본적으로 웹 글꼴 프로젝트는 글꼴 표시가 자동으로 설정된 상태에서 제작됩니다.

글꼴 표시 설정을 맞춤화하려면 다음 단계를 따르십시오.

웹 프로젝트 페이지에서 프로젝트 편집을 클릭합니다.

프로젝트 편집
프로젝트 편집

사이드바에서 다음 글꼴 표시 값 중 하나를 선택합니다.기본적으로 웹 폰트 프로젝트의 font-display 설정은 auto로 설정됩니다.  

font display settings

변경 내용 저장을 클릭하면 몇 분 안에 글꼴 표시 값이 웹 사이트에 적용됩니다.

새로운 글꼴 표시 설정은 기존 임베드 코드의 일부로 웹 사이트에 자동으로 포함됩니다.

기존 웹 프로젝트 업데이트

글꼴 표시에 대한 지원은 2020년 9월 Adobe의 웹 글꼴 로드에 추가되었습니다. 2020년 9월 이전에 만든 웹 프로젝트는 기본 font-display: auto 동작을 사용하도록 업데이트되었습니다. 

모든 기존 프로젝트의 글꼴 표시 설정은 위 단계에 따라 변경할 수 있습니다. 변경 내용을 저장하면 새로운 글꼴 표시 설정은 기존 임베드 코드의 일부로 웹 사이트에 자동으로 포함됩니다. 웹 사이트 자체를 변경할 필요는 없습니다.