Как использовать в Google Fonts font display возникающие проблемы и их решение


Содержание материала:

Показ всего текста во время загрузки веб-шрифтов из google fonts

С недавних пор ресурс fonts.googleapis.com стал поддерживать свойство «font-display». С помощью него можно пройти еще одну рекомендацию Google PageSpeed.

Добавьте в конце адреса параметр display равный swap и рекомендация «Настройте показ всего текста во время загрузки веб-шрифтов» будет пройдена.

Так же важно, что бы в свойствах font-family, помимо основного шрифта, был задан встроенный шрифт замены. Например:

Если вы подключаете локальные шрифты, то в font-face нужно добавить свойство font-display: swap;

Управляйте шрифтами с помощью CSS font-display

Несколько способов сообщить браузеру, как подключить шрифт.

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

С помощью font-display вы можете дать браузеру указания, каким способом загрузки шрифта пользоваться. Например, указать, насколько ваш шрифт важен, и когда система откажется от загрузки шрифта в случае, если она будет занимать слишком много времени. Вы можете добавить свойство font-display к вашему @font-face правилу.

Fallback

Если вы зададите свойству font-display значение fallback, то браузер будет ждать менее секунды, пока загрузится ваш пользовательский шрифт. Если к этому момент шрифт не загрузится, будет использован откат. В этом случае пользователю не придется долго разглядывать пустую страницу.
Загвоздка, конечно же, в том, что ваш прекрасный пользовательский шрифт не будет загружен на этой странице, а это, возможно, испортит внешний вид и впечатление от вашего сайта. font-display: fallback очень прямолинеен: если ваш шрифт не загрузился вовремя, то он не будет использован.

Если ваш пользовательский шрифт критически важен для дизайна сайта, для вас есть вариант получше. font-display: swap сразу же использует резервный шрифт. В этом случае, как только завершится загрузка вашего пользовательского шрифта, будь то через секунду или 5, браузер заменит резервный шрифт на ваш пользовательский. Стоит отметить, что смена шрифта может раздражать пользователя, особенно если он уже сфокусировался на чтении.

Block

Если вы все-таки решили, что ваш шрифт очень важен, используйте font-display: block. Это свойство скажет браузеру подождать некоторое время (около трех секунд), чтобы загрузить шрифты. В это время пользователь не будет видеть никакого текста. Через три секунды будет использован резервный шрифт.
С этого момента, неважно, как долго браузер будет загружать шрифты, он заменит недавно загруженный на резервный, даже если пользователь уже начал прокручивать и читать вашу страницу.

Какой способ использовать?

Если производительность стоит на первом месте, а пользовательские шрифты не очень-то вас волнуют, то font-display: fallback – это ваш выбор. Если пользовательский шрифт очень важен, то swap и block для вас.
Имейте в виду, что каким бы способом вы не воспользовались, сначала всё хорошо протестируйте.

Перевод статьи Control web typography with CSS font display
Автор оригинального текста: Umar Hansa

Правильная асинхронная загрузка шрифтов Google Fonts

При проверке скорости сайта goolgle speed insight или gtmertrix нам говорят, что шрифты гугл блокируют содержимое страницы и их необходимо загрузить позже.

rel =’ stylesheet ‘ type =’ text/css ‘>

Делаем все с помощью скрипта fonfaceobserver, который также загружаем асинхронно (весит всего 5 Кб в несжатом виде).

Качаем здесь: https://github.com/bramstein/fontfaceobserver/

Сам скрипт кладем например в папку JS? получится, что доступен он по ссылке «ваш сайт»/ js/fontfaceobserver.js

Далее в header добавляем вместо ссылки на гугл шрифт (для начала просто закомментируйте его

Вот и все, вариант рабочий, есть немного другие решения, но хром ругается на ошибки в переменных.

Правильный способ встраивания шрифтов @font-face от google

14 октября 2020 | Опубликовано в css | Нет комментариев »

Несколько раз мы сталкивались со странным и неправильным способом встраивания шрифтов @font-face от google, поэтому мы решили посвятить этому урок. Например, если вы выберете в Google Fonts шрифт Open Sans, или любой другой, то получите ссылку или @import с ссылкой, которые дают вам возможность использовать этот шрифт для вашего сайта:

Вы можете посмотреть, что находится по ссылке:

Разумеется, это объявления @font-face.

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

Это и есть неправильный способ.

Проблема заключается в том, что содержимое файла таблицы стилей по ссылке изменяется в зависимости от того, какой браузер ее запрашивает. Изображение выше получено при использовании браузера Chrome версии 66. А вот таблица стилей для браузера Firefox версии 20 в системе Windows 7:

И она сильно отличается. В ней есть ссылки только на файлы в формате woff, а файлов в формате woff2 нет. А если открыть эту ссылку в браузере Internet Explorer версии 8, то там будет присутствовать @font-face с ссылкой на файл в формате eot.

Суть в том, что файл таблицы стилей по этой ссылке меняется в зависимости от нужд текущего браузера. Это реально здорово, и в этом ничего не нужно менять. Если новым браузерам понадобятся файлы в других форматах и другой синтаксис CSS, они будут предоставлены.

Конечно, сервис Google Fonts имеет свои недостатки. Например, если Вы не можете изменить объявление @font-face, Вы не сможете использовать свойство font-display (отображение шрифта). Возможно, со временем это будет добавлено, или, возможно, есть смысл держать нужные шрифты Google Fonts на своей площадке.

Управляем поведением font-face в CSS

Когда вы загружаете шрифт через font-face , браузер решает что отобразить пока шрифт загружается. Браузеры ждут некоторое время, перед тем как решить что делать дальше.

Браузер Время ожидания Запасной шрифт Замена шрифта
Chrome 35+ 3 секунды + +
Opera 3 секунды + +
Firefox 3 секунды + +
Internet Explorer 0 секунд + +
Safari нет ожидания
  • Chrome и Firefox ждут 3 секунды перед тем, как отобразить текст запасным шрифтом. В дальнейшем, когда шрифт загрузится элементы использующие этот шрифт перерисуются с новым шрифтом. Возможно вы замечали как некоторые страницы “мерцали” при смене шрифта.
  • Internet Explorer не ждет трех секунд, а сразу отрисовывает текст: если браузер еще не загрузил шрифт, то используется запасной. После загрузки шрифта элементы перерисуются.
  • В Safari нет времени ожидания

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

Временная шкала отображения шрифта

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

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

При перерисовке запасным шрифтом браузер находит первый шрифт, объявленный в font-family , который уже готов к использованию, и отрисовать текст им.

При перерисовке невидимым запасным шрифтом для элемента, браузер ищет шрифт так же как и при “перерисовке запасным шрифтом”. Создает анонимный шрифт с похожими метриками как у выбранного шрифта, но с невидимыми символами, и отрисовывает текст им.

Контролируем отображение шрифта

Свойство font-display определяет как шрифт отобразится, в зависимости от того, когда шрифт загрузят.

Имя font-display
Для @font-face
Значения auto, block, swap, fallback, optional
По умолчанию auto

‘auto’ Использует поведение браузера по умолчанию. Обычно это поведение ‘block’. ‘block’ Устанавливает короткий период блокировки (3 секунды) и бесконечный период замены.

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

Браузер сразу отрисовывает текст безопасным шрифтом и пользователь не видит пустого экрана дожидаясь загрузки шрифта. Но когда шрифт загрузится, он сразу заменится.

Работает так-же как и swap, но если шрифт не загрузился в течении 3-х секунд, то браузер отрисует текст запасным шрифтом. Подходит для текста предназначенного для вдумчивого чтения. В таком случае шрифт играет второстепенную роль. Если он быстро не загрузился, то не стоит отвлекать пользователя мерцанием от замены шрифта.

Похоже на ‘fallback’, но по истечению 3-х секунд, браузер может или прервать загрузку (при медленном интернете) или понизить приоритет загрузки. Когда браузер загрузит шрифт, он все равно продолжит отображать текст запасным шрифтом, но если вы обновите текущую или перейдете на другую страницу, для которой установлено значение ‘optional’ и используется тот-же шрифт, то браузер отрисует текст загруженным шрифтом.

Видео пример работы свойства font-display

Как протестировать

Свойство пока работает только в Chrome Canary. Чтобы посмотреть на его работу нужно:

  • Запустить Chrome Canary
  • Открыть флаги chrome://flags
  • Включить “enable-experimental-web-platform-features”
  • Перезапустить Canary

Когда использовать

В Canary это свойство появилось 1 декабря 2015 года, поэтому думаю что в течении 3-6 месяцев оно заработает в стабильной версии. Но уже можно добавить одну строчку CSS кода, чтобы в будущем сайт отображал шрифты выбранным вами способом. Я бы ставил по умолчанию font-display: swap .

Дополнительно

Это свойство позволит визуально ускорить отображение сайтов использующих font-face , поэтому я жду когда поддержка этого свойства появится в стабильной версии хрома. Если вы заинтересовались этой темой, то вот ссылоки для дополнительного чтения:

Еше можно подписаться на email рассылку новых заметок. Не чаще раза в неделю, без спама.

Как использовать в Google Fonts font display: возникающие проблемы и их решение

Ещё несколько лет назад web был полон скучными стандартными шрифтами, часть из них вообще не является читабельной. Это было сделано для того, что бы исключить отсутствие шрифтов на веб-страницах и привести всех к единому формату. Конечно же это нравилось не всем и стали появлятся подгружаемые шрифты, так же стали появляться сторонние сервисы, предоставляющие API для шрифтов. Но их стабильность и выбор самих шрифтов оставляли желать лучшего. Тем более встала проблема с лицензированием самих шрифтов. А некоторые сервисы, такие как Type Kit предоставляют такие услуги за деньги, к примеру $49-$99 за то, если вы хотите использовать шрифты более чем на одном сайте, тем более выбор даётся только из 230 шрифтов в бесплатной версии.

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

Но как и все шрифты, у них есть свои недостатки. Как известно не все из шрифтов поддерживают кириллицу и другие не латинские шрифты. А их довольно много, к примеру на некоторые языки, такие как арабский имеет всего 16 шрифтов из 808. Так что прежде, чем выбирать шрифт для своего сайта, убедитесь, что он поддерживает кириллицу. Сделать это можно довольно просто. Просто в боковой панели Google Fonts, выберите Languages и затем нажмите на Cyrillic. Таким образом вы исключите неприятные ситуации со шрифтами на вашем сайте. Сейчас доступно 68 шрифтов из 808, что довольно неплохой показатель. Но если вам требуются только латинские буквы, то смело убирайте фильтры, все шрифты поддерживаемые.

После того, как вы выбрали нужный шрифт. Нажмите на плюсик над ним и выберите его настройки. Вставить шрифт в страницу можно несколькими способами, прямо в HTML или через CSS. Для наглядного примера, мы выбрали кириллический шрифт Roboto Slab, он довольно популярный и довольно читабельный, так что это один из лучших выборов. Первым делом зайдите в Customize и выберите внутренние настройки — Cyrillic и Cyrillic Extended. По нужде можете выбрать размер жирности, но это можно изменить уже в самом CSS при разработке страницы и кстати рекоммендуется это делать там.

Далее мы видим довольно простой код CSS и HTML для вставки на сайт. Вы, как описано выше можете выбрать из 2х вариантов. Рассмотрим первый, прямая вставка кода на страницу HTML. В сайта, вставьте код выданный Google Fonts, а затем на выбор, как вы любите пропишите в для font-family: ‘Roboto Slab’, serif;

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

Второй вариант самый удобный и даёт больше возможностей для прямо работы с текстом. Просто пропишите font-family: ‘Roboto Slab’, serif; в любом CSS селекторе.

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

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

Как решить проблему нечеткого размытого шрифта в новых версиях Google Chrome

Периодически после обновления браузера Хром у пользователей возникали проблемы со шрифтом: он становился мыльным, нечетким, размытым и пр. До 51-ой версии включительно проблема эта легко решалась, а вот обновление до 52-ой версии принесло всем пользователям браузера большой сюрприз…

Если версия Хрома 51 и ниже, то Вам сюда, а если 52 и выше, то слушайте внимательно… В настоящее время нет решения того, как средствами самого Хрома сделать шрифты четче – разработчики лишили пользователей влиять на это, убрав параметр DirectWrite из экспериментальных настроек!

Есть только два способа решить данную проблему:

  • Во-первых, перейти на другой браузер, например, Firefox. У последних версий Opera кстати есть такая же проблема со шрифтами, что и у Chrome, так как основаны они на одном и том же движке.
  • Во-вторых, откатить Хром на предыдущую версию, точнее на ту, где проблема еще отсутствовала (51.0.2704.106), и настроить параметр DirectWrite. Но тут есть одна загвоздка…

Разработчики гугл и тут всех перехитрили 🙂 Сделать откат через настройки самого браузера невозможно – такая опция отсутствует. Даже если Вы удалите текущую версию программы, то на официальном сайте Вы не найдете установочных файлов предыдущих версий.

Как сделать откат на предыдущую версию Google Chrome

Остается только такая схема:

  1. Удалить текущую версию Хрома (выбираете Хром в списке установленных программ, кликаете на нем правой клавишей мыши и выбираете «Удалить»)
  2. Найти в интернет на варезниках или торрентах версию 51.0.2704.106
  3. Установить её и не испытывать проблемы со шрифтами

Кто хочет может искать самостоятельно, а мы уже нашли, скачали, и теперь делимся с Вами ссылочкой на Яндекс.Диске: Google Chrome 51.0.2704.106 (есть версия как для 64bit, так и для 32bit систем).

  1. Перед удалением Хрома синхронизируйте все нужные данные с аккаунтом Google дабы они не пропали! Для этого в адресном окне браузера наберите chrome://settings/syncSetup и нажмите ввод. В открывшемся окошке поставьте галочки напротив всех нужных пунктов, а лучше просто выберите опцию «Синхронизировать всё», как на скриншоте ниже – так будет надежней 🙂

Подождите некоторое время для завершения синхронизации, особенно если ранее эта опция была у Вас отключена.

  1. После установки версии 51.0.2704.106 верните прежние настройки Chrome путем синхронизации и обязательно отключите автоматическое обновление до свежей версии, а то браузер опять обновится и всё проделанное пойдет насмарку!

Решение других распространенных проблем с данным браузером (рейтинг пользователей):

Как отключить обновление Хрома

Чтобы браузер не мог обновляться, делаем одну хитрость. Переходим в папку c:\Program Files\Google\Update\ или c:\Program Files (x86)\Google\Update\, если у Вас 64-битная версия ОС, удаляем файлик GoogleUpdate.exe.

Всё, никаких проблем:) В интернете рекомендуют редактировать записи реестра, изменять групповые политики Windows, добавлять административные шаблоны и пр. и пр. Как всегда – большинство подобных инструкций написано теми, кто сам ничего этого не делал, а просто занимаются переписыванием друг у друга. Ничего этого не надо. Просто удаляете файлик GoogleUpdate.exe и Хром больше не сможет обновиться.

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

P.S. (Update 06/2020)

Многим пользователям помогло изменение в экспериментальных настройках параметра font-cache-scaling. Для этого в адресную строку скопируйте и вставьте chrome://flags/#enable-font-cache-scaling, после чего выберите состояние «Disabled» как показано на скриншоте:

Друзья, удалось ли Вам с помощью данной инструкции решить проблему размытого нечеткого шрифта в Google Chrome? Поделитесь этой статьей со своими друзьями, используя кнопочки соц. сетей – они обязательно скажут Вам спасибо, ибо наверняка испытывают те же проблемы со шрифтами, что и Вы.

Исправляем кривой шрифт в Google Chrome

Ребят, приветствую) Думаю, многие сталкивались с проблемой нечеткого шрифта в новых версиях Google Chrome. Как и многие, я долго мучался с этой проблемой и помогало только полная очистка кэша и временных файлов. И как назло в интернете все решения либо неактуальные, либо нерабочие.

Недолго порыскав в настройках хрома нашел функцию, которая отключает злополучное «Масштабирование FontCache». Представляю решение на общее обозрение:

1. Убедитесь, что у Вас в OS Windows включен ClearType. Это можно сделать следующим способом:

В строке поиска меню пуск набираем «ClearType» и настраиваем шрифт по своему вкусу.

2. Идем в Google Chrome, в адресной строке пишем chrome://flags/#enable-font-cache-scaling и отключаем функцию. Далее хром предложит перезагрузиться, выполняем это.

Извиняюсь, если для кого-то боянисто, но мне не удалось найти подобного решения в интернете. Надеюсь Вам помогло 🙂

Suggestion: Implement font-display #358

Comments

Copy link Quote reply

vijayaraghavanramanan commented Aug 19, 2020

font-display is getting some attention, although still experimental in many browsers.

Chrome/Canary, Opera and Firefox have it although it is disabled by default. Hope it comes out soon.

This leaves Google Fonts to implement it. Since it should be included with the @font-face declaration, Google Fonts can allow passing of a parameter such as «&display=swap» in the URL which creates css files with a declaration:

in the css file.

Are developers of Google Fonts thinking about it?

This comment has been minimized.

Copy link Quote reply

joaoramos commented Jun 18, 2020

Is there any progress on this topic?

This comment has been minimized.

Copy link Quote reply

This comment has been minimized.

Copy link Quote reply

zachleat commented Jun 18, 2020

It’s a descriptor that goes into the @font-face block.

This comment has been minimized.

Copy link Quote reply

davelab6 commented Jun 18, 2020

Aha, got it! 🙂 Thanks!!

This comment has been minimized.

Copy link Quote reply

thlinard commented Jun 19, 2020 •

This comment has been minimized.

Copy link Quote reply

zachleat commented Jul 26, 2020

Now that Chrome 60 is stable, the priority for this should be bumped up! It’d be an awesome addition.

This comment has been minimized.

Copy link Quote reply

zachleat commented Aug 1, 2020

This would still be really great to have but @font-feature-values may be another option?

Doesn’t look like this is available anywhere yet though, so there is obviously going to be browser support mismatches between font-display and @font-feature-values so let’s keep pushing for this issue ��

This comment has been minimized.

Copy link Quote reply

davelab6 commented Aug 2, 2020

This comment has been minimized.

Copy link Quote reply

sladen commented Aug 3, 2020

High-level overview: new multi-browser CSS key/value pair that needs to go into each CSS snippet generated and delivered by Google Fonts:

When a remotely-served font is taking too long to load (or will never be loaded), this helps the browser know what to do with the textual content it is waiting to rendering. By adding font-display: swap; the browser is directed to use a local already-available system font so that the user can see/read their text quickly.

Article and jsbin demo on developers.google.com :

This comment has been minimized.

Copy link Quote reply

webholics commented Sep 6, 2020

The question is whether it is save to just copy the font-face declaration which google generates for now and add the font-display on our own. At the end my question is how often a URL like https://fonts.gstatic.com/s/roboto/v16/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2 changes?

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 8, 2020

It’s not just a question of how often the font URL changes.

Google fonts’s css file is different for different browsers. Even the same version of Chrome in Windows and Mac will receive different css files.

So if you are suggesting that one can generate a css file simply by copy-pasting the font-face declarations into your own css file doesn’t work for everyone.

So it is useful to have font-display generated in the css by the Google Fonts server itself.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 23, 2020

@vijayaraghavanramanan
Just asking, why don’t we use a static URL + redirect?
What are the technical considerations on this?

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 24, 2020

What do you have in mind here?

Since since the font, weights, style etc are passed in the query string in the URL, so I thought it’s natural to pass «font-display» in the URL.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 24, 2020 •

@vijayaraghavanramanan
Of course, I would prefer query strings as the solution.

I was just curious about why we don’t redirect from some static URL to https://fonts.gstatic.com/s/roboto/v16/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2 and the like.

I know, this becomes irrelevant with query strings. But until then, it would have been reasonable to be able to define something like:

What are the technical considerations on serving different content on static paths for single font files instead of putting different paths inside https://fonts.googleapis.com/css?family=Open+Sans ?

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 24, 2020 •

What Google Fonts does is that it creates different css files for different browsers.

The server sees the browser/version/OS and sends the right css file.

Even for a single version of Chrome in Windows/Mac OS, the font files (woff2/woff/ttf/svg/eot) are different.

Try to look at the css files in different browsers to check.

So that’s why it’s not appropriate to link the woff2/woff files directly.

And for that reason, the website using Google Fonts can’t control «font-display» and Google may have to introduce it from their side.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 24, 2020

@vijayaraghavanramanan
That’s not my point. I understand that the file content served to different clients may be different. But just like https://fonts.googleapis.com/css?family=Open+Sans refers to different font files, it would be possible to serve the respective font files dynamically on the same static URL.

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 25, 2020

There are 847 fonts right now. Each has different weights, language, styles etc. One can even request multiple fonts like 2, 3 or maybe even 10 in the same request.

So I guess having static css files might not be optimal. Because there can be millions of different combinations.

Just guessing. Does that sound right?

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 25, 2020 •

@vijayaraghavanramanan
Please don’t get me wrong, I don’t talk about static CSS files, I do talk about static URL to address the fonts. Just like the URL https://fonts.googleapis.com/css?family=Open+Sans is non-generic and static but does serve different content for different clients, it would have been useful to be able to have static URL for the fonts like https://fonts.gstatic.com/s/opensans/v14/ that would then serve fonts like the one currently available via https://fonts.gstatic.com/s/roboto/v16/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 25, 2020

Apologies I didn’t get the points you raised right.

Font files can be multiple. So how a single request serve multiple files?

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 25, 2020

@vijayaraghavanramanan
https://fonts.googleapis.com/css?family=Open+Sans [1]
https://fonts.gstatic.com/s/roboto/v16/sTdaA6j0Psb920Vjv-mrzH-_kf6ByYO6CLYdB4HQE-Y.woff2 [2]
https://fonts.gstatic.com/s/opensans/v14 [3]
The URL [1] dynamically generates CSS that refers to [2] and the like. What if we had [1] look something like

and have [3] dynamically resolve to the font file needed (like e.g. [2]). This would move the responsibility from [1] resolving as needed to [3] resolving as needed and give developers more freedom in using CSS because the ugly URL like [2] would have been moved even more away from them.

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 25, 2020

Understand better now.

But how will you address the fact that one needs options for weights, styles and languages:

For example, I use the link for my site:

which generates a css file with 28 font-face rules.

your [3] will just give the woff2 file for weight 400 and style normal, latin.

Nor is it desirable to request every weight and style etc. The browser looks at a page and decides which fonts to download.

So I think what Google does now is good. One quibble is that there are two servers. Ideally should have been just one — both for the css and the font files.

Another way is Typekit, where you have an account and make a kit.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 26, 2020

@vijayaraghavanramanan
This wasn’t meant as a replacement of the auto-generated CSS files, rather I mean’t it might make things a bit easier in terms of e.g. the cache-ability of the CSS files as well as giving slightly more control to developers over working with the font files.

I think the query string solution is great in terms of being able to customize the font behaviour more. But in addition to this change, I might be practical to canonicalize the URL used to retrieve the respective font files.

This shouldn’t be hard to implement but might de-complicate things over the long run with caching being just one example.

The real question really is: What would be used?

  • Dynamic Serving + Vary Header
  • 301 Redirect + Vary Header
  • 302 Redirect + Vary Header

Any of these options should meet come in handy in terms of e.g. cache-ability but other technical aspects might have to be considered as well.

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 27, 2020

I might be practical to canonicalize the URL used to retrieve the respective font files.

The latest browsers get multiple woff2 files depending on the unicode range. So the recent versions of Chrome have separate files for latin, latin-ext, greek, greek-ext. Which the browser downloads depending on whether the page needs it or not.

Older browsers or Edge receive just one font file for a weight and a style.

So there’s no one font file really.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 27, 2020 •

@vijayaraghavanramanan
Yeah, I did realize that there are many font files, not one, but they could be redirected to dynamically from single URL the same way that the CSS files uses to .compile the paths.

Current: Static URL -> Dynamic CSS -> Dynamic Font Paths (-> No Redirects)
Suggestion: Static URL -> Static CSS -> Static Font Paths -> Dynamic Redirects -> Dynamic Font Paths

This comment has been minimized.

Copy link Quote reply

vijayaraghavanramanan commented Sep 27, 2020 •

Don’t know enough to know about redirecting to multiple files, but not the most efficient, I’d imagine.

The way unicode-range works in css font-face rules is that the browser downloads only the fonts necessary. So I don’t know how redirecting to multiples can help.

This comment has been minimized.

Copy link Quote reply

Androbin commented Sep 27, 2020

@vijayaraghavanramanan
The CSS files would keep the same format but the URL it uses to point to the font files would be static. It doesn’t matter if these would serve the font files directly or if they redirect to another URL. All of this can be done by looking at what files the client needs and then using the URL to figure out which unicode-range was requested.

https://fonts.googleapis.com/css?family=Open+Sans [1]
https://fonts.gstatic.com/s/opensans/v14/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2 [2]
https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2 [3]
https://fonts.gstatic.com/opensans/latin-ext.woff2 [4]
https://fonts.gstatic.com/opensans/latin.woff2 [5]

[2] would become [4]
[3] would become [5]
[1] would look something like

and the information, that [1] currently uses to determine the respective URL [2] and [3], could then be used to let [4] and [5] serve to font files.

The only thing that would change is that the URL pointing to the individual font files would contain just the information about the font family and the range and would then serve the font file needed using the information sent by the browser otherwise used to compile the CSS file.

Веб-шрифты Google не работают после обновления Firefox 7

Я понятия не имею, почему это происходит. Я следую стандартным проверенным и проверенным методам использования веб-шрифтов google

Это работает в Safari, Chrome и IE, но не в FF7.

Кто-нибудь сталкивался с этим. Я также попытался использовать JS-интеграцию и синтаксис @import, и это то же самое. Я действительно застрял.

Это известная проблема с Google Web Fonts. Внутреннее изменение конфигурации нарушило обслуживание одного из заголовков, необходимых для надежной работы в Firefox и IE9+. Теперь исправление распространяется, и оно должно работать в ближайшее время.

Спасибо за сообщение о проблеме!

(Я инженер команды Google Web Fonts, нашел это в твиттер-поиске, пытаясь выяснить, насколько глубоко поломка прошла)

Я думаю, что его проблема с Google В моем браузере FF 7.01 показан Comics Sans

И ответ без данных шрифта

но когда наберите этот адрес в строке url, я могу сохранить этот шрифт

так. Просто скачайте этот шрифт и просто добавьте на веб-страницу

В настоящее время проблема с Google заканчивается Webfonts. Это странно, потому что они работали всего несколько дней назад, и я видел, как они загружались один или два раза, но в противном случае он возвращался к резервному шрифту.

Ваш лучший вариант — загрузить файл и вручную вставить его на свою веб-страницу, используя @font-face. Там хорошая статья о том, что в шести версиях.

Я надеюсь, что Google скоро отсортирует его.

На всякий случай, это помогает кому-то, у меня просто возникла проблема с тем, что веб-шрифты Google не отображаются на коллеге Mac, а работают на других (аналогично настроенных) компьютерах Mac. Это было явно что-то клиентское, и оказалось, что это параметр browser.display.use_document_fonts (см. здесь).

Чтобы остановить это, это случай перехода к Предпочтениям.. Контент.. Шрифты и цвета. Дополнительно и убедитесь, что «Разрешить страницы выбирать свои собственные шрифты, а не мои выборы выше» проверяется.

Посмотрите другие вопросы по меткам css firefox font-face или Задайте вопрос

Топ-пост этого месяца:  Карта сайта (sitemap) для Joomla 3,sitemapjoomla 3
Добавить комментарий