아스트라 Font Swap 문제를 확인하게 된 것은 테마를 변경한 직후였습니다. PageSpeed Insights를 점검했는데 “웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기” 경고가 다시 나타났고, 단순 속도 문제가 아니라 웹폰트 표시 방식과 관련된 설정 문제라는 것을 바로 알 수 있었습니다.
특히 아스트라 Font Swap 문제는 OpenLiteSpeed 캐시를 사용하고 있어도 그대로 표시되는 경우가 많습니다. LiteSpeed Cache가 이미지나 CSS 최적화는 처리해도 브라우저의 웹폰트 렌더링 방식 자체까지 수정해 주지는 않기 때문입니다.
결국 아스트라 공식 문서를 참고해 functions.php에 코드를 추가했고, 적용 이후 글꼴이 늦게 나타나는 현상과 PageSpeed 경고가 안정적으로 줄어드는 것을 확인할 수 있었습니다.
목차
아스트라 Font Swap 문제가 발생하는 이유
웹폰트는 브라우저가 외부 폰트 파일을 다운로드한 뒤 화면에 적용하는 방식으로 동작합니다. 그런데 크롬이나 파이어폭스 계열 브라우저는 기본적으로 FOIT(Flash Of Invisible Text) 방식을 사용하는 경우가 많습니다.
이 방식은 웹폰트가 로드되기 전까지 텍스트를 숨겨버리기 때문에 페이지 로딩 중 글자가 순간적으로 사라지거나 번쩍이는 현상이 생길 수 있습니다. 반대로 FOUT(Flash Of Unstyled Text) 방식은 우선 기본 폰트를 보여준 뒤 웹폰트를 교체하는 방식이라 사용자가 빈 화면을 보는 시간이 줄어들게 됩니다.
아스트라 Font Swap 설정은 바로 이 동작 방식을 변경하는 과정이라고 보면 됩니다.
PageSpeed Insights에서 표시된 Font Swap 경고
PageSpeed Insights에서 “웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기” 경고가 나타난 화면입니다. 이 항목은 font-display 설정이 제대로 적용되지 않았을 때 자주 표시됩니다.
아스트라 Font Swap 설정이 적용되지 않으면 웹폰트 로딩 중 텍스트가 잠시 보이지 않는 FOIT 현상이 발생할 수 있으며, 사용자 체감 속도와 CLS 흐름에도 영향을 줄 수 있습니다.
아스트라 공식 문서에서 해결 방법 확인
아스트라 테마 공식 문서에서 font-display 값을 수정하는 방법을 설명하는 화면입니다. 공식 문서에서는 functions.php 파일에 필터 코드를 추가해 font-display 속성을 swap으로 변경하도록 안내하고 있습니다.
아스트라 Font Swap 문제를 해결할 때 공식 문서를 기준으로 수정하는 것이 중요한 이유는 테마 내부 구조와 충돌 가능성을 줄일 수 있기 때문입니다.
워드프레스 테마 편집기로 이동
워드프레스 관리자에서 테마 편집기로 이동하는 화면입니다. 아스트라 Font Swap 설정 코드는 테마 내부 functions.php 파일에 추가해야 하기 때문에 먼저 테마 편집기로 들어가야 합니다.
OpenLiteSpeed 환경에서는 캐시가 강하게 적용되는 경우가 많기 때문에 수정 후 LiteSpeed Cache 정리까지 같이 진행하는 편이 안정적입니다.
functions.php 파일 선택
테마 편집기 우측 메뉴에서 functions.php 파일을 선택하는 화면입니다. 아스트라 Font Swap 코드는 이 파일 하단에 추가하게 됩니다.
functions.php는 워드프레스 동작과 연결되는 핵심 파일이라 잘못 수정하면 관리자 접속 오류가 발생할 수도 있기 때문에 수정 전 백업을 해두는 편이 안전합니다.
아스트라 Font Swap 코드 추가
functions.php 하단에 아스트라 Font Swap 코드를 추가한 화면입니다. 이 코드는 font-display 속성을 swap으로 변경해 웹폰트가 늦게 로딩되더라도 텍스트가 먼저 표시되도록 처리합니다.
특히 모바일 환경에서는 웹폰트 로딩 지연이 사용자 체감 속도에 직접 영향을 주기 때문에 이런 설정 차이가 꽤 크게 느껴질 수 있습니다.
추가한 코드 내용
add_filter( 'astra_fonts_display_property', 'astra_replace_fallback_with_swap' );
function astra_replace_fallback_with_swap( $property ) {
$property = 'swap';
return $property;
}위 코드를 추가한 뒤 파일 업데이트 버튼을 눌러 저장하면 됩니다.
OpenLiteSpeed 환경에서는 캐시 정리도 중요
아스트라 Font Swap 설정을 적용했는데도 변화가 보이지 않는다면 LiteSpeed Cache나 QUIC.cloud 캐시가 남아 있는 경우가 많습니다.
특히 OpenLiteSpeed 환경은 CSS 최적화와 결합 처리까지 같이 사용하는 경우가 많아서 아래 항목도 함께 확인하는 편이 좋습니다.
- LiteSpeed Cache 전체 Purge
- CSS Combine 비활성화 테스트
- QUIC.cloud CDN 캐시 초기화
- 브라우저 캐시 삭제
- PageSpeed 재분석
캐시가 남아 있으면 수정했는데도 이전 CSS 상태가 계속 표시되는 경우가 있습니다.
아스트라 Font Swap 적용 후 체감 변화
설정을 적용한 이후 가장 먼저 느껴진 부분은 텍스트가 늦게 나타나는 현상이 줄어든 점이었습니다. 특히 모바일에서 페이지 진입 시 글자가 비었다가 갑자기 바뀌는 느낌이 이전보다 훨씬 줄어들었습니다.
또한 PageSpeed Insights 경고도 감소했고, OpenLiteSpeed 캐시와 같이 사용했을 때 초기 렌더링 흐름도 더 안정적으로 유지되는 상태를 확인할 수 있었습니다.
아스트라 Font Swap 문제는 단순히 점수용 수정이라기보다 실제 사용자 체감 속도와 연결되는 부분이라, Astra 테마를 사용하는 경우 한 번 정도는 확인해 보는 편이 좋았습니다.
