Как встроить шрифт с помощью из библиотеки шрифтов Google Webfonts

Фрагмент скринкаста
Фрагмент скринкаста
Дан­ный крин­каст демон­стри­ру­ет как встро­ить шрифт из биб­лио­те­ки шриф­тов [Google Webfonts]. Если вы не уве­ре­ны, что ваше­му сай­ту нуж­ны какие-то осо­бен­ные шриф­ты, реко­мен­ду­ем озна­ко­мить­ся со ста­тьей: «Эффек­тив­ный сайт неком­мер­че­ской орга­ни­за­ции. Веб-шриф­ты»

Для демон­стра­ции пред­по­ла­га­ет­ся, что сайт рабо­та­ет на WordPress и исполь­зу­ет тему по умол­ча­нию – TwentyTwelve. Перед при­ме­не­ни­ем иллю­стри­ру­е­мо­го алго­рит­ма к дру­гим темам, убе­ди­тесь, что они не исполь­зу­ют какой-либо дру­гой меха­низм встра­и­ва­ния шриф­тов, напри­мер, пря­мое встра­и­ва­ние с помо­щью дирек­ти­вы font-face или [Cufon], ина­че воз­мож­ны ошиб­ки из-за кон­флик­ту­ю­щих тех­но­ло­гий.

Для успеш­но­го при­ме­не­ния при­ве­ден­но­го в скрин­ка­сте алго­рит­ма необ­хо­ди­мо базо­вое зна­ком­ство с язы­ком сти­лей [CSS]. Как мини­мум, вы долж­ны знать, как кас­кад и струк­ту­ра доку­мен­та вли­я­ют на при­ме­не­ние пра­вил сти­лей, а так­же как с помо­щью CSS зада­ют­ся пара­мет­ры тек­ста – шрифт, раз­мер кег­ля, стиль, насы­щен­ность и т.п. Если эти осно­вы вам совсем незна­ко­мы – реко­мен­ду­ем взять [несколь­ко эле­мен­тар­ных онлайн-уро­ков].

Скрин­каст иллю­стри­ру­ет сле­ду­ю­щую после­до­ва­тель­ность дей­ствий:

  1. В биб­лио­те­ке [Google Webfonts] выби­ра­ет­ся нуж­ный шрифт.
  2. С помо­щью интер­фей­са Quick-use уста­нав­ли­ва­ет­ся необ­хо­ди­мый набор сим­во­лов и гене­ри­ру­ет­ся код, под­гру­жа­ю­щий шрифт.
  3. Код (на осно­ва­нии дирек­ти­вы @import) копи­ру­ет­ся в файл сти­лей темы (style.css) с помо­щью встро­ен­но­го редак­то­ра фай­лов WordPress. Дирек­ти­ва импорт долж­на рас­по­ла­гать­ся самой пер­вой, преж­де всех дру­гих пра­вил в этом фай­ле. Сер­вис Google предо­став­ля­ет так­же аль­тер­на­тив­ные вари­ан­ты внед­ре­ния кода, под­гру­жа­ю­ще­го шрифт: тэг <link> для раз­ме­ще­ния в заглав­ной части шаб­ло­на (меж­ду тэга­ми <head></head>) и спо­соб с исполь­зо­ва­ни­ем JavaScript. При­ме­ры исполь­зо­ва­ния этих вари­ан­тов при­во­дят­ся в [спра­воч­ной систе­ме Google](https://developers.google.com/webfonts/docs/getting_started).
  4. С помо­щью встро­ен­но­го редак­то­ра фай­лов WordPress ука­зы­ва­ют­ся пра­ви­ла CSS, при­ме­ня­ю­щие под­гру­жен­ный шрифт к эле­мен­там сай­та, в част­но­сти, основ­но­му заго­лов­ку (h1).