CODEWITHSUNDEEP
webcomponentsfont-facepolymer
Monty Monro
Monty Monro

Reputation: 613

@font-face not working in polymer/web-components

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 */
}

Upvotes: 2

Views: 2100

Answers (2)

Monty Monro
Monty Monro

Reputation: 613

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.

Upvotes: 5

ahbon
ahbon

Reputation: 512

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 ?

Upvotes: 0

Related Questions