pavelloz
11월 17, 2020, 7:19오후
1
안녕하세요,
google font가 사용되고 있다는 것을 알게 되었습니다(설정에서 여러 개를 선택할 수 있다는 것도 알고 있습니다).
폰트가 로드되기 전의 사용자 경험을 개선하기 위해 google css 로더에 &display=swap를 추가하는 것이 좋습니다.
즉: css?family=Open+Sans:400,400i,700
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: url(...) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
다음과 같이 변경됩니다: css?family=Open+Sans:400,400i,700&display=swap
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(...) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
자세한 내용은 다음 링크에서 확인하세요:
PS. 초보자가 게시물에 링크를 두 개 이상 붙여넣을 수 없어서 일부는 점으로 표시했습니다.
2개의 좋아요
font-display: swap;는 폰트 로딩을 기다리는 동안의 블록 및 스왑 시간에 영향을 미치지만, 우리는 백엔드에서 폰트를 포함하고 있습니다(별도의 discourse-fonts gem 을 사용 중입니다 — 이렇게 하면 Google에 호출을 보내는 것을 피하고 추적되는 것을 방지할 수 있습니다).
따라서 폰트가 초기 로드 시 Discourse 애플리케이션의 일부로 포함되므로, CSS에서 Google(또는 다른 CDN)을 호출하는 경우처럼 렌더링을 지연시키지 않기 때문에 이 방식의 이점을 볼 수 없다고 생각합니다.
다만, 테마에서 제3자 CDN의 사용자 지정 폰트를 추가하는 경우 font-display: swap;을 사용하는 것이 여전히 좋은 조언일 것입니다.
6개의 좋아요
pavelloz
11월 17, 2020, 9:45오후
3
음… 성능 문제를 살펴볼 때 try.discourse.org가 대표적인 인스턴스라고 볼 수 있을까요?
거기서 Google에서 폰트를 로드하는 것을 보고, 전역적인 설정인 줄 알았거든요.
1개의 좋아요
아, 그러면 이해가네요. 헤더가 discourse.org (Open Sans 사용)와 일치하도록 하려고 Try에서 폰트를 가져왔거든요. 거기서 swap을 사용하거나, 아예 테마에 폰트를 직접 포함하는 것도 가능합니다.
성능 문제를 확인하실 때는 Try를 사용하셔도 되지만, 우리가 추가한 사소한 커스터마이징 때문이 아닌지 확실하게 확인하려면 safe-mode를 사용하는 것이 좋습니다.
4개의 좋아요
