@ font-face가 폴리머/웹 구성 요소에서 작동하지 않습니다.

Question

웹 구성 요소로 웹 글꼴을 가져 오려고하는데 글꼴이 렌더링되지 않습니다. 누군가가 이것에 대해 밝힐 수 있을까요? Google은이 문제에 대해 많은 관심을 보이지 않았습니다. 더 자세한 정보가 필요하시면 알려주세요. 감사!

그냥해야 할

가에 좋은 수준에서 글꼴의 얼굴을 포함하는 CSS입니다 ...

@font-face { 
font-family: 'open_sansextrabold'; 
src: url('fonts/OpenSans-ExtraBold-webfont.eot'); 
src: url('fonts/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), 
    url('fonts/OpenSans-ExtraBold-webfont.woff') format('woff'), 
    url('fonts/OpenSans-ExtraBold-webfont.ttf') format('truetype'), 
    url('fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

header a { 
font-family: "open_sansextrabold"; 
display: block; 
height: 50px; 
width: 150px; 
color: #fff; 
text-decoration: none; 
text-align: center; 
line-height: 50px; 
transition: background-color 1s ease; 
-webkit-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-moz-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-o-transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 140ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */ 

-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */ 
} 

Answer 1

나에게 올바른 보이지만, 나는 또한 글꼴 얼굴 문제가 사용 해요 폴더/글꼴을 찾으십니까? 예를 들어이 파일이 포함 된 css 폴더가 있다면

url('../fonts/...) 

다른 브라우저로 확인 했습니까?

Answer 2

좋아요, 그래서이 문제를 해결했습니다. @font-face은 <template> 외부에로드해야합니다. 이유는 확실하지 않지만 모두 작동합니다.