[HTML/CSS] 쉐도우 돔(Shadow DOM) 내부에서 @font-face가 동작하지 않는 이슈

Shadow DOM이란?

이전 글 참고

[HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기

@font-face란?

웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있는 CSS at role이다.

간단하게 아래와 같이 사용이 가능하다.

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

 

<a-remote-font-name>

• font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.

<source>

• 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.

<weight>

• 폰트의 굵기(font weight) 값

<style>

• 폰트 스타일(font style) 값

사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지 못한다면, 다른 대체 폰트를 찾을때까지 폰트를 계속 검색한다. 

문제 발생

Shadow DOM 내부에서 @font-face를 사용하면?

다음과 같이 Shadow DOM 하위에 생성한 style 태그에서 @font-face를 사용하면, 아래와 같이 font가 적용되지 않는다.

네트워크 탭에서 확인해보면, .woff 폰트 자체를 다운로드하지 못하는 것으로 보인다. 

해결방법

@font-face로 폰트를 가져오는 코드를 Shadow DOM 외부 영역으로 빼낸다.

(글꼴을 적용하는 font-family는 Shadow DOM 하위로 그대로 적용)

네트워크 탭에서 정상적으로 폰트를 불러오는 것을 확인할 수 있다.

 

자세한 원인은 모르지만, Shadow DOM 외에도 scoped css 내부에서 @font-face가 잘 동작하지 않는 이슈가 있는 것 같다. 

이미 많은 채널에서 해결방법에 대한 다양한 논의가 존재해서,이슈를 빠르게 해결할 수 있었다.

---

Reference

@font-face doesn't work with Shadow DOM? · Issue #887 · mdn/interactive-examples

336876 - chromium - An open-source project to help move the web forward. - Monorail

72461 – <style scoped>: Implement scoped @font-face rules