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

Как установить шрифты Google на свой веб-сайт?

Есть два способа использовать шрифты Google на своем веб-сайте
1. CDN со шрифтами Google
2. Загрузить и использовать шрифты Google

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

  1. Google Fonts CDN
    Сначала посетите Google fonts, затем найдите или выберите шрифты, которые вы хотите использовать для своего проекта.

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

2. Загрузите и используйте шрифты Google.

Чтобы загрузить шрифты Google, нажмите эту кнопку, семейство загрузки с правой стороны, zip-файл будет загружен в том случае, если все шрифты с расширением ttf (TrueType Font) теперь ttf не будут работать для веб-сайтов, на которые вы должны его преобразовать. тип веб-шрифтов. Сначала выберите шрифт ttf, который вы хотите преобразовать.

затем откройте этот инструмент в своем браузере, ссылка здесь http://www.font2web.com/

Загрузите файл ttf сюда, этот инструмент преобразует шрифт в веб-шрифты, они предоставляют демонстрационный HTML-код, включая файл css, а также способ реализации шрифта.

Эти два способа помогут вам добавить шрифты Google на веб-сайт, если вы найдете этот пост полезным, поделитесь им с другими разработчиками :)