Как подключить шрифты в css google
Перейти к содержимому

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

  • автор:

Быстрая загрузка штрифтов на сайт, которая не тормозит сайт

Сергей Веснин

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

Мы разрабатываем сайты больших и растущих компаний. Напишите нам в WhatsApp, когда вам понадобится такой сайт:

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

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

FOUT и FOIT

Блокировать рендеринг нельзя, поэтому у нас две стратегии на выбор для обработки загруженного шрифта:

FOUT — Flash Of Unstyled Text
Отображает текст, но запасным шрифтом. Google Fonts теперь может возвращаться с display = swap, который указывает браузеру использовать резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Если вы дотошны, то можете найти лучший запасной шрифт с помощью этого приложения: Font Style Matcher.

FOIT — Flash Of Invisible Text
Здесь текст отображается невидимым шрифтом, пока пользовательский шрифт не будет полностью загружен. Этот вариант имеет больше смысла использовать для чего-то вроде логотипа, который будет отображаться запасным шрифтом (хотя для логотипа я бы использовал SVG, но вы ведь хотите примеры!)

Уловка для быстрых шрифтов

Общий совет — предварительно подключиться к серверу шрифтов:

затем предварительно загрузите шрифты:

&display=swap" />

Наконец, в качестве запасного варианта запросите асинхронные шрифты, установив для носителя значение «печать» для браузеров, которые не поддерживают rel=»preload» (около 12% браузеров в этом 2021 году)

&display=swap" media="print" onload="this.media='all'" />

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

Самый быстрый способ — разместить собственные шрифты, но Google Fonts делает для вас много других вещей:

  • Возвращает несколько алфавитов
  • Возвращает файл css, настроенный для пользовательского агента, который его запросил.
  • Если у вас несколько шрифтов, лучше всего сделать 1 запрос, чтобы это было быстрее
  • Вы можете адаптировать свои запросы к определенным шрифтам и форматам (полужирный, курсив, тонкий)

API загрузки шрифтов

Есть новый CSS Font Loading API, который может запрашивать шрифты, но он не очень хорошо работает с Google Fonts, потому что вам нужен исходный URL-адрес для шрифтов, а URL-адрес Google Fonts не является источником. У Google, наряду с Typekit, есть библиотека под названием Web Font Loader , которая работает как Font Loading API, но уже с Google Fonts.

Рады, если вам пригодилось какое-то из этих решений!

Google fonts | гугл шрифты

Лучший хостинг для CMS

Подключение google шрифтов к сайту

Сайтостроение

Автор Алексей На чтение 4 мин Просмотров 11.3к. Опубликовано 09.07.2017 Обновлено 14.05.2020

Сегодня мы поговорим о сервисе Google fonts (гугл шрифты) — как с ним работать: как выбирать, скачивать и подключать к сайту шрифты — бесплатно.

Быстрый выбор гугл шрифтов онлайн

Идем на сайт fonts.google.com, в фильтре сверху выбираем:

  1. категорию — самая популярная Sans Serif;
  2. нужный язык (Cyrillik -русские / кириллические);
  3. сортируем (при необходимости).

Google Fonts

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

Самые топовые кириллические шрифты: Roboto, Montserrat, Open Sans, Roboto Condensed, Source Sans Pro, Rubik, Oswald, Merriweather, Noto Sans, Yanone Kaffeesatz, Caveat.

Как скачать гугл шрифты

Выбрали шрифт, щелкнули по нему. На открывшейся странице в верхней части экрана нажмите на кнопку «Download family».

скачиваем шрифт с google fonts

Качаются все начертания в формате ttf — можно использовать в word, фотошоп и прочих программах, но на сайте я бы не стал использовать данный формат. По этому смотрите ниже альтернативный вариант: google webfonts helper.

Google Fonts как подключить к сайту

Есть несколько способов подключения, рассмотрим каждый.

Подключение через fonts google api

Данный способ на мой взгляд самый оптимальный!. После того ка подобрали шрифт, идем на его страницу и выбираем начертания после чего сбоку увидите вкладку с 2 табами, нажимаете на Embed и там увидите 2 варианта подключения: через тег и @import.

пример подключения шрифта через google font api

стандартное подключение шрифта

Затем подключаем шрифт для нужных блоков или сайта целиком в таблице стилей. Пример css кода для всего сайта.

body

Во втором случае сразу открываем файл стилей и прописываем в него подключение.

подключение через import

Пример CSS стилей:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap'); body

подключение через @IMPORT

подключенный гугл шрифт

Подключение нескольких шрифтов одновременно при помощи api

К примеру Вы хотите чтобы на сайте было 2 шрифта, один для всех текстов, а другой для всех заголовков, тогда щелкаем на вкладку «Browse fonts» выбираем еще один шрифт, затем его начертания и получаем уже объединенный код.

добавляем 2 шрифт через api

Пример CSS стиля для подключения общего шрифта ко всему сайту и второго шрифта к заголовкам.

body h1,h2,h3,h4,h5,h6

Если возникают какие нибудь проблемы с одновременным подключение шрифтов, то обратитесь к документации по API.

Качаем шрифты для WEB при помощи google webfonts helper и подключаем их к сайту.

Рекомендую для веба подключать только форматы woff и woff2 — они самые быстрые и поддерживаются всеми современными браузерами: Chrome, Firefox, IE 9+, Safari.

Идем на сайт google-webfonts-helper.herokuapp.com/fonts/ вбиваем в окно поиска название шрифта. После чего выбираем нужный результат. Далее выбираем кодировку (Select charsets) и размеры (Select styles). Ниже выбираем поддержку браузеров: все (Best Support) или только современные (Modern Browsers) — лучше данный вариант. Копируем CSS код в таблицу стилей, скачиваем шрифт и затем заливаем его на сайт.

google webfonts helper

Важно! По умолчанию опция Customize folder prefix (optional) стоит ../fonts/, следовательно чтобы шрифты подключались к сайту, вы должны залить их в папку fonts, а эта папка должна лежать в той-же директории, что и папка /css вашего сайта. И да вы можете поменять значение по умолчанию, чтобы код перегенерился!

распаковываем шрифты

Пример CSS кода стандартного подключение скачанных шрифтов.

@font-face

Если к примеру у вас 1 ttf шрифт (нет woff, eot, …), то подключение будет выглядеть так.

@font-face < font-family: "любое_имя"; font-style: normal; font-weight: normal; url("../fonts/путь_до_файла.ttf") format("truetype"); display: swap; >

здесь display: swap ; — это так сказать рекомендация гугла по оптимизации скорости.

Вот и все. Если что то не понятно можете заглянуть в руководство от гугла.

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

fonts

После того, как мы установили кирилицу выберем шрифт Poppins.

google fonts poppins

Нажимая на +Select this style выберем начертания: Regular 400, Semi-bold 600, Black 900.

шрифты webkopylov

шрифты гугл

Для сайта нам потребуется следующий код:

шрифты

Этот код мы размещаем у себя на сайте в index.html

подключение шрифтов

Данный код мы вставляем в файл стиле style.css

font-family: ‘Poppins’, sans-serif;

шрифты стилей css

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

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

Если вам нужна более подробная консультация, пишите мне в сообщения группы ВКонтакте

  • ← Зачем нужен ssl сертификат для сайта
  • Зачем нужен хостинг и домен для сайта? →

Как Установить Шрифт на Сайт в WordPress

Как Установить Шрифт на Сайт в WordPress

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

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

И тут возникает два вопроса — где взять пользовательские шрифты для WordPress и как установить шрифт на сайт. Давайте это выясним.

Где скачать шрифты WordPress

Существует множество различных сайтов на которых можно найти бесплатные веб-шрифты. Font Squirrel — это один из таких сайтов. Здесь вы можете найти бесплатные шрифты, лицензированные для коммерческого использования. Google Web Font Service еще один сервис, уже от компании Google, предоставляющий бесплатные шрифты на более чем 135 языках. Edge Web Fonts также является сервисом бесплатных шрифтов предоставляемых Adobe, который может похвастаться огромной коллекцией веб-шрифтов. Возможно вам понравится использовать для этого Typekit, который имеет бесплатную библиотеку из тысяч веб-шрифтов или Fonts.com, что предоставляет более 150,000 шрифтов для веб и рабочего стола.

Еще пара сайтов откуда вы можете скачать бесплатные шрифты dafont и 1001freefonts.

Конвертация шрифтов в дружелюбный для веба формат

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

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

OTF — это самые часто используемые шрифты для веб и являются зарегистрированной товарной маркой Microsoft. Они отлично работают практически со всеми крупными браузерами.

Также называемые как TTF, эти шрифты разработаны Microsoft и Apple в 1980 году и широко используются в обеих операционных системах Windows и Mac. Они поддерживаются всеми крупными браузерами, включая Internet Explorer от версии 9.0, Google Chrome от версии 4.0, Safari от версии 3.1, Firefox от версии 3.5 и Opera от версии 10.0.

WOFF шрифты широко используются на веб-страницах и рекомендованы W3C. Они поддерживаются большинством крупных браузеров, включая Internet Explorer от версии 9.0, Google Chrome от версии 4.0, Safari от версии 3.1, Firefox от версии 3.5 и Opera от версии 10.

WOFF 2.0 шрифты имеют некоторое преимущество перед WOFF 1.0 из-за лучших возможностей сжатия. Они не поддерживаются Safari и Internet Explorer, но отлично работают с Google Chrome версии 36.0 и выше, Firefox версии 35.0 и выше и Opera от версии 26.0.

Эти шрифты являются компактными шрифтами OTF и используются на странице в качестве встроенных шрифтов. Они поддерживаются всеми крупными браузерами.

Если вы нашли шрифт, который вы хотели бы использовать на вашем сайте WordPress, но не уверены совместим ли он с браузерами, используйте Web Font Generator tool. Этот инструмент позволит вам конвертировать практически любой шрифт в дружелюбный для веба формат.

  1. Войдите в Web Font Generator tool.
  2. Нажмите кнопку Upload(Загрузить) (1) для загрузки вашего шрифта, подтвердите, что шрифты могут быть легально использованы для встраивания на веб-страницу (2).
  3. Нажмите кнопку Download(Скачать) (3) и сохраните .zip архив у вас на компьютере.

скачать шрифты

  1. Внутри архива вы найдете шрифты в формате WOFF и WOFF 2.0 вместе с CSS файлом и демо HTML страницей. Эти шрифты поддерживаются практически всеми браузерами.

Скачать шрифты 2

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

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

  • Доступ к панели управления WordPress
  • Доступ к панели управления хостингом или FTP (необязательно)

Вариант 1 — Установка шрифтов через плагины

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

WP Google Fonts

wp google fonts 1

С помощью WP Google font вы можете легко установить шрифт на WordPress. Этот плагин автоматически внедряет код на ваш сайт. Также он дает вам возможность применить пользовательские шрифты к определенным элементам CSS из панели управления WordPress.

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

wp google fonts как установить шрифт на сайт

Typekit Fonts For WordPress

typekit fonts for wordpress

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

После создания своего набора, установите плагин Typekit Fonts For WordPress. Для настройки данного плагина, перейдите в раздел Настройки → Typekit fonts и вставьте ваш код для встраивания, полученный на сайте. Плагин автоматически загрузит шрифты добавленные в ваш набор.

typekit fonts for wordpress как установить шрифты на сайт

Use Any Font

use any font 1

Use Any Font — это еще один плагин, который позволит вам установить шрифт на сайт.

Вы можете установить плагин с официального хранилища WordPress. После того как установка будет завершена, перейдите в раздел Use any font, создайте ключ API и нажмите кнопку Verify.

После проверки вы сможете загружать шрифты в форматах ttf, otf и woff. Плагин также позволяет вам применять шрифты к определенным элементам.

use any font как установить шрифты на сайт

Вариант 2 — Как установить шрифт на сайт в WordPress вручную

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

  1. Скачайте шрифт на ваш компьютер.
  2. Обычно шрифты идут в .zip архиве. Извлеките его.
  3. Теперь вам нужно загрузить файл шрифта (используйте FTP-клиент или Файловый Менеджер) в каталог wp-content/themes/ваша-тема/fonts (создайте папку fonts, если таковой не создано). В нашем примере, мы загрузили шрифт Lobster-Regular.ttf.

hostinger ручная установка шрифтов на сайт

  1. Теперь пройдите в панель управления WordPress и откройте Внешний вид → Редактор. Выберите файл style.css, прокрутите в конец файла и добавьте следующий код (не забудьте изменить значения font-family и url на ваши):
@font-face < font-family: Lobster-Regular; src: url(http://hostinger-tutorials.com/wp-content/themes/twentyfifteen/fonts/Lobster-Regular.ttf); font-weight: normal; >
  1. Нажмите Обновить файл для сохранения изменений.

wordpress style.css

Теперь, код font-face будет загружаться при каждом посещении вашего сайта. Однако пока шрифт еще не используется для каких-либо элементов. Пока вы не увидите никаких изменений в интерфейсе. Чтобы назначить шрифт для определенного элемента, вам необходимо отредактировать тот же файл style.css. Например, следующий код применит шрифт Lobster к нашему названию сайта:

.site-title

На картинке ниже вы можете увидеть результат.

wordpress пользовательские шрифты

Заключение

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *