Удобная загрузка веб шрифтов

Как добавить на страницу свой шрифт?

Обычно, когда мы хотим добавить на страницу кастомный шрифт, то используется @font-face. Шрифты при этом как правило грузятся либо с того же сервера, что и сайт, тогда ссылка на файле указывается внутри @font-face. Либо мы используем что-то вроде Google Fonts, тогда гугл все делает за нас.

Но как при этом узнать загрузился ли шрифт, например? А никак.

Так как же узнать когда загрузился кастомный шрифт?

Можно использовать библиотеку Web Font Loader. Она позволяет контролировать загрузку шрифтов и генерирует ряд событий, например при загрузке или ошибке загрузке какого-либо шрифта. В дополнение, Web Font Loader просто удобно использовать для управления кастомными шрифтами.

Простейшая конфигурация библиотеки:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Итак, что мы здесь сделали: подключили нашу библиотеку и загрузили два шрифта из Google Fonts. Вроде бы ничего особенного, но!

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

WebFontConfig = {
  loading: function() {},
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}
};

Из названия функций и так все понятно, объяснять не буду. Если что - есть документация. WebFontConfig - просто глобальный объект.

Помимо этого в процессе загрузки тегу html добавляется ряд классов:

.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive

Делают они то же самое, просто это позволяет гораздо проще управлять отображением страницы во время загрузки, например показывать текст другим шрифтом или показывать какую-то заставку.

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

WebFontConfig = {
  custom: {
    families: ['My Font', 'My Other Font:n4,i4,n7'],
    urls: ['/fonts.css']
  }
};

В файле fonts.css как обычно указываем @font-face. И все будет работать.

Помимо этого, библиотека поддерживает еще ряд сервисов по доставке шрфитов, а именно: Fontdeck, Fonts.com, Google, Typekit.