Хостинг от Макхост

Google fonts — шрифты для сайта. Пример по подключению новых шрифтов

Автор: Евгений Несмелов
подключить шрифт css, подключить google шрифты

Существует способ как можно подключить google fonts шрифты для сайта с помощью сервиса от самого гугла. В этой статье разберем все по порядку. Удобный способ, подключить один из предлагаемых шрифтов для сайта, тем самым сделать его еще более привлекательным.

к оглавлению ↑

Как подключить google fonts шрифты

Гугл предлагает нам воспользоваться своим сервисом по добавлению шрифтов. Минус в том, что сами эти шрифты не будут находиться на вашем сайте (хостинге), они будут постоянно загружаться и загружаться. Если вам прямо сильно понравился один из его коллекции шрифтов и вы готовы подключить google шрифты на свой сайт, это для вас. Если вы не боитесь лишнего давления на ваш сайт, дерзайте.

Заходим сюдаэто сервис, с помощью которого можно выбрать и подключить google fonts на свой сайт. Сразу слева выбираем в меню Script — Cyrillic. Такое действие лучше делать сразу, чтоб вы видели нормальную кириллицу, которую можно использовать без никаких проблем. Если вы не хотите китайских знаков на свой странице, используйте кириллицу.

Google fonts на сайт

После выбора кириллицы, открывается нормальный список шрифтов. Выбираем из них самый красивый, который в дальнейшем будем использовать на сайте и нажимаем на Quick-use. Выбрали google шрифты, прекрасно, снизу в этом же окошке проверили, стоит ли галочка на кириллице Cyrillic (cyrillic), сейчас стоит обычно по умолчанию, но лишний раз проверить не помешает.

Шрифты для сайта

Все выбрали, все добавили, посмотрели и решились. Спускаемся немного ниже и снизу видим вот такое окно с выбором варианта вставки google шрифта на сайт. Нам дают три способа: первый стандартный через обычную вставку строчки кода в html документ, второй через вставку кода в файл со стилями и третий способ через скрипт. Третий вариант мы убираем сразу, хотя способ ничем не хуже.

Шрифты html

В первом способе нам предлагают одну строчку кода, которую нужно вставить в любое место шапки сайта документа html, короче не дальше тега </code>. Я уверен, что у вас там уже присутствуют подобные строки, не потеряетесь.
Второй способ предлагает точно такой же вариант, только строчка кода вставляется в файл со стилями. Готовую строчку найдете на вкладке <code>@import
. Кстати таким способом можно очень много всего сделать, но оставлю материал для следующих записей. В одной статье про все не рассказать.

На этом все, основное действие вы сделали, теперь с таким примером строчки ваша запись готовая, как подключить google fonts проблем возникнуть не должно.

После всех этих действий, там где нужно задать данный шрифт, а в моем случае это шрифт Lobster, нужно с помощью свойства font-family его просто указать.

к оглавлению ↑

Шрифты html без сервисов

Такой способ более удобней и для его использования не нужно нагружать свой сайт такими сервисами как он google. Все будет храниться на вашем хостинге, только для начала нужно правильно задать параметры шрифтов. Нужно конвертировать, закачать на хостинг и только потом подключать шрифт css на сайт.

Конвертирование нужно сделать, чтоб все браузеры правильно его понимали и читали. Если вы знаете китайский язык и язык иероглифов, проблемы конечно не будет, можно сразу все сделать...но лучше все делать правильно.

Существует много сервисов, с помощью которых можно сделать конвертирование шрифт, я использую сервис fontsquirrel, webfont или программку fontoptimizer. Разобраться в них особого труда не составит. Открываем сайт fontsquirrel и переходим в раздел GENERATOR. Нажимаем на кнопку UPLOAD FONTS. Выбираем файл со шрифтом, который нужно конвертировать. Выбираем режим EXPERT.
Шрифты html

Немного ниже, в пункте Subsetting, нужно выбрать Custom Subsetting... Снизу откроется список из возможных вариантов языков. Как в примере с добавлением шрифтов google, нужно точно так же выбрать кириллицу. Далее в самом низу соглашаемся и ставим галочку, что мы ничего не нарушаем и скачиваем архив с готовым шрифтов.

В архиве будет лежать четыре файла, вот они нам и нужны. Расширения файлов (eot, svg, woff, ttf) Заходим через FTP доступ на свой сайт и копируем в выбранную папку все четыре готовых файла.
Подключение шрифта

Основные действия все сделаны, осталось только подключить шрифт css в таблицу со стилями. Открываем файл со стилями (style.css) и вставляем в него такой код. Что нужно в нем изменить! В моем примере я ранее использовал шрифт Lobster, вот его название нужно вставить в начале кода и в конце. Посмотрите на код ниже и вы все найдете, проблем с этим возникнуть не должно.

В выбранной части кода, в самом URL допишите путь к файлам шрифта, нужно указать где они находятся. Далее все так же само, как и в предыдущем варианте. С помощью свойства font-family указываем нужный шрифт. На любой странице, в любой части статье, в любом месте на сайте или блоге.

В итоге получается пять строчек кода, в которых стоит путь к каждому из файла, которые вы скачали ранее из онлайн сервиса.

Вот и все действия, которые нужны, чтоб подключить шрифт css к заданной странице на сайте. Таким образом можно подключать много различных шрифтов на сайт. В файле со стилями добавляем @font-face а уже в нужном месте пишем свойство font-family и указываем название шрифта, которое нужно использовать.

Сложного ничего нет. Кому будет интересно, могу подсказать еще несколько интересных сервисов по поиску и подбору шрифтов для сайта.

Евгений Несмелов

Подпишись на обновления блога!Будь в курсе первым
Комментариев нет

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь . формой входа или введите другой .

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.