Подключение google fonts. Как правильно добавить шрифты Google Web Fonts в WordPress тему. Преимущества использования Google Font API
25 мая 2015 в 18:06Google WebFonts и FontFaceObserver. Используем сторонние шрифты на своем веб-сайте
- CSS ,
- JavaScript
WebFonts. История
WebFonts - это технология использования сторонних шрифтов на своей веб-странице. Один из примеров:Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.
В современном интернете веб-шрифты - это давно устоявшаяся вещь. На разных сайтах мы можем использовать разного рода шрифты, которые, в свою очередь, не включены в поставку той или иной операционной системы, однако есть нежелательный побочный эффект, о котором мы сегодня и поговорим.
Форматы файлов
Для подключения шрифтов используется программная вставка в CSS, так называемое @-правило. Итак, в простейшей форме @font-face - это такая декларация. Выглядит она следующим образом: /* Объявляем шрифт */
@font-face {
font-family: "Имя шрифта";
src: url("путь/до/него");
}
/* Применяем шрифт */
p {
font-family: "Имя шрифта", Arial;
}
TTF или OTF - привычный нам файл шрифта, но подгружаемый с сервера на время просмотра сайта;
WOFF - незащищенный архив исходника OTF или TTF, пожалуй, самый важный формат, который поддерживают большинство популярных браузеров, а файлы в WOFF обычно 2–2,5 раза легче, чем исходные;
EOT - внедряемый TT OpenType архив, имеющий механизмы защиты, нужен для поддержки старых браузеров Internet Explorer (начиная с IE8, кроме TrueType кривых, поддерживаются и PostScript);
SVG - для поддержки браузера Safari.
Подготовленные к внедрению (@font-face) на сайт шрифты на сегодняшний день должны быть сразу в нескольких форматах. Вы поняли, что существуют некоторые расхождения, так же как существует не один вид операционных систем. Форматов шрифтов достаточно много, но конкретный будет работать только в конкретном браузере. Что же касается этих самых форматов, отчего их так много нужно указывать при подключении, то они нужны для кроссбраузерной поддержки сайта.
@font-face {
font-family: "Имя_шрифта_любое";
src: url("Имя_файла_шрифта.eot");
src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"),
url("Имя_файла_шрифта.woff") format("woff"),
url("Имя_файла_шрифта.ttf") format("truetype"),
url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Ежели вы хотите использовать вместо файла зашифрованный код, в этом случае к нам на помощь приходит base64, который работает по тому же принципу и с изображениями, однако для старого IE base64 не обрабатывается.
@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); } @font-face { font-family: "Имя_шрифта_любое"; src: url(data:font/woff;charset=utf-8;base64,ДАННЫЕ) format("woff"), url(data:font/truetype;charset=utf-8;base64,ДАННЫЕ) format("truetype"), url("Имя_файла_шрифта.svg#Имя_файла_шрифта") format("svg"); font-weight: normal; font-style: normal; }
Embedded OpenType?
Как вы могли заметить, то подключаемые шрифты для IE имеют строчку с таким параметром:Src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype")
В классическом варианте мы должны были указать с вами именно так:
Src: url("Имя_файла_шрифта.eot") format("embedded-opentype")
Но при добавлении символа "?" после формата шрифта мы принудительно указываем браузеру не читать последующее указание - format("embedded-opentype"). Internet Explorer поддерживает вложение шрифтов через так называемый фирменный Embedded OpenType стандарт, начиная с версии IE 4.0. Он использует метод управления цифровыми правами для предотвращения копирования шрифтов, которые распространяются по лицензии.
Что, если не поддерживается шрифт в браузере?
Давным-давно уже были придуманы обходные пути, так называемые «костыли» для отображения того или иного шрифта. Бывают случаи, когда шрифт был разработан только в формате SVG, или же только в формате TTF.1. В стародавние времена разработчики подключали изображение, которое в свою очередь было текстом, набранным в визуальном редакторе. Однако сейчас это считается дурным тоном, ибо поддержка довольна затруднительна (нужно снова открывать редактор, чтобы изменить текст картинки), соответственно пользователь не может скопировать текст с картинки.
2. Также распространенным являлось использование flash-решений.
3. Другим решением является использование Javascript, чтобы заменить текст с VML (для Internet Explorer) или SVG (для всех остальных браузеров).
Какие проблемы еще могут возникнуть?
Браузер будет пытаться синхронизировать подгрузку шрифта, он будет стараться спрятать текст, то есть сделать его невидимым, пока шрифт не был подгружен. Этот эффект называют FOIT, эффект «белой вспышки».Эффект вспышки
Эффект FOIT в таких браузерах, как Safari, Chrome, Opera, Firefox имеет тенденцию скрывать текст в течении максимум 30 секунд перед отказом в получении шрифта, после чего устанавливается шрифт по умолчанию.Пример того, как загружается шрифт:
И все-таки, 2.7 секунды - это долгое время!
Что же можно сделать?
Изначально подход заключался в том, чтобы включить преобразование файлов шрифта в данные URIs так, чтобы те шрифты могли быть включены непосредственно в определения семейства шрифтов в файле CSS. Загружая этот файл CSS асинхронным способом, можно гарантировать, что браузер немедленно отдаст текст в странице, используя кастомные шрифты, а новые шрифты применялись бы, как только CSS был бы загружен.Однако, в любом эксперименте есть побочный эффект.
Изначально Bram Stein использовал кастомный шрифт, но после того, как его шрифт был подгружен, происходило «мерцание», в примере на 0.7 секунде:
Короче говоря, мерцание происходит тогда, когда браузер пытается отобразить шрифт из font-family и применить его в html. Шрифт, определенный в @font-face декларации, который не был еще загружен.
Bram Stein показал, как правильно подключать шрифты, он разработал скрипт, альтернативу от google для асинхронной подгрузки шрифтов, это скрипт - FontFaceObserver.
Пробуем
Анализ
Стандартное подключение от GoogleЧестно говоря, используя больше одного шрифта на сайте можно конкретно замедлить скорость загрузки страницы сайта, тем самым увеличивая общее время загрузки. Google Fonts API позволяет быстро добавить шрифт на сайт, используя генератор шрифтов, тем самым быстрее проектировать свой сайт. Однако, нужно помнить об эффекте FOIT. Общее время загрузки - 322 мс.
Web Font Loader от Google
Web Font Loader - JavaScript библиотека для расширенной работы с API, библиотека, которая дает нам больше контроля над подгрузкой шрифта, чем стандартный API Google Fonts. Скрипт позволяет нам использовать множество шрифтов, подгружая их последовательно или асинхронно. В отличие от стандартного подключения, на слабых соединениях показывается текст со стандартным шрифтом, до тех пор, пока не будет загружен шрифт.
Общее время загрузки: 1132 мс
FontFaceObserver
FontFaceObserver - это JavaScript библиотека (5кб), так называемый подгрузчик совместимый с любым веб-обслуживанием шрифта. Скрипт позволяет уведомить нас о том, загрузился ли шрифт или нет, позволяет отслеживать событие после загрузки и до загрузки шрифта. Общее время загрузки: 159 мс
Использование скрипта.
Конечно, есть разные плагины для того, чтобы использовать шрифты Google Web Fonts на своем WordPress сайте, однако если вы разрабатываете свою собственную тему, то, возможно, вам понадобится тесно связать с ней выбранную вами типографику, обходя плагины. Ниже мы покажем, как использовать Google Web Fonts в своей теме.
Для начала давайте перейдем к сайту Google Web Fonts и выберем шрифт, который нам необходимо применить в теме. С помощью специальных инструментов, расположенных с левой стороны, можно сузить область поиска, поскольку шрифтов действительно много. Я знал, что мне требуется жирный serif шрифт для заголовков и названия блога, потому я выбрал serif в выпадающем меню Categories и затем переместил слайдер Thickness (толщина) вправо.
В итоге 617 предложенных мне вариантов плавно отсеялись до 5. У вас есть довольно много опций, чтобы выполнить предварительный просмотр шрифтов – вы можете посмотреть, как будет выглядеть слово, предложение, абзац текста или постер в выбранном шрифте. Вы можете выбрать предварительно заданный текст, можете задать свой собственный текст, выбрать необходимый размер шрифта.
Как только вы нашли шрифт, который вы желаете использовать на своем сайте, просто нажмите на кнопку Add to Collection.
Вы можете добавить в свою коллекцию десятки шрифтов. Однако это требуется не всегда. Если вы можете это сделать, это еще не значит, что вы должны это делать. Попытайтесь ограничить себя максимум тремя шрифтами. А еще лучше двумя. По причинам производительности мне до сих пор нравится использовать устаревший веб-безопасный шрифт для основного текста сайта и сохранять веб-шрифты для заголовков и других элементов, которые требуют специальной выразительности или внимания к себе. Побеспокойтесь по поводу четкости ваших шрифтов – не стоит использовать броский шрифт, если ваши посетители не смогут разобрать, что написано.
Когда вы добавите свои шрифты в коллекцию, вы увидите их в синей секции в нижней части сайта. Как только в вашей коллекции появятся шрифты, которые вы хотите использовать, просто щелкните по кнопке Use.
После этого вы перейдете к экрану, на котором будут представлена инструкция, состоящая из четырех шагов. Из нее вы узнаете, как использовать шрифты. Если вы желаете скачать выбранные шрифты для использования их в графическом редакторе, чтобы оценить их или сделать привлекательный скриншот screenshot.png для вашей темы, то вам достаточно щелкнуть по кнопке Download Fonts в самом верху страницы. Если вы просто хотите использовать шрифт в своей теме, то тогда вам не нужно скачивать его к себе на компьютер.
На первом шаге вы можете выбрать стили и толщину подключаемого шрифта. На втором шаге вы можете выбрать набор символов, который вы желаете подключить. Также вы можете оценить, как ваша коллекция шрифтов отразится на скорости загрузки страниц.
Теперь мы переходим к третьему шагу, который уже не такой простой, как предыдущие. На третьем шаге мы получаем код, который необходимо добавить к нашим сайтам – три разных варианта. Выбираем вариант Standard – однако мы несколько отклонимся от инструкций Google, чтобы поддержать устоявшиеся методы добавления стилей к WordPress темам. В коде для стандартного варианта копируем только URL, который указан как href атрибут для тега link.
Затем открываем файл темы functions.php. Мы создадим функцию для того, чтобы загрузить CSS, который мы будем использовать в нашей теме:
Function ggl_load_styles() { }
Видите ggl префикс у моей функции? Это одна из успешных практик WordPress. Всегда добавляйте префикс к именам ваших функций в WordPress, чтобы снизить риск возникновения конфликтов с другими функциями в вашей теме, дочерней теме или плагинах.
Теперь в этой функции нам нужно зарегистрировать нашу таблицу стилей, полученную от Google:
Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); } }
Мы используем функцию wp_register_style. Первый аргумент – это дескриптор, т.е. сокращение, которое мы можем использовать для обращения к этой стилевой таблице в дальнейшем в нашем коде. Второй аргумент – это путь к файлу. Мы используем URL, который мы получили на третьем шаге Google-инструкций.
Далее мы подключаем нашу основную стилевую таблицу для нашей темы. Надеюсь, вы не разместили тег link в разделе head вашего файла header.php? Если так, то вернитесь к файлу и удалите этот код. Затем подключите стилевую таблицу в файле functions.php:
Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl", get_stylesheet_uri(), array("googleFont")); } }
Мы используем функцию wp_enqueue_style. Она имеет те же самые аргументы, что и wp_register_style. Сначала мы привязываем к нашей стилевой таблице дескриптор. Затем получаем путь к нашей таблице стилей. К счастью, в WordPress получить путь можно через функцию get_stylesheet_uri(). После чего мы указываем зависимости. Наш файл style.css зависит от стилевой таблицы Google Web Fonts.
Наконец, мы используем хук wp_enqueue_scripts для вызова нашей функции:
Function ggl_load_styles() { if (!is_admin()) { wp_register_style("googleFont", "http://fonts.googleapis.com/css?family=Holtwood+One+SC|Rouge+Script"); wp_enqueue_style("ggl", get_stylesheet_uri(), array("googleFont")); } } add_action("wp_enqueue_scripts", "ggl_load_styles");
С файлом functions.php покончено. Теперь нам осталось сделать последний шаг, чтобы использовать выбранный шрифт. Четвертый шаг в инструкциях Google показывает, какие значения мы должны передать к свойству font-family для использования нашего шрифта. Я хочу сделать все мои заголовки шрифтом Holtwood One SC:
H1, h2, h3, h4, h5, h6 { font-family: "Holtwood One SC", serif; }
А описание сайта хочу сделать шрифтом Rouge Script:
Site-description { font-family: "Rouge Script", cursive; }
Все! Больше ничего делать не требуется! Вы добавили шрифты Google Web Fonts к своей теме WordPress. Используйте их ответственно!
Приветствую вас уважаемые читатели. Сегодня мы поговорим о google шрифтах (google web fonts), от том как их скачивать и подключать к сайту.
Идем на сайт www.google.com/fonts/ , в фильтре справа выбираем: 1. нужную категорию, 2. при необходимости сортируем их и 3. выбираем нужный нам язык (если нужен русский шрифт в меню слева выберите Cyrillik ).
Итак мы выбрали шрифт, теперь нужно выбрать его начертания, для этого разверните панельку снизу (Open selection drawer ) и перейдите во вкладку CUSTOMIZE и выберите нужные вам начертания и языки.
Для того чтобы скачать нажмите на кнопку donwload.
Подключение скачанного шрифта
Скопируйте содержащиеся в архиве шрифты в папку /fonts, которая должна лежать в той-же директории, что и папка /css вашего HTML сайта.
Стандартное подключение скачанных шрифтов выглядит так
@font-face { font-family: "Имя_шрифта_любое"; src: url("Имя_файла_шрифта.eot"); src: url("Имя_файла_шрифта.eot?#iefix") format("embedded-opentype"), url("Имя_файла_шрифта.woff") format("woff"), url("Имя_файла_шрифта.ttf") format("truetype"), url("Имя_файла_шрифта.svg#DSNoteRegular") format("svg"); font-weight: normal; font-style: normal; }
В моем случае подключение будет выглядеть так
/* Код для подключения шрифта в /css/style.css */ @font-face { font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font-style: normal; font-weight: normal; }
Для того что бы подключить выбранный вами шрифт к сайту перейдите на вкладку EMBED , там вы увидите 2 способа подключения:
1. STANDARD
Данный код нужно добавить в секцию
вашего HTML-документа.2. @IMPORT
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");
Важно. В не зависимости от способа подключения, для определения этих семейств используйте следующие CSS правила: font-family: ‘Roboto’, sans-serif; об этом будет еще ниже.
Узнавать обо всем самостоятельно - непросто, но очень интересно. Если у вас есть хотя бы поверхностное представление о том, как работает сайт, то для реализации своего проекта лучше заниматься им самостоятельно. При этом вы не просто сэкономите кучу денег, но и узнаете много «фишек», секретов и т. д. Использование шрифтов Google обычно не привлекает внимание, хотя благодаря им блог может стать в разы интереснее.
Сервис
Довольно давно на просторах интернета появился крупный сервис веб-шрифтов. Он был разработан компанией Google. Пользователи могли использовать его бесплатно. Несмотря на то что настройка подобного типа не считается суперсложной, все равно находились такие люди, которые делали ошибки и не могли справиться с сервисом.
Для этого специально был разработан простой дизайн. Теперь работа со шрифтами Google Fonts стала проще, а количество посетителей возросло. Расширилась и библиотека. В прошлом году состоялся редизайн сервиса, который собрал много положительных отзывов. Теперь людям стало легче подключать шрифты к своим сайтам и просматривать их.
Внешний вид
Итак, для тех, кто ни разу не был на сайте со старым дизайном, нужно составить общую картину изменений. В прошлом сервис выглядел довольно массивно. Везде имелись толстые рамки, броские кнопки голубого цвета, графика была не самого высокого разрешения. Все это значительно влияло на посетителя.
Теперь же разработчики сделали упор на Material Design. Все приобрело утонченные черты. Внешний вид стал «легче». Стала заметна тонкая анимация, интерактивность. Ничего больше не отвлекает внимание от выбора нужного шрифта Google Fonts.
Появилась удобная адаптация ресурса под мобильные устройства. Конечно, такое изменение не сильно заметно на фоне новшеств, но с учетом багов предыдущей версии станет для заядлых пользователей «манной небесной».
Возможность
Частенько подобным сервисом пользуются дизайнеры. Несмотря на их опыт и профессионализм, они тоже работают с визуализацией. Редизайн подарил больше подобных возможностей, которые позволяли бы заранее сочетать то, что нужно будет позже реализовать в своем проекте.
Поэтому проблема с тем, как сочетается один шрифт с другим цветом и третьим фоном, исчезла. На сайт компания добавила больше инструментов и палитру с универсальными тонами, которые позволили бы экспериментировать и узнавать, как тот или иной шрифт будет выглядеть в определенном цвете.
Избранные
Сервис со шрифтами Google Fonts предоставляет пользователям использование избранных вариантов. В специальной вкладке собран набор стилей, которые разработчик рекомендует к использованию. Эти коллекции выделяются среди остальных. Они разработаны специалистами из Google и сторонних агентств. Большинство из них имеют определенный стиль и особую философию.
Просмотр
Одно из важных изменений коснулось непосредственно выбора шрифтов. Имеется в виду, что ранее пользователь видел перед собой некий рисунок с дополнительными кнопками и крупной голубой, которая добавляла шрифт в коллекцию. В целом и такой вариант выглядел неплохо, но не всегда бокс имел достаточно хорошее разрешение картинки со стилем, а поэтому определить однозначно, как будет выглядеть шрифт, было сложно.
Были вопросы и к этим дополнительным кнопкам, о которых мало что было известно на первый взгляд. Нужно было либо наводить на них, либо использовать. Теперь стало все более или менее понятно. Появились дополнительные возможности:
- Выбор определенного предложения, параграфа или собственного текстового элемента.
- Эксперименты с насыщенностью шрифта.
- Быстрая настройка размеров с помощью слайдера.
Кстати, изменение размеров шрифтов Google стало адаптивнее, поскольку менялся только один пример, а не все на странице. В старой версии пользователей могло переносить с одного края страницы на другой, а в новой вы просто остаетесь на том примере, который регулируете.
Подключение
Если вы готовы использовать этот сервис, то можете попробовать подключить шрифты на свой ресурс. Сам процесс получения ссылки универсален. Проблемы могут возникнуть в зависимости от вашей CMS-системы. Каждая использует свои способы. Поэтому для разных проектов придется подбирать отдельные варианты.
Мы же рассмотрим, как получить ссылку для подключения шрифтов Google. Нужно зайти на официальный сайт Google Fonts. Там вы просматриваете каталог стилей и выбираете тот, который больше всего подходит. Для этого рядом с ним нажимаете «плюсик». После шрифт будет добавлен в специальный блок в самом низу страницы.
Нажимаете на этот блок и далее настраиваете его. Тут можно выбирать начертания и нужный алфавит. Если вам нужны шрифты Google кириллицы, тогда отмечаете строку Cyrillic. После будет сформирована ссылка. Её можно найти в этом же окошке на вкладке Embed. Достаточно просто скопировать её либо же использовать полный код HTML.
Обычно в настройках сайта есть установка шрифтов и цвета. Там есть стандартные варианты, а можно добавить расширенные. В них находится отдельный вариант для Google Fonts. Если у вас тогда нужно загружать шрифты через плагин Supreme Google Webfonts.
Популярные варианты
Сложно, конечно, судить, какие стили лучше, особенно для разных тематик сайта. При создании своего сайта помните, что он должен нравиться не вам, а вашей аудитории. Поэтому лучше присмотреться к сайтам-конкурентам.
Обычно для коммерческих ресурсов никто не заморачивается по поводу стилей. Ведь если вы видите шрифт в Google Chrome в интернет-магазине, вы вряд ли будете зацикливать на нем внимание. А вот если перед вами блог, то, скорее всего, что-то вам может понравиться, а что-то, наоборот, будет раздражать.
Google Fonts подготовил много коллекций, в которых есть и популярные стили. К примеру, Lobster любят использовать для отдельных блоков в тексте. Его трудно читать, если вся статья написана таким жирным курсивом. Но неплохо смотрятся вставки и цитаты.
Bad Script - это тоже вариант для блогов. Курсивный тип тяжелый для чтения больших массивов текста, а вот выделить главную мысль им можно. Стиль имитирует рукописный почерк. Jura normal 400 - интересный вариант для кириллицы. Автор утверждает, что это евростиль из семейства "Санс-Сериф". Выглядит и вправду очень неплохо и имеет несколько вариаций.
Шрифты играют огромную роль в оформлении сайта. Один и тот же текст, написанный разными шрифтами может производить на человека прямо противоположные впечатления.
Смотрите сами:
Одни шрифты выглядят более убедительно, другие - более интригующе.
Но как подключить любые шрифты к сайту и применять их где захочется?
В этой статье я покажу вам 3 способа , с помощью которых вы сможете подключить любые, самые разнообразные и нестандартные шрифты на свой сайт. И неважно, каким CMS вы пользуетесь: WordPress, Joomla, Drupal или Open Cart.
Вы убедитесь, что в подключении шрифтов к сайту нет ничего сложного.
Вы узнаете:
Способ №1. Быстрое подключение шрифтов к сайту на WordPress (cложность: ⭐ ⭐ ⭐)
Если на ваш сайт установлена премиальная тема оформления - вы можете подключить шрифты за 2 минуты.
Например:
Вы хотите изменить шрифт заголовков своих статей. Для этого:
1. В админ-панели перейдите в раздел Theme Options. В зависимости от вашего шаблона этот раздел может называться немного по-другому, но смысл всегда один - "настройки темы".
2. Перейдите в раздел Typography (типография).
3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):
Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.
Способ №2. Используйте всю силу Google Fonts
(cложность: ⭐ ⭐ ⭐ ⭐)
Вы когда-нибудь слышали про Google Fonts? Если вкратце - это сервис, с помощью которого вы можете подключить более 700 шрифтов на свой сайт.
Шаг 1. Перейдите на официальный сайта сервиса.
Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:
Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.
Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку "+":
Вы можете добавить любые шрифты нажимая на значок "+".
Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:
Перейдя во вкладку Customize вы можете выбрать начертания и язык. Касательно начертаний, советую выбрать стандартный комплект - нормальный (400), курсивный (400 italic), жирный (700) и курсивно-жирный (bold 700 italic):
Но если вам нужно только жирное начертание (для заголовков), выберите только ее.
Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.
Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.
Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую "@import" и вставьте на первую строчку CSS файла вашего сайта:
Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/"вашатема"/css/... В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:
Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌
Так как сначала должны загрузиться шрифты, только потом все остальное - размещайте код подключения шрифта в самое начало CSS файла.
Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.
Например:
Для придания шрифта Roboto всем абзацам я напишу следующее: p { font-family: Roboto;}
Способ №3. Кастомное подключение шрифтов с помощью CSS (cложность: ⭐ ⭐ ⭐ ⭐ ⭐)
Если вы достаточно квалифицированы, лучше всего самостоятельно подключить шрифты через CSS. В этом случае шрифты будут находится на вашем сервере в специальной папке. Но для начала нужно их где-то раздобыть.
Где взять веб-шрифты для сайта
А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?
Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.
Шаг 1. Перейдите на официальный сайт сервиса
Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.
Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.
Например, если есть 4 начертания, будет написано 4 Styles:
Обозначение начертаний шрифтов - нормальный (400/regular), курсивный (italic), жирный (700/bold), жирный курсивный (700 italic).
Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.
Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.
Для подключения шрифтов используем @Font-face
Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.
Плюсы:
- Через CSS вы можете подключать шрифты любых форматов: ttf, otf, woff, svg.
- Файлы шрифтов будут находится на вашем сервере - вы не будете зависеть от сторонних сервисов.
Минусы:
- Для правильного подключения шрифта для каждого начертания нужно прописывать отдельный код.
- Не зная CSS можно легко запутаться.
Вы можете просто скопировать мой готовый код и где нужно указать свои значения.
Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.
Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.
Шаг 2. Пропишите в самом начале CSS файла следующую запись:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont.eot");
src: url("../fonts/WebFont.eot?iefix") format("eot"),
url("../fonts/WebFont.woff") format("woff"),
url("../fonts/WebFont.ttf") format("truetype"),
url("../fonts/WebFont.svg#webfont") format("svg");
font-weight: normal;
font-style: normal;
}
Где MyWebFont - это название шрифта, а значение свойства src (данные в скобках в кавычках) - их месторасположение (относительные ссылки). Нам нужно указать каждое начертание отдельно.
Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.
Шаг 3. При подключении курсивного начертания, пропишите следующее:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic.eot");
src: url("../fonts/WebFont-Italic.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic.woff") format("woff"),
url("../fonts/WebFont-Italic.ttf") format("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") format("svg");
font-weight: normal;
font-style: italic;
}
Где все то же самое, только свойству font-style мы придали значение italic.
Шаг 4. Для подключения жирного начертания, добавьте следующий код:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url("../fonts/WebFont-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Bold.woff") format("woff"),
url("../fonts/WebFont-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: normal;
}
Где свойству font-weight мы задали значение bold.
Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.
Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:
@font-face{
font-family: "MyWebFont";
src: url("../fonts/WebFont-Italic-Bold.eot");
src: url("../fonts/WebFont-Italic-Bold.eot?iefix") format("eot"),
url("../fonts/WebFont-Italic-Bold.woff") format("woff"),
url("../fonts/WebFont-Italic-Bold.ttf") format("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") format("svg");
font-weight: bold;
font-style: italic;
}
Ну вот и все:) Только что вы подключили 4 начертания шрифта на свой сайт.
Но есть одна ремарка - данное подключение шрифтов будет некоректно отображаться в браузере Internet Explorer 8. Утешает то, что их осталось совсем мало.
Как подключать шрифты для сайтов на разных CMS
Неважно, на каком движке ваш сайт (WordPress, Joomla, Drupal, Opencart) - если у вас есть доступ к CSS файлу, вы можете подключить шрифты как через Google Fonts, так и закачав их на свой сервер через Fontsquirrel.
Ну вот и все. Если вы считаете, что эта статья может быть полезна другим вебмастерам - поделитесь ею в социальных сетях.
А также:
Подписывайтесь на мою рассылку , чтобы не пропустить полезные и интересные публикации на блоге.
