Основы Google Font API - CSS-хитрости

Ссылка на файлы CSS

По сути, вы выполняете прямую ссылку на файлы CSS на Google.com. С помощью параметров URL-адреса вы можете указать, какие шрифты вам нужны и какие варианты этих шрифтов.

… 

Идея: вы можете избежать лишнего сетевого запроса, открыв эту таблицу стилей и скопировав и вставив материал @ font-face в свою основную таблицу стилей. Но будьте осторожны: Google выполняет некоторые функции обнюхивания User Agent, чтобы иногда при необходимости обслуживать разные вещи на разных устройствах. Вы не получите от этого никакой пользы, если будете делать это таким образом.

CSS

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

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Вы можете использовать JavaScript FontLoader вместо ссылки на CSS. У него есть преимущества, такие как управление Flash с нестилированным текстом (FOUT), а также недостатки, такие как тот факт, что шрифты не загружаются для пользователей с отключенным JavaScript.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Эти имена классов, например, .wf-loadingприменяются к элементу. Обратите внимание, когда шрифты «загружаются», вы можете использовать это имя класса, чтобы скрыть текст. Затем, когда они будут показаны, снова сделайте их видимыми. Так контролируется FOUT.