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

Кто-нибудь знает, как предварительно загрузить шрифт 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>

css preload typekit
person ComCool    schedule 26.02.2020    source источник
comment
Я сделал. И об этом ничего не сказано.   -  person ComCool    schedule 26.02.2020
comment
Сначала нужно сделать там проект.   -  person Manas Khandelwal    schedule 26.02.2020
comment
Я сделал, это не проблема здесь. МОЙ БОГ   -  person ComCool    schedule 26.02.2020
comment
Проверьте это: codepen.io/manaskhandelwal1/pen/WNvpEKY   -  person Manas Khandelwal    schedule 26.02.2020
comment
Да, с обычной ‹ссылкой работает... Но не с ‹ссылкой rel=preload...   -  person ComCool    schedule 26.02.2020
comment
Проверьте код ниже...   -  person Manas Khandelwal    schedule 26.02.2020
comment
<link rel="preload"... не работает, потому что Adobe не предоставила его вам, например.   -  person Manas Khandelwal    schedule 26.02.2020

Ответы (3)


arrow_upward
3
arrow_downward

Короткий ответ: вы должны загрузить таблицу стилей в конце элемента 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>
person monmonja    schedule 23.03.2020

arrow_upward
-3
arrow_downward

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

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

person Manas Khandelwal    schedule 26.02.2020
comment
Вот как использовать ‹link rel=preload href=use.typekit.net/dwg7avv.css as=style crossorigin› НЕ ‹link href=use.typekit.net/dwg7avv.css - person ComCool; 26.02.2020
comment
Когда мы делаем проект в Abobe, он говорит использовать: <link href="https://use.typekit.net/dwg7avv.css">. Проверьте, работает ли Codepen: codepen.io/manaskhandelwal1/pen/WNvpEKY - person Manas Khandelwal; 26.02.2020
comment
dwg7avv -› У всех по-разному. - person Manas Khandelwal; 26.02.2020
comment
Но здесь они говорят, что поддерживают предварительную загрузку blog.typekit. com/2017/09/05/улучшение производительности вашего веб-шрифта - person ComCool; 26.02.2020

arrow_upward
-3
arrow_downward

Это ошибка, у меня была такая же проблема, и теперь я сдаюсь: https://bugs.chromium.org/p/chromium/issues/detail?id=593267

Забавно то, что единственная причина, по которой я пытался использовать предварительную загрузку, заключалась в тесте хромированного маяка, который рекомендовал его мне.

А здесь картинка вроде предзагружена, но на самом деле не работает! введите здесь описание изображения

person LMC    schedule 21.08.2020