2

I'm trying to get a web font into my polymer component, however the font is failing to render. Could someone shed some light on this? Google hasn't been giving me much love on this issue. If you need any more info then just let me know. Thanks!

@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 */
}
Monty Monro
  • 603
  • 2
  • 10
  • 22

2 Answers2

4

OK, so I have worked this out. The @font-face needs to be loaded outside of the <template>. Not sure why, but it's all working now.

MattMS
  • 1,106
  • 1
  • 16
  • 32
Monty Monro
  • 603
  • 2
  • 10
  • 22
  • 1
    Completing answer - Outside of the . +1 – Harpreet Singh Apr 11 '15 at 19:10
  • Moving @font-face ouside of the Polymer element and fix relative url works for me as well! Thanks @Monty! – Camille Mar 22 '17 at 10:40
  • The reason for that is that - until today - Chrome does not support @font-face definitions inside shadow dom. https://github.com/Polymer/polymer/issues/2386 https://bugs.chromium.org/p/chromium/issues/detail?id=336876 – Robert Aug 06 '18 at 13:44
0

Looks correct to me but I'm also used to having problem with the font-face...

Just to be sure, is the css containing your font-face at the good level to reach the folder /fonts? For instance if you have a css folder containing this file you should use 

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

Did you also check with different browsers ?

ahbon
  • 502
  • 4
  • 19