Веб-Острова Анатолия Куликова

Качаем шрифты с Google Fonts

Качаем шрифты с Google Fonts

У статьи, которую Вы сейчас читаете, очень интересная история появления.

В момент написания на территории РФ мы поимели небольшие проблемы с работой некоторых сервисов от Google благодаря известному в широких кругах процессу. Поэтому вопрос переноса библиотек и файлов из облака (из различных библиотек CDN и иже с ними) стало весьма актуальным. Да и в целом, лично мне нравится, когда запросы к сторонним ресурсам и серверам минимизированы — не дай бог что упадёт или прекратит существование, а у тебя на этом работают важные компоненты. Fail неисбежен.

Я давно не писал в блог ничего дельного, поскольку сейчас достаточно плотно занят + нахожусь в поисках синей птицы в плане подхода к разработки тем для WordPress и прочих вещей для него. На днях у меня встал вопрос качественной упаковки и удобного использования шрифтов, ещё более оптимального, чем пользуюсь в настоящее время. Часто мы подключаем шрифты с Google Fonts, но в последнее время появилась вероятность его (полной / временной — нужное подчеркнуть) недоступности, из-за чего вопрос переноса шрифтов к себе на сервер стало весьма актуальным.

Кроме того, многие шрифты — например Roboto, который я весьма люблю и уважаю (почти как PT Sans) — распространяются бесплатно. Поэтому особенных проблем в плане соблюдения авторских прав нет. Проблем в том, чтобы скачать шрифты со специализированных сайтов, нет совсем. Беда в том, что большинство шрифтов распространяется в формате ttf или otf, а вот найти более кошерные woff или woff2 — более сложная задача.

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

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

Сайт Google-Font-Downloader

Для примера (и себя) я взял шрифт PT Sans и выбрал поддержку новых браузеров

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

По итогу мы получим zip-архив, готовый к использованию. И это хорошо.

Надеюсь, мой небольшой обзорчик был для Вас полезен также, как и для меня.

Всем добра и до встречи на Веб-Островах!

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик
Комментарии от HyperComments

Новые статьи

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн
Домены бывают разные

Домены бывают разные

Про домены сайтов доступно и популярно
Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Перевод статьи Зака Лезермана об инструменте работы со шрифтом
Таймер обратного отсчета

Таймер обратного отсчета

Простая реализация безлишних прибамбасов
Отслеживаем пользователей на чистом CSS

Отслеживаем пользователей на чистом CSS

Теперь и CSS тоже следит за тобой

Статьи по теме

AI композитор Amper Music

AI композитор Amper Music

Проблем с музыкой для своих проектов больше не будет
Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Glyphhanger — инструмент для оптимизации шрифтов [Перевод]

Перевод статьи Зака Лезермана об инструменте работы со шрифтом
Всё о шрифтах: История

Всё о шрифтах: История

Исторический экскурс средних размеров по истории шрифтов — когда они появились, как развивались и что из этого всего получилось
Красивый адрес для YouTube-канала

Красивый адрес для YouTube-канала

Создаём красивый адрес для канала и разбираемся, если ничего не получается
Модальное окно на чистом CSS

Модальное окно на чистом CSS

Создаем модальное окно на чистом CSS без использования javascript
Обзор Icons8 — гибкая библиотека иконок

Обзор Icons8 — гибкая библиотека иконок

Достаточно своеобразная библиотека иконок (бесплатных и не очень) с широким функционалом