HTML 5 Webコンポーネント内で素晴らしいフォントを使用する

Question

私はHTML5 Web Componentsを使い始めています。私はpollyfill webcomponents.jsを使用し、開発のためにクロムを使用しています。どのようにして素晴らしいフォントをWebコンポーネント内で動作させることができますか？私は彼らが提供するcdnとスクリプトタグの両方を試しました。私はあなたがこの（置き換えCDN）を望んでいたと思います

.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    box-shadow: 0 2px 1px rgba(0, 0, 0, .1); 
 
} 
 
.month-title { 
 
    height: 20%; 
 
    padding: 10px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.day-body { 
 
    height: 70%; 
 
    padding: 10px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#title { 
 
    height: 10%; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
} 
 
#monthTitle { 
 
    flex-grow: 1; 
 
    background-color: #4cff00; 
 
} 
 
.month-button { 
 
    background-color: #ffd800; 
 
}

<script src="https://use.fontawesome.com/4483f1d3f2.js"></script> 
 

 
<div class="wrapper snow"> 
 

 
    <div id="title"> 
 

 
    <div id="leftButton" class="month-button"> 
 

 
     <i class="fa fa-chevron-left"></i> 
 

 

 
    </div> 
 

 
    <div id="monthTitle"> 
 

 
    </div> 
 

 
    <div id="rightButton" class="month-button"> 
 

 
     <i class="fa fa-chevron-right"></i> 
 

 

 
    </div> 
 

 
    </div> 
 

 
    <div class="month-title"> 
 

 
    </div> 
 

 
    <div class="day-body"> 
 

 
    </div> 
 

 
</div>

Answer 1

（また、私は簡潔にするためのjsを省略したが、それはしませんでした）：私はこれが機能するだろうと思った

.wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
    box-shadow: 0 2px 1px rgba(0, 0, 0, .1); 
 
} 
 
.month-title { 
 
    height: 20%; 
 
    padding: 10px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.day-body { 
 
    height: 70%; 
 
    padding: 10px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#title { 
 
    height: 10%; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
} 
 
#monthTitle { 
 
    flex-grow: 1; 
 
    background-color: #4cff00; 
 
} 
 
.month-button { 
 
    background-color: #ffd800; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="wrapper snow"> 
 

 
    <div id="title"> 
 

 
    <div id="leftButton" class="month-button"> 
 

 
     <i class="fa fa-chevron-left" aria-hidden="true"></i> 
 

 
    </div> 
 

 
    <div id="monthTitle"> 
 

 
    </div> 
 

 
    <div id="rightButton" class="month-button"> 
 

 
     <i class="fa fa-chevron-right" aria-hidden="true"></i> 
 

 

 
    </div> 
 

 
    </div> 
 

 
    <div class="month-title"> 
 

 
    </div> 
 

 
    <div class="day-body"> 
 

 
    </div> 
 

 
</div>