AMP: пользовательский шрифт с использованием font-face не работает - PullRequest
Новая
       7

AMP: пользовательский шрифт с использованием font-face не работает

0 голосов
/ 30 мая 2018

Я пытаюсь использовать собственный шрифт с использованием font-face на моих страницах AMP, но шрифт не отображается.Консоль говорит: «Время загрузки шрифта для значков истекло». 

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

Шрифт загружается через HTTPS.

Любая помощь будет принята с благодарностью.

Спасибо!

1 Ответ

0 голосов
/ 31 мая 2018

Здесь работает Url

JS на голове 

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

Css на голове 

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