Как встроить шрифт с помощью генератора Fontsquirrel

Фрагмент сайта Font Squirrel
Фрагмент сайта Font Squirrel
В ста­тье «Эффек­тив­ный сайт неком­мер­че­ской орга­ни­за­ции: Веб-шриф­ты» мы рас­ска­за­ли о том, поче­му пра­виль­но подо­бран­ные шриф­ты очень важ­ны для сай­та про­ек­та. Дан­ный скрин­каст демон­стри­ру­ет как встро­ить уже име­ю­щий­ся шрифт фор­ма­та OpenType для исполь­зо­ва­ния на сай­те. Для демон­стра­ции пред­по­ла­га­ет­ся, что сайт рабо­та­ет на WordPress и исполь­зу­ет тему по умол­ча­нию – TwentyTwelve.

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

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

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

  • Исход­ный шрифт – в фор­ма­те OpenType – кон­вер­ти­ру­ет­ся в несколь­ко веб-фор­ма­тов с помо­щью гене­ра­то­ра [Fontsquirrel]. Полу­ча­е­мый в резуль­та­те .zip архив сохра­ня­ет­ся на ком­пью­те­ре.
  • После рас­па­ков­ки, фай­лы шриф­тов раз­ме­ща­ют­ся на сер­вер с помо­щью FTP про­грам­мы (напри­мер, бес­плат­ный кросс-плат­фор­мен­ный FTP-кли­ент [Filezilla]), в пап­ку сти­лей темы TwentyTwelve (стан­дарт­ный путь к пап­ке: пап­ка_уста­нов­ки_wordpress/wp-content/themes/twentytwelve/css/)
  • С помо­щью встро­ен­но­го редак­то­ра фай­лов WordPress редак­ти­ру­ет­ся файл темы (style.css) для раз­ме­ще­ния в нем дирек­ти­вы @font-face, под­гру­жа­ю­щей шриф­ты. Раз­ме­ща­е­мый код авто­ма­ти­че­ски созда­ет­ся гене­ра­то­ром Fontsquirrel и содер­жит­ся в фай­ле stylesheet.css ([подроб­нее о при­ме­не­нии син­так­си­са @font-face].
  • С помо­щью встро­ен­но­го редак­то­ра фай­лов WordPress ука­зы­ва­ют­ся пра­ви­ла CSS, при­ме­ня­ю­щие под­гру­жен­ный шрифт к эле­мен­там сай­та, в част­но­сти, основ­но­му заго­лов­ку (h1).