Google глючит или как корпорация забивает на свои же сервисы, которые не приносят прибыль

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

Не буду писать много текста. К сути.

Google Fonts

Все вебмастера и дизайнеры используют Google Fonts или хотя бы раз да использовали. Это Google шрифты, которые без особых навыков или долгих настроек можно подключить на своем сайте или использовать в своем макете. Очень удобный и полезный инструмент, чтобы подключить любой шрифт или несколько шрифтов, которые будут быстро загружаться и работать в любом браузере или графическом редакторе. Сервис удобный, понятный и очень простой. (Хотя другой сервис от Google PageSpeed Insights подключенные стили шрифтов отнесет к ресурсам, блокирующим отображение сайта, и снизит оценку производительности вашего сайта, но это уже другая история).

Google Fonts Get Started

Для Google Fonts есть документация с примерами и возможностями, о которых не многие знают, доступна она по этому адресу https://developers.google.com/fonts/docs/getting_started. В документации множество примеров и интересных «лайфхаков», например, как можно подключить какой-то диковинный шрифт только для логотипа, чтобы подгрузить только нужные буквы без подключения более тяжелых файлов с перечнем всех букв и символов. И много других полезных примеров, перевод гугловского мануала я когда-то выкладывал у себя в этой статье Google Fonts. Документация и примеры использования.

Предистория

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

Например, подключим шрифт Rancho и эффект огня к заголовку.

Подключим шрифт и нужный эффект fire-animation из таблицы (в документации) из колонки API Name:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=fire-animation">

Для нужного заголовка или текста добавим соответствующий класс effect=fire-animation из таблицы в колонке Class Name:

<h2 class="font-effect-fire-animation">Гарячі пропозиції</h2>

Гарячі пропозиції

Суть проблемы

А теперь давайте попробуем подключить другой эффект, например «кирпичной стены» — brick-sign. Вот только даже в таблице из документации, этот пример не отображается.

На момент написания статьи (17.12.2021) вот такой скриншот таблицы с примерами (Chrome Версия 96.0.4664.110):

Как видно, в браузере Chrome некоторые эффекты не отображаются совсем, и даже текст не виден.

В Safari, Firefox и Opera дела обстоят немного лучше, эффектов также нет, но хотя бы текст черным цветом можно прочитать. Забавно, что Google Chrome не может отобразить текст, на который наложены эффекты Google Fonts…

Пытаемся разобраться в чем проблема, открываем браузера Консоль и видим целую кучу ошибок:

Эта проблема уже, наверное, более года наблюдается, и никак не исправляется.

Разбираем чуть глубже

Не отображаются тексты у которых эффекты добавлены с помощью правила -webkit-mask-image, а все остальные эффекты нормально работают.

Свойство -webkit-mask-image устанавливает изображение, которое используется как слой маски для элемента. То есть для данного свойства нужна картинка. А она не загружается, из-за чего не работает и сам эффект.

Если всмотреться в Консоль, то как раз таки можно и заметить, что браузер не смог загрузить те самые картинки, которые необходимы для эффектов, которые используют свойство -webkit-mask-image, например:

Access to fetch at 'https://themes.googleusercontent.com/static/patterns/distress-light.png' from origin 'https://developers.google.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Изображение https://themes.googleusercontent.com/static/patterns/distress-light.png с сервера https://developers.google.com не было загружено, из-за блокирования запроса CORPS в заголовке изображения. То есть саму картинку можно открыть по прямой ссылке и даже можно вставить на своем сайте, но нельзя использовать в свойстве -webkit-mask-image из-за заголовков, которые сервер отдает с этой картинкой. Надеюсь, я правильно объяснил, более подробно можно прочитать здесь. И казалось бы одна небольшая настройка на сервере решила бы проблему с недоступностью картинок для эффектов, но с другой стороны, эти заголовки созданы для безопасности, и наверное не так просто на сервере Google отключить или поменять какие-то правила безопасности.

Но давайте просто возьмем эти картинки и загрузим их на другой сервер, и посмотрим, как будут выглядеть данные эффекты:

See the Pen
Enabling font effects for google fonts — FIXED IMAGES
by Denis (@deniscreative)
on CodePen.0

Так гораздо лучше, так почему же в Google Fonts не могут уже год решить эту проблему? Могли бы перенести изображения на другой сервер или поменять заголовки для картинок, которые отдает сервер https://developers.google.com

Может они не знают?

Пришлось восстанавливать пароль от своего старого аккаунта Twitter, чтобы написать их техподдержке.

Посмотрим, решат ли они эту проблему когда-нибудь или просто закроют вообще этот функционал, хоть он, по-моему мнению, очень даже интересный, хоть и малоизвестный.

Включить видео с youtube после нажатия на кнопку или элемент

Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант —…

Как убить зависший локальный сервер с ошибкой «EADDRINUSE: address already in use»

В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…

Ссылки для звонка/чата/перехода для мессенджеров (Skype, Viber, Telegram, WhatsApp, Facebook Messenger)

Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…

Настройка мобильного меню на сайте

Тема не новая, просто хочу вынести пример мобильного меню, который я использую чаще всего. На…

Ответить