Как загрузить большое количество веб-шрифтов Google?

Question

Есть ли лучший способ загрузить большое количество веб-шрифтов Google на одну страницу?

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

Не могу не думать, что есть лучший способ загрузки нескольких шрифтов. После размещения 2 или 3 в Google «Коллекция шрифтов» загрузка страницы, по-видимому, довольно высока.

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

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

Answer 1

Я не знаю, сработает ли это для вас, но Google Web Fonts предоставляет метод JavaScript, который вы можете указать, когда использовать шрифт.(Может быть, загрузить шрифты после завершения загрузки страницы?)

Попробуйте демо .

Пример (Использование шрифта Glass Antiqua ):

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Glass+Antiqua::latin' ] }
  };
  var YOURFUNCTION = function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  };

  //Maybe 10 seconds later?
  setTimeout(YOURFUNCTION, 10000);

  //Document Ready?
  $("body").ready(YOURFUNCTION);
</script>

Демонстрация: http://jsfiddle.net/DerekL/bkV7E/