Предварительная загрузка шрифта typekit css - PullRequest
Новая
       40

Предварительная загрузка шрифта typekit css

0 голосов
/ 26 февраля 2020

Кто-нибудь знает, как предварительно загрузить шрифт typekit? Прямо сейчас мой вычисляемый шрифт - Ariel, и я получаю ошибку:

Ресурс https://use.typekit.net/dwg7avv.css был предварительно загружен с использованием предварительной загрузки ссылки, но не использовался в течение нескольких секунд после события загрузки окна , Убедитесь, что оно имеет соответствующее значение as и преднамеренно загружено.

Шрифт работает, если я выполняю обычный импорт. 

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>font</title>

  <style>
    body {
      font-family: proxima-nova, sans-serif;
      font-style: normal;
      font-weight: 100;
    }
  </style>
  <link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style" crossorigin>
</head>

<body>
  This is my font.
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Короткий ответ, вы должны загрузить таблицу стилей в конце элемента head.

Для объяснения причин, вы можете проверить документацию из mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

Так что с вашим примером это должно быть похоже: 

<head>
  <link rel="preload" href="https://use.typekit.net/dwg7avv.css" as="style">
  <link rel="preload" href="main.js" as="script">
  ...
  <link rel="stylesheet" href="https://use.typekit.net/dwg7avv.css">
</head>
0 голосов
/ 26 февраля 2020

Используйте этот код: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>font</title>
  <link href="https://use.typekit.net/dwg7avv.css">
  <style>
    body {
      font-family: proxima-nova, sans-serif;
      font-style: normal;
      font-weight: 100;
    }
  </style>
</head>

<body>
  This is my font.
</body>
</html>

Проверьте живой код здесь: https://codepen.io/manaskhandelwal1/pen/WNvpEKY

Примечание: Это будет работать, только если вы использовали правильную ссылку здесь: <link href="https://use.typekit.net/dwg7avv.css">.

...