Подключение шрифтов google. Как подключить шрифт от Google Fonts? Подключаем веб-шрифт с помощью @font-face

01.10.2020 Смартфоны

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

P { font-family: Verdana; }

Этот небольшой кусочек кода означает, что ко всем тегам

Применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

P { font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

Отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии .

Веб-шрифты

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

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

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com . В строку поиска необходимо ввести название формата (например, ttf).

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

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

@font-face { font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); }

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

P { font-family: MyUniqueFont; }

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts . На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

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

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

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

...

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .

Шаг 4: создайте стиль

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

P { font-family: "Roboto", sans-serif; }

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

P { font-family: "Roboto", sans-serif; font-weight: 700; }

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

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

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

Итоги

Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.

Google Fonts – один из лучших ресурсов с бесплатыми веб-шрифтами, и Google дает вам несколько способов импортировать их на свой веб-сайт. К сожалению, ни один из них не включает популярный движок WordPress. Это означает, что вы должны или использовать плагины, которых очень много, или пачкать руки, возясь с кодом.

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

Варианта есть два – подключить плагин, или немного пошаманить с файлом functions.php.

Но сначала хотелось бы перечислить преимущества и недостатки Google Fonts, чтобы вы окончательно решили, использовать их в своих проектах или нет.

Хорошие и плохие Google Web Fonts

Что касается веб-шрифтов, то Google - один из лучших вариантов с точки зрения производительности . Все из-за легкой конструкции, и системы кэширования. Посетители не должны ждать, пока загрузятся Google-шрифты, если они недавно посетили сайт, на котором использовались они же. Популярные шрифты, такие как Open Sans, могут повысить производительность вашего сайта за счет сокращения времени загрузки.

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

И, наконец, платформа полностью свободна . Чтобы начать использовать шрифты, нужно только авторизоваться или завести почтовый ящик на Gmail (а у кого сегодня нет почты на Gmail?).

Из недостатков можно указать то, что выбор Google-шрифтов невелик , многие из них похожи друг на друга. Нужно потратить много времени на поиски, чтобы найти приличный, оригинальный шрифт. Шрифтов для кириллицы совсем мало.

Помимо этого, есть обычные проблемы безопасности – вам нужно указать некоторые личные данные при установке шрифтов от Google на вашем сайте.

Как установить шрифты Google с помощью плагинов WordPress

Если вы поищете плагины, то первое, что увидите в результатах поиска - плагины WP Google Fonts и Easy Google Web Fonts . Это действительно два лучших плагина.

Плагины не являются идеальным решением для установки Google-шрифтов на WordPress сайте - не только с точки зрения производительности, но и потому, что плагины не позволяют выбирать определенные куски текста. Тем не менее, если вы или ваш клиент уверен, что лучше использовать плагины, то посмотрите на эти два варианта.

Этот плагин позволяет ориентироваться на конкретные элементы, такие как заголовки H1, параграфы и цитаты. Вы также получаете вариант пользовательского CSS для дальнейшей работы со стилями отдельных шрифтов. Добавить и настроить шрифты от Google на вашем WordPress сайте с помощью этого плагина довольно легко.

Easy Google Web Fonts оправдывает свое имя, и делает установку Google Fonts супер легкой даже для начинающих. Вы можете использовать функцию Live Preview для просмотра, тестирования и оптимизации шрифтов, не выходя из веб-сайта, а также создавать свои собственные правила шрифта, не написав ни строчки кода.

Правильный путь установки Google Fonts в шаблон WordPress

В конце концов, мы приходим к тому варианту, чтобы открыть файл functions.php и немного поработать с кодом. Перед тем, как сделать это, вам нужно выбрать шрифт из библиотеки Google. Ради примера, давайте попробуем взять очень популярный Open Sans .

Затем вам нужно выбрать стиль шрифта – нормальный, жирный или курсив. Это вы в состоянии сделать самостоятельно:)

После того, как вы выберете стили, Google даст вам фрагмент кода. Наш выглядит следующим образом:

Кроме того, мы получили CSS стиль:

font-family: "Open Sans", sans-serif;

Теперь пришло время, чтобы открыть файл functions.php (путь к файлу: wp-content/themes/yourtheme). В конце файла добавьте новую функцию:

function load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");

Ключом этой функции является команда "wp_enqueue_style", которая заставляет WordPress вызывать таблицы стилей шрифта в заголовке каждой страницы. Если вы внимательно посмотрите, то увидите, то мы удалили ссылку href= и rel=’stylesheet’ type’text/css’, из кода, который нам дал Google, и вам нужно будет делать то же самое, если вы хотите добавить любой другой Google-шрифт для вашего сайта на WordPress.

Все, что вам нужно сделать сейчас, это открыть основной файл CSS и вставить стиль с Open Sans. Тут работают обычные правила, поэтому добавьте следующий код в таблицу стилей, сохраните и обновите:

body
{
font: normal 1em "Open Sans", sans-serif;
color: #313131;
}

Этот стиль будет работать по всему сайту. К отдельным фрагментам текста вы можете задать другой стиль:

Bold-text
{
font: bold 1em "Open Sans", sans-serif;
}

Как видите, на самом деле все очень просто. Пробуйте и проверяйте результат:)

Конечно, есть разные плагины для того, чтобы использовать шрифты 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 для вызова нашей функции:

С файлом 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. Пользователи могли использовать его бесплатно. Несмотря на то что настройка подобного типа не считается суперсложной, все равно находились такие люди, которые делали ошибки и не могли справиться с сервисом.

Для этого специально был разработан простой дизайн. Теперь работа со шрифтами Google Fonts стала проще, а количество посетителей возросло. Расширилась и библиотека. В прошлом году состоялся редизайн сервиса, который собрал много положительных отзывов. Теперь людям стало легче подключать шрифты к своим сайтам и просматривать их.

Внешний вид

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

Теперь же разработчики сделали упор на Material Design. Все приобрело утонченные черты. Внешний вид стал «легче». Стала заметна тонкая анимация, интерактивность. Ничего больше не отвлекает внимание от выбора нужного шрифта Google Fonts.

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

Возможность

Частенько подобным сервисом пользуются дизайнеры. Несмотря на их опыт и профессионализм, они тоже работают с визуализацией. Редизайн подарил больше подобных возможностей, которые позволяли бы заранее сочетать то, что нужно будет позже реализовать в своем проекте.

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

Избранные

Сервис со шрифтами Google Fonts предоставляет пользователям использование избранных вариантов. В специальной вкладке собран набор стилей, которые разработчик рекомендует к использованию. Эти коллекции выделяются среди остальных. Они разработаны специалистами из Google и сторонних агентств. Большинство из них имеют определенный стиль и особую философию.

Просмотр

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

Были вопросы и к этим дополнительным кнопкам, о которых мало что было известно на первый взгляд. Нужно было либо наводить на них, либо использовать. Теперь стало все более или менее понятно. Появились дополнительные возможности:

Выбор определенного предложения, параграфа или собственного текстового элемента.
Эксперименты с насыщенностью шрифта.
Быстрая настройка размеров с помощью слайдера.

Кстати, изменение размеров шрифтов Google стало адаптивнее, поскольку менялся только один пример, а не все на странице. В старой версии пользователей могло переносить с одного края страницы на другой, а в новой вы просто остаетесь на том примере, который регулируете.

Подключение

Если вы готовы использовать этот сервис, то можете попробовать подключить шрифты на свой ресурс. Сам процесс получения ссылки универсален. Проблемы могут возникнуть в зависимости от вашей CMS-системы. Каждая использует свои способы. Поэтому для разных проектов придется подбирать отдельные варианты.

Мы же рассмотрим, как получить ссылку для подключения шрифтов Google. Нужно зайти на официальный сайт Google Fonts. Там вы просматриваете каталог стилей и выбираете тот, который больше всего подходит. Для этого рядом с ним нажимаете «плюсик». После шрифт будет добавлен в специальный блок в самом низу страницы.

Нажимаете на этот блок и далее настраиваете его. Тут можно выбирать начертания и нужный алфавит. Если вам нужны шрифты Google кириллицы, тогда отмечаете строку Cyrillic. После будет сформирована ссылка. Её можно найти в этом же окошке на вкладке Embed. Достаточно просто скопировать её либо же использовать полный код HTML.

Обычно в настройках сайта есть установка шрифтов и цвета. Там есть стандартные варианты, а можно добавить расширенные. В них находится отдельный вариант для Google Fonts. Если у вас тогда нужно загружать шрифты через плагин Supreme Google Webfonts.

sotikteam.ru Смартфоны. Антивирусы. Программы. Инструкции. Браузеры.

Подключение шрифтов google. Как подключить шрифт от Google Fonts? Подключаем веб-шрифт с помощью @font-face