在HTML 5 Web组件中使用超棒的字体

Question

我正在开始使用HTML5 Web组件。我正在使用，pollyfill webcomponents.js并使用chrome进行开发。如何在Web组件中使用很棒的字体。我已经尝试了CDN和它们提供的脚本标签。我以为这会工作:(但是没有，为了简洁起见我也省略了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;
}

<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

我想你想要这个（替换了 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;
}

<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>