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

Посилання на файли CSS

Ви по суті гаряче посилання безпосередньо на файли CSS на Google.com. За допомогою параметрів URL-адреси ви визначаєте, які шрифти ви хочете, і які їх варіанти.

… 

Ідея: Ви можете уникнути зайвого мережевого запиту, відкривши цю таблицю стилів та скопіювавши та вставивши матеріали @ font-face у свою основну таблицю стилів. Але будьте обережні: Google робить щось, що агент агента користувача нюхає, щоб іноді подавати різні речі на різні пристрої за потреби. Ви не отримаєте від цього вигоди, якщо зробити це таким чином.

CSS

Потім у своєму CSS ви можете вказати ці нові шрифти за іменем на будь-якому елементі, яким ви хочете їх використовувати.

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

FontLoader

Ви можете використовувати JavaScript FontLoader замість посилання на CSS. Він має такі переваги, як управління спалахом нестильового тексту (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.