Как использовать Google Fonts в следующем проекте веб-дизайна

1656664694 kak ispolzovat google fonts v sleduyushhem proekte veb dizajna

Содержание статьи

от Хайдена Миллса

Вы, наверное, слышали, что у Google есть сотни бесплатных веб-шрифтов, готовых к использованию в следующем проекте. Но как вы используете их на своем веб-сайте? Эта статья проведет вас через шаги, которые необходимо выполнить, чтобы запустить их на вашем веб-сайте. Это должно занять менее 10 минут!

Что такое Google Fonts?

«Шрифты Google были впервые запущены в 2010 году как инженерная инициатива, направленная на продвижение Интернета вперед и ускорение». — Google Design

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

Кто использует Google Fonts?

Каждый да! Графические дизайнеры, дизайнеры UX, исследователи, разработчики, веб-дизайнеры, блоггеры, менеджеры социальных сетей, предприниматели, художники, студенты, преподаватели, фотографы и многие другие. Я видел, как шрифты Google используются на рекламных щитах, плакатах, презентациях, свадебных приглашениях, веб-сайтах и ​​книгах.

kXD2sxTadamOSqShbdvGWdoiVGhDl5K0BXMi
Все и их мамы пользуются Google Fonts

Кто создает шрифты?

Google Fonts сотрудничает с дизайнерами шрифтов, литейными предприятиями и дизайнерским сообществом по всему миру. Эти люди и организации разрабатывают шрифты, которые вы видите в Google Fonts. Например, Łukasz Dziedzic – независимый дизайнер гарнитуры, разработавший популярный шрифт Lato. Литейное предприятие ParaType разработало гарнитуру PT Serif.

Почему Google заботится о шрифтах?

Каждая ссылка Google Fonts API на сайте дает Google возможность делать больше данных. Звучит отвратительно? Да, но я не думаю, что это должно мешать вам использовать Google Fonts.

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

m7VnFh7QqamN130XGtxkZ2O6yfrv9rXmHmEy
Источник — fonts.google.com/about

Почему я должен рассмотреть их использование?

Вы не можете бить бесплатно. Прав? Кроме того, что вы бесплатны, вам следует рассмотреть возможность использования Google Fonts в следующем проекте веб-дизайна, поскольку…

  • Шрифты легко использовать на вашем сайте
  • Существует более 850 шрифтов по выбору (и еще больше)
  • Общее качество шрифтов продолжает расти
  • Шрифты Google также можно скачать для печати

Ладно, хорошо, хорошо! Теперь о том, как вы их используете.

Как пользоваться Google Fonts — шаг за шагом

1) Перейдите на веб-сайт Google Fonts

Посетите веб-сайт Google Fonts, где можно выбрать из 853 семейств шрифтов, количество которых растет! Веб-сайт позволяет фильтровать результаты по стилю шрифта, языкам, популярности и весу. Шрифты Google также содержат новые шрифты при посещении страницы «Избранное».

nbfKNbQr2w6SzVWBAyKhFMrZqO3QC51AKDvd
fonts.google.com

2) Ищите шрифты, которые вам нравятся

Если вы имеете в виду название семейства шрифтов, вы можете найти его.

L27yKqethigRjO14Puq6HCrNQGaRdj2vcqUM

3) Нажмите «+», когда будете готовы им воспользоваться

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

EMm412pU1mVXOE3r4b1JelMJU6YKne8kK4jS

4) Повторите шаги 1–3, если вы ищете более одного шрифта для использования

5) Нажмите «ящик выбора», чтобы показать все выбранные вами шрифты

В «ящике выбора» вы увидите все добавленные шрифты. Здесь вы найдете код, который необходимо добавить на свой веб-сайт. Вы также можете загрузить шрифты на рабочий стол.

SUC-QsEZKrHmUvO-AFtQn6rXT3xvbiGECwNa

6) «Ящик выбора» – это место, где вы возьмете код, который скопируете/вставите в код HTML и CSS своего веб-сайта.

С «ящика выбора» вы скопируете код, чтобы вставить его в свой HTML и CSS. Чтобы шрифты Google работали на вашем веб-сайте, у вас должно быть связано семейство шрифтов из Google Fonts API (в HTML) и указать семейство шрифтов (в CSS).

hjNGEz9NTW6dU8-8X9CwOvFAZcQRMakSNETO

7) При желании добавьте разные плотности и стили шрифта, нажав вкладку «Настроить».

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

Igaa9YS1Q-6Bjxf7O5O4duLWibXYB-dCSH6N

8) Скопируйте HTML-код и вставьте его в своего сайта

Ладно, мы почти кончили! Все, что нам сейчас нужно сделать, это скопировать и вставить код HTML и CSS на ваш веб-сайт. Сначала скопируйте HTML-ссылку в заголовок своего HTML-документа.

1byguIwDXOsgpWt-EpWqwy9D3UH8olcMaaIB
5uHnAL8reL3ug7q3JN-sxzLqxAW-7c5T2J2W

9) Скопируйте правило CSS и вставьте его в файл CSS вашего сайта

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

3ZoUNz5Dh8l0yUDpTiKBKwonWSVz8BrIYo9T
ZyenjIqIONRL6U5ydFHML-Kal82YeBnnF03F

10) Сохраните оба файла (HTML и CSS), затем обновите веб-сайт и просмотрите новый шрифт

Не забудьте сохранить и обновить!

oYCFHWTVYfgM9iltxKzMKqQD4KVg7s84BaiB
Обновите локальные файлы и вы увидите новое семейство шрифтов… в этом случае это шрифт Google под названием Lato.

Вот так! Вы успешно применили первый шрифт Google на своем веб-сайте. Поздравляем, вы кодируете себя. Справедливо сказать, что Google Fonts — это в основном…

Yabh1Mb7Rq76E7PTyP85UecyYwZb4DRzEI6Y

Больше чтения

Спасибо, что прочли

Не стесняйтесь оставить комментарий ниже или связаться со мной в Twitter с любыми вопросами ✌️

Кроме того, я являюсь создателем Font Pair, который помогает вам объединять шрифты Google вместе. Просмотрите нашу новую публикацию Medium, чтобы прочитать больше публикаций о типографии!

W82iKfkTeW8WFaVEPKtglAO5kHpsyPLX8lsi

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

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