Проблема с Google-шрифтом при попытке загрузить его локально

Question

Недавно я решил загрузить свой шрифт локально для повышения производительности.Я пробовал несколько сценариев или решений, таких как webfont.js, но пару дней назад я обнаружил «google-webfonts-helper».

Это действительно интересный проект, и он размещен на github.По сути вы выбираете свой шрифт, скачиваете их и все.Пока все хорошо, за исключением одной проблемы: я не уверен, что она работает должным образом.

Итак, это мое усилие, допустим, я хочу использовать «open sans» в качестве шрифта.

Я в среде WordPress, поэтому я

1. захожу на сайт -> https://google -webfonts-helper.herokuapp.com /
2. скачайте папку с моими шрифтами и поместите в мою папку шрифтов (я в среде WordPress).
3. В прошлом и скопируйте css

CSS:

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v16-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v16-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v16-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v16-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v16-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

и мои шрифты находятся в папке:

/ public_html / wp-content / themes / myfolder / fonts

Все просто, за исключением того, что, когда я загружаю свой шрифт, тольконекоторые из них загружены:

И это самая проблемная часть, потому что ее действительно трудно отладить.

По сути, этозагружены только некоторые шрифты, а не все.

И я не нашел ни одной ошибки консоли, и они кажутся одинаковыми, поэтому было невозможно понять, что пошло не так.

Any thoughts

Answer 1

Я ожидаю, что основная проблема в том, что шрифт Open Sans недоступен для вашего терминала, на что ссылается код local. Даже если шрифт сохранен на вашем терминале, он будет доступен для страницы (локально) только в том случае, если он активирован в операционной системе терминала.

Вы не ошиблись в использовании ссылки local в своей ссылке, потому что это значительно сократит ваше время загрузки ... но только , если пользователь загрузил этот шрифт на свой персональный терминал. Похоже, что herokuapp также предполагает это как лучшую практику.

Что вы, вероятно, хотите сделать, - это указать сначала веб-сайт на локальные шрифты, а затем последовательно на файлы шрифтов, хранящиеся на вашем сервере. Вот так:

@font-face {
    font-family:'Open Sans';
    font-style:normal;
    font-weight:300;
    src: url('Open_Sans/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Light'), local('OpenSans-Light'),
         url('Open_Sans/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Open_Sans/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('Open_Sans/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
         url('Open_Sans/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('Open_Sans/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Это скажет браузеру пользователя сначала искать файл шрифта локально - и если ему не удастся найти соответствующий файл - затем искать файл на сервере вашего сайта. Браузер будет перебирать этот список по порядку, начиная с ссылки local в верхней части списка, а затем с помощью ссылок url в том порядке, в котором вы перечислили их в своем коде.

Браузер не загружает все файлов шрифтов. Я не уверен, кто из нас причастен к выбору «порядка загрузки», который сделали различные компании по разработке браузеров. Однако я сомневаюсь, что этот выбор был произвольным или своеобразным. Я предполагаю, что сначала он самый быстрый или самый совместимый; какой бы ни был самый логичный смысл. Я должен предположить, что он пропустит любой файл шрифта, который он считает несовместимым. Из-за этого вы заметите, что мой код выше включает варианты резервирования для максимальной совместимости браузера и файла шрифта. Я прокомментировал некоторые ярлыки, чтобы проиллюстрировать это.

Надеюсь, что это поможет вам.

Наконец, herokuapp потрясающий, я согласен.