Как подключить google fonts в css
Как подключить шрифт на сайт: 3 разных способа + готовый CSS шаблон
Шрифты играют огромную роль в оформлении сайта. Один и тот же текст, написанный разными шрифтами может производить на человека прямо противоположные впечатления.
Но как подключить любые шрифты к сайту и применять их где захочется?
Вы убедитесь, что в подключении шрифтов к сайту нет ничего сложного.
Способ №1. Быстрое подключение шрифтов к сайту на WordPress ( cложность: ⭐ ⭐ ⭐ )
Вы хотите изменить шрифт заголовков своих статей. Для этого:
2. Перейдите в раздел Typography (типография).
3. Выберите элемент, шрифт которого хотите изменить (заголовки, абзацы):
4. Нажмите на «Сохранить изменения».
Если ваш сайт работает на другом движке, или ваша тема оформления не предусматривает таких настроек, переходите к следующему способу.
Способ №2. Используйте всю силу Google Fonts ( cложность: ⭐ ⭐ ⭐ ⭐ )
Шаг 1. Перейдите на официальный сайта сервиса.
Шаг 2. Найдите в коллекции Гугл шрифтов те, которые вам подходят. В правом меню можно сузить круг задав язык, начертание и популярность шрифта:
Для того, чтобы сервис показал шрифты с поддержкой русского языка в пункте Languages выберите Cyrillic.
Шаг 3. Представим, вам понравился шрифт Roboto. Нажмите на иконку «+»:
Вы можете добавить любые шрифты нажимая на значок «+».
Шаг 4. После этого нужно развернуть корзину с выбранными шрифтами:
Но если вам нужно только жирное начертание (для заголовков), выберите только ее.
Помните, чем больше начертаний вы выберите, тем больше будет вес загружаемого файла.
Чтобы не замедлять скорость загрузки сайта выбирайте как можно меньше начертаний шрифта.
Шаг 5. Вернитесь в раздел Embed и выберите владку @IMPORT. Далее, скопируйте строку кода, содержащую «@import» и вставьте на первую строчку CSS файла вашего сайта:
Если у вас сайт на WordPress, CSS файл скорее всего находится здесь: wp_content/themes/’вашатема’/css/. В папке CSS скорее всего будет файл Fonts, куда и нужно перенести код вставки от Google:
Не важно на каком CMS работает ваш сайт, просто вставьте код, и все будет 👌
Определять шрифт для тех или иных элементов сайта вы можете в том же CSS файле.
Для придания шрифта Roboto всем абзацам я напишу следующее: p
Способ №3. Кастомное подключение шрифтов с помощью CSS ( cложность: ⭐ ⭐ ⭐ ⭐ ⭐ )
Если вы достаточно квалифицированы, лучше всего самостоятельно подключить шрифты через CSS. В этом случае шрифты будут находится на вашем сервере в специальной папке. Но для начала нужно их где-то раздобыть.
Где взять веб-шрифты для сайта
А вы знали, что для использования веб-шрифтов нужно купить сепциальную лицензию?
Подключить шрифты с бесплатной лицензией. Проще всего найти их с помощью сервиса Fontsquirrel, что мы и сделаем.
Шаг 1. Перейдите на официальный сайт сервиса
Шаг 2. В правом меню, в разделе Languages выбирите Cyrillic.
Шаг 3. Найдите подходящие шрифт. Обращайте внимание на количество начертаний.
Например, если есть 4 начертания, будет написано 4 Styles:
Шаг 5. Нажимаем на название шрифта и переходим на страницу настроек.
Шаг 6. Переходим в раздел Webfont Kit. Выбираем все форматы шрифтов и жмем на Download @FONT-FACE KIT. Если доступно всего 1-2 формата, не страшно.
Для подключения шрифтов используем @Font-face
Через директиву @font-face вы можете подключить как один, так и несколько шрифтов к своему сайту. Но у данного способа есть свои плюсы и минусы.
Вы можете просто скопировать мой готовый код и где нужно указать свои значения.
Шаг 1. Перенесите файлы скачанных шрифтов на ваш сайт. Это можно сделать через панель управления вашего хостинга или через FTP.
Я предлагаю создать папку fonts в той же директории, где находится ваш CSS файл. Перенесите все файлы шрифтов в эту папку.
Шаг 2. Пропишите в самом начале CSS файла следующую запись:
Так как мы сначала подключаем нормальное начертание, свойствам font-weight и font-style придаем значение normal.
Шаг 3. При подключении курсивного начертания, пропишите следующее:
Где все то же самое, только свойству font-style мы придали значение italic.
Шаг 4. Для подключения жирного начертания, добавьте следующий код:
Где свойству font-weight мы задали значение bold.
Не забудьте для каждого начертания указывать правильное расположение файлов шрифтов.
Шаг 5. Для подключения полужирного курсивного начертания пропишите следующее:
Ну вот и все 🙂 Только что вы подключили 4 начертания шрифта на свой сайт.
Как подключать шрифты для сайтов на разных CMS
[popup_trigger tag=»span»] Подписывайтесь на мою рассылку [/popup_trigger], чтобы не пропустить полезные и интересные публикации на блоге.
Кликните по ссылке ниже чтобы получить бесплатный доступ к ПОШАГОВОМУ видеоуроку по подключению шрифтов.
Как подключить и оптимизировать нестандартные шрифты
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. В этой статье мы разберём базовые моменты, касающиеся подключения и оптимизации шрифтов.
Сразу стоит отметить, что самый простой вариант — вообще не подключать сторонние шрифты и пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать.
Но чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.
Для начала стоит выбрать правильный формат шрифта. TTF и OTF — форматы, которые предоставляются с минимальным сжатием или совсем без него. Их стоит использовать только в том случае, если нужна поддержка очень старых браузеров. Во всех остальных ситуациях можно выбрать WOFF и WOFF2 — форматы, которые отличаются высокой степенью сжатия. WOFF2 — усовершенствованная версия предшественника, этот формат можно считать лучшим из существующих. Тем не менее, поддержка WOFF2 хотя и очень хорошая, но пока не абсолютная, поэтому в качестве подстраховки для не самых современных браузеров стоит использовать WOFF.
Подключение шрифтов с помощью Google Fonts
Есть простой и удобный способ подключить нестандартный шрифт — использовать Google Fonts. Это бесплатный сервис, с помощью которого можно подключать шрифты, но не хранить их на своём сервере. Чтобы им воспользоваться, необходимо выбрать шрифт и добавить одно или несколько нужных начертаний, а затем вставить в ссылку, которую сгенерирует Google Fonts во вкладке Embed.
Этого достаточно, чтобы шрифт подключился. Теперь его можно использовать в свойстве font-family без каких-либо дополнительных действий.
Стоит отметить, что после основного шрифта важно указать веб-безопасный. В случае, если нестандартный шрифт не загрузится, браузер воспользуется альтернативным. Его нужно подобрать максимально похожим на основной шрифт.
Плюсы этого способа — простота использования и всегда актуальные версии шрифтов, Google Fonts их часто обновляет. Но у него есть и минус — запросы к сторонним серверам могут негативно повлиять на скорость загрузки страницы. Если выбираете этот способ, стоит обратить внимание на оптимизацию.
Подключение шрифтов с помощью правила @font-face
Название шрифта, которое затем нужно использовать, чтобы задать элементам подключённый шрифт.
Адрес файла со шрифтом, который нужно подключить, и его формат. Если адресов несколько, их можно указать через запятую. В этом случае важен порядок — браузер будет последовательно пытаться подключить файлы. Первым должен быть самый подходящий формат, а далее — запасные варианты.
Также с помощью функции local можно добавить возможность перед загрузкой шрифта с сервера проверить, установлен ли он на компьютере пользователя. Если да, запроса к серверу за шрифтом не будет — при рендеринге используется локальная версия. Но у этого способа есть минус — шрифт на компьютере пользователя может быть устаревшим, и тогда страница отобразится не совсем так, как было задумано.
Базовый вариант правила:
Для улучшения производительности правило @font-face лучше всего прописывать в самом начале CSS-файла. Так браузер сможет раньше начать обработку шрифта.
Оптимизация
Выбор современного формата шрифта, который обладает хорошей степенью сжатия — это только первый шаг к оптимизации. Можно сделать гораздо больше, чтобы увеличить скорость загрузки страницы и сделать пользовательский опыт при взаимодействии с интерфейсом приятнее.
FOIT, FOUT и FOFT
Пока шрифт загружается, при рендеринге можно наблюдать разное поведение текста.
FOIT (Flash of Invisible Text) — с англ. «мелькание невидимого текста». При таком поведении, пока шрифт не загрузится, текст не отображается и появляется только после загрузки шрифта. Значительная проблема — во время загрузки нет доступа к текстовому контенту.
FOUT (Flash of Unstyled Text) — с англ. «мелькание неоформленного текста». Во время загрузки используется шрифт, заданный по умолчанию (системный, например), а после загрузки страница перерисовывается с использованием загрузившегося шрифта. Эта перерисовка довольно заметна и может быть нежелательна.
FOFT (Flash of Faux Text) — с англ. «мелькание синтезированного текста». Это поведение можно наблюдать в промежутке, когда основное начертание уже загрузилось, а дополнительные (жирное, курсивное и так далее) — нет. Браузер имитирует нужное начертание до загрузки настоящей версии. В этом случае страница может перерисовываться несколько раз по мере загрузки начертаний.
Свойство font-display
У свойства есть несколько значений, которые определяют поведение текста во время загрузки шрифта:
Предзагрузка шрифтов
Ещё один способ оптимизации — предварительная загрузка шрифтов. С её помощью можно изменить обычную приоритизацию загрузки ресурсов, тем самым сказав браузеру, что важно загрузить шрифт в первую очередь.
Стоит учесть, что браузер загрузит шрифт в любом случае — даже если он не используется на странице. И, обладая высоким приоритетом, эта загрузка может блокировать загрузку других ресурсов, поэтому нужно грамотно выбирать, что именно предзагружать. Например, если на странице используются три разных шрифта, стоит предзагрузить только основной шрифт без дополнительных начертаний.
Для того, чтобы предзагрузка сработала, нужно поместить в ссылку на шрифт и задать атрибуту rel значение preload :
Уменьшение количества глифов шрифта
По умолчанию шрифт может содержать глифы (буквы, символы) разных языков и просто редко используемые. С помощью свойства unicode-range можно установить диапазон нужных символов в системе Unicode, тогда браузер будет подгружать сабсет (подмножество) шрифта только в тот момент, когда на странице появится символ из этого диапазона. Предварительно нужно подготовить файлы шрифтов, разбив их на группы.
Например, можно отдельно подключить латиницу и кириллицу, если на сайте представлены версии на двух языках. И с помощью unicode-range браузер поймёт, какой сабсет нужен для конкретной страницы, и загрузит только его. Такой файл будет иметь меньший вес и ускорит загрузку страницы.
Также можно проанализировать, какие конкретно глифы используются на сайте и создать кастомный сабсет исключительно с ними. Для этого есть специальные инструменты.
Google Fonts по умолчанию использует сабсеты. Это можно увидеть, открыв CSS-файл, который подключается в при использовании сервиса. Для каждого языка есть отдельный сабсет. Пример для латиницы и кириллицы:
В статье разобраны только базовые способы оптимизации шрифтов. Но даже их достаточно, чтобы улучшить пользовательский опыт и значительно уменьшить вес файлов шрифтов, ускорив тем самым загрузку страницы.
Полезности
Подключение шрифтов — часть вёрстки
А научиться вёрстке проще, чем кажется. Скидка 1000₽ по промокоду SKUCHNO.
Как подключить google fonts
Наверняка Вы заметили, что на многих сайтах подключены различные нестандартные и красивые шрифты. Необычный шрифт выглядит привлекательнее, чем стандартный и это позволяет держать пользователей на сайте больше времени.
Подобрать красивый шрифт для своего сайта можно с помощью замечательного сервиса google fonts. И в этой статье хочу Вам рассказать именно о том, как пользоваться этим сервисом и как добавить google шрифты на своем сайте.
Зайти на страницу сервиса можно по адресу Google Fonts
Вот как он выглядит на момент написания статьи:
Если Вы знаете название шрифта, который Вам нужен, то можно воспользоваться поиском. Поле для поиска шрифта находится в левом блоке и вот как оно выглядит:
Например, я поищу шрифт под названием Open Sans. При вводе имени шрифта Вы сразу заметите что число, которое находится в тексте над этим полем, начнет изменяться.
Это число означает кол-во найденных результатов, вернее, сколько семейств шрифтов с таким названием было найдено. В нашем случае найдено два шрифта. Результаты поиска отображается в главном окне сервиса, где каждое найденное семейство шрифта обернуто серой рамкой.
Категории шрифтов
Если кликаем по название одно из параметров, то откроется ползунок, с помощью которого можно регулировать соответствующий параметр. Например, отрегулируем параметр уклон.
Ниже параметров есть список азбук, такие как Cyrillic (Кириллица), Latin (Латиница) и другие.
Дальше идет кнопка для сброса настроек. После нажатия на эту кнопку все параметры применят значение по умолчанию.
По умолчанию в результатах поиска отображается только один стиль найденного шрифта. Если хотим увидеть все стили, то нажимаем на кнопку Show all styles. Данная кнопка находится ниже кнопки сброса настроек.
После нажатия на эту кнопку, шрифты из результата поиска будут, отображаться со всеми стилями. А название самой кнопки поменяется на Hide all styles. После повторного нажатия, шрифты будут отображаться в обычном виде.
Настройка отображения результатов поиска
Ниже есть панель, где можно ввести свой текст и настроить его размер. Этот текст отобразится в результатах. Также в этой панели есть возможность сортировки результатов.
Добавление шрифта google fonts на сайт
Идем дальше. Как Вы заметили внизу у каждого шрифта, есть три маленькие кнопки серого цвета и одна большая кнопка синего цвета, с надписью Add to collection, то есть добавить в коллекцию.
Рассмотрим с начало первые три кнопки. Первая кнопка со стрелкой вниз, делает абсолютно то же самое что и кнопка Show all styles, то есть показывает все стили(начертания) шрифта.
При наведении курсора мыши над второй кнопки, появляется надпись Quick use, что на русском означает быстрое использование.
После нажатия на эту кнопку попадаем на страницу с инструкцией как установить выбранный шрифт на своем сайте. В первом пункте инструкции есть возможность проверить, как выбранные начертания шрифта действуют на скорость загрузки страницы. Для примера я выбрал начертания Normal 400, Bold 700 и Extra-Bold 800.
После выбора еще пару начертании, время загрузки страницы увеличиться, а после снятия определенного начертания шрифта, оно уменьшиться. Так что выберите только те начертания, которые будете использовать. Не подключайте лишнее.
Во втором пункте Вы можете выбрать дополнительные наборы символов. Они также действуют на скорость загрузки страницы, поэтому выберите только те наборы, которые Вам действительно нужны.
Перейдем к третьему пункту. Для того чтобы подключить google шрифт на своем сайте необходимо воспользоваться одним из трех вариантов подключения.
В четвертом пункте, представлена инструкция, как применить подключенные стили. Просто выбираем элемент, к которому хотим применить подключенный шрифт и добавляем ему свойство font-family. В качестве значения данного свойства пишем имя добавленного шрифта. Это имя можно увидеть прямо в ссылке подключения:
Для примера установим шрифт, для какого-то блока div с идентификатором content, в котором находится некий текст. В стили пишем следующий код:
Через свойство font-weight, устанавливаем жирность шрифта.
Вернемся к результатам поиска. Для этого вначале странице с инструкцией, нажимаем на кнопку с названием Go back and add more fonts.
При наведении мыши на третью кнопку, появляется текст Pop out, то есть выскочить. Нажимаем на нее и видим, что открылось новое окно с подробным описанием шрифта.
Здесь отображается набор символов (Character set), которые присутствует в шрифте, статистика использования шрифта (Statistics), сопряжение с другим шрифтом (Pairings) и ссылка на страницу где есть возможность попробовать шрифт в действии (Try in Typecast).
И последняя кнопка Add to collection, что в переводе означает добавить в коллекцию. После нажатия на эту кнопку, выбранный шрифт добавится в некую коллекцию. А надпись самой кнопки изменится на Remove from Collection, то есть удалить из коллекции.
Как только в коллекцию добавляется какой-то шрифт, в фильтры поиска сразу появляется синее звездочка с надписью Show collection only, то есть отобразить только содержимое коллекции.
Содержимое коллекции также отображается и внизу страницы. Для примера добавим в коллекцию пару нужных шрифтов, а именно шрифты Roboto и Open Sans.
Для того чтобы свернуть/показать панель коллекции, кликаем на жирное слово Collection в левом верхнем углу панели.
Удалить шрифты можно поочередно, нажимая на крестик, который находится рядом с названием шрифта, которого хотим удалить или же можно удалить все шрифты сразу, для этого нажимаем на ссылку Remove all families from Collection.
В правом верхнем углу окна коллекции, есть три вкладки Choose(Выбрать), Review(Обзор) и Use(Использование). Choose это текущая страница выбора шрифтов.
При нажатии на вкладку Review, откроется страница детального обзора шрифтов. Здесь можно увидеть, как выглядят выбранные шрифты, посмотреть какие символы входят в каждом шрифте (Вкладка Character Set), сравнить выбранные шрифты (вкладка Compare), или прочитать описание каждого шрифта (Вкладка Description). На этой же странице есть и другие возможности, но они не так уж важны.
Как сохранить коллекцию и как скачать шрифты google fonts
И последнее о чем я хотел Вам рассказать, это о том, как сохранить коллекцию и как скачать шрифты в google fonts.
В самом начале страницы Use (Использование), в правой части, над серой рамкой, есть две кнопки.
После нажатия на первую кнопку, откроется окошко со ссылкой, на текущую страницу. Эту ссылку можно сохранить у себя, в каком-то документе на компьютере и при необходимости сможете легко вернуться на данную страницу.
А после нажатия на вторую кнопку, со стрелкой вниз, также откроется окошко, но уже со ссылками для скачивания шрифтов. Вот как она выглядит:
В сообщение которое находится в сером блоке, говорится о том что нет необходимости скачать шрифты для того чтобы потом использовать их на своем сайте. Мы уже знаем об этом. Как я уже писал выше, для того чтобы подключить гугл шрифты на своем сайте, достаточно воспользоваться одним из предложенных способов.
Но, если все-таки хочется скачать шрифты из выбранной коллекции, то не что не мешает нам сделать это. Просто, нажимаем, на синею ссылку zip file, и сразу же выскочит окошко с предложением сохранить или открыть архив с выбранными шрифтами.
Что касается второго предложения, а именно синхронизация google шрифтов с Вашим рабочим столом, используя утилиту SkyFonts, я никогда ею не пользовался и поэтому мне нечего Вам рассказать о ней.
И последнее возможность, которое дает нам сервис google fonts, в этой окошке, это скачать все семейства шрифтов, которые есть на сервисе, включая и их исходные файлы.
Для этого необходимо нажать на ссылку Google Fonts Github project. И после этого в новой вкладке откроется страница на github, где находится архив со шрифтами, которые есть на проекте google fonts.
Для того чтобы скачать архив со шрифтами, нажимаем на кнопку Download ZIP и сразу же выскочит окошко скачивания архива.
И здесь я завершаю эту длинную статью. Теперь Вы знаете, как подключить и как использовать шрифты google fonts. Пользуйтесь на здоровье!
Также Вы узнали о такой возможности, как проверить выбранные шрифты на то, как они действует на скорость загрузки страницы после их установки на сайт. Скорость является важным фактором при навигации по сайту, поэтому ее нужно учитывать обязательно.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Автор статьи: Мунтян Сергей