CODEWITHSUNDEEP
font-faceamp-html
Pbinder
Pbinder

Reputation: 470

AMP: Custom font using font-face not working

I am trying to use a custom font using font-face in my AMP pages, but the font is not rendered. The console says "Font download timed out for icons".

@font-face {
  font-family: 'icons';
  src: url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
    content: "\e94e";
}
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

<amp-font layout="nodisplay"
  font-family="icons"
  timeout="2000"
  on-error-remove-class="icons-loading"
  on-error-add-class="icons-missing"
  on-load-remove-class="icons-loading"
  on-load-add-class="icons-loaded">
</amp-font>

<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>

The font is being fetched via HTTPS.

Any help will be strongly appreciated.

Thanks!

Upvotes: 0

Views: 2194

Answers (1)

Bachcha Singh
Bachcha Singh

Reputation: 3934

Here is working Url

Js on Head

 <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Css on Head

<style amp-custom>
    h1 {
      color: red;
    }
    @font-face {
    font-family: 'icomoont';
    src: url(https://www.fanaticguitars.com/download/icomoon.ttf) format('truetype');
  }
    .font {font-family: 'icomoont'; color:#f00;}
    span {font-size:25px;}

    [class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
    content: "\e94e";
}
  </style>

HTML

  <span>Hello Font!</span>
  <br>
  <span class="font">Hello Font!</span>
  <br>

  <span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>

Upvotes: 3

Related Questions