Кодирование Google Fonts в Base64 на PHP

Времена, когда можно было не думать об использовании неких сторонних шрифтов на сайтах давно канули в прошлое. В первую очередь это обуславливается тем, что в те времена и мир веба был не таким “богатым” по своему содержанию и функциональному использованию, как сейчас. Достаточно хотя бы ради примера посмотреть на образцы сайтов компаний являющихся лидерами в IT-индустрии того времени. А говорить о вeб-приложениях и вовсе не приходилось (их попросту не существовало). Ведь даже наличие самого простого статического сайта было очень большой роскошью. И основная причина была даже не в стоимости за его разработку и поддержку, а в том, что доступ в интернет имел узкий круг лиц. Да к тому же и само использование интернета было дорогим и имело дополнительные технические аспекты. Т.е. все сводилось к тому, что сайты просто имели очень малую или не имели практически вообще аудитории. Все эти и другие факторы в свою очередь сказались на отсутствие потребностей в развитии технологий для области веба. Иными словами, не было спроса – не было предложений.

Но время не стоит на месте и девиз Билла Гейтса: “Компьютер на каждый стол и в каждый дом” начинает воплощаться в жизнь. И благодаря этому интернет начинает становиться все доступнее и доступнее для рядовых пользователей. Появляются новые технологии и повышается спрос на разработки в области веб-индустрии. К сайтам начинают предъявляться более серьезные требования, появляются вeб-приложения и благодаря этому – проектирование пользовательского веб-интерфейса становится одним из важнейших ключевых факторов разработки. Появляются коммерческие и бесплатные наборы компонентов и шрифтов для их использования в веб-интерфейсах. Но приобрести лицензию на некоторые коммерческие шрифты в отличие от компонентов не предоставляется возможным. Так как при их использовании приходиться платить за количество загрузок (показов страницы). Но данную ситуацию существенно спасает появление такого сервиса как Google Fonts.

Ведь для того, чтобы иметь возможность использовать в веб-разработках внешний шрифт, требуется произвести его подключение. Для этого можно прибегнуть к использованию CSS-правила @font-face (здесь следует учесть такую немаловажную особенность как место расположения файлов шрифта: локальное или удаленное) или воспользоваться шрифтом из сервиса Google Fonts (файлы шрифта расположены удаленно, а это способствует появлению лишних запросов к стороннему серверу). Я же предпочитаю использовать шрифты, закодированные в строковое представление Base64 с последующим их хранением в CSS-стилях. Но мне в свое время такая рутинная работа как: скачать шрифт, получить его представление в Base64 и вставить получившейся код в стиль – достаточно поднадоела, поэтому появилась идея об автоматизации этого процесса.

Идея алгоритма заключается в том, чтобы по имеющимся ссылкам для загрузки шрифтов в полученном файле с CSS-стилями из сервиса Google Fonts получить файлы шрифтов и закодировать полученные бинарные данные в Base64 (отдельно для каждого шрифта), а затем заменить ссылки на получившееся данные в представлении Base64. Схематично это выглядит так:

Отдаем скрипту ссылку: https://fonts.googleapis.com/css?family=Roboto:400,700

Получаем блоки кода следующего вида:

@font-face {
  ...
  src: ... url(https://fonts.gstatic.com/...) ... ;
  ...
}

Затем нужно получить файлы шрифтов по ссылкам из url(…) и закодировать полученные бинарные данные в Base64, а далее нужно заменить эти ссылки на соответствующие им полученные данные в представлении Base64.

Образец блока на выходе:

@font-face {
  ...
  src: ... url(data:application/x-font-woff;charset=utf-8;base64,данные) ... ;
  ...
}

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