Откуда непонятные символы вместо иконочного шрифта?

Question

[vahromeevilya-widestudio]

Добрый день. Есть сайт. И на нем переодически вместо иконочного шрифта появляются непонятные символы



Проблема воспроизводится рандомно, просто переходя по страницам и нажимая cmd + shift + r можно словить данный баг.

Причем так происходит только с иконочным шрифтом , И! Например в хлебных крошках поставленно длинное тире как спецсимвол html , с ним тоже такое происходит.

В чем может быть проблема?

Comments

[Lynn «Кофеман»]

Самое тривиальное — шрифт не загружается.

[Lynn «Кофеман»]

А вообще иконочные шрифты уже лет пять как не рекомендуются к использованию.

[vahromeevilya-widestudio]

Lynn «Кофеман», я словил еще раз ситуацию, чтобы проверить загружается ли шрифт

Шрифт загружается. Плюс он очень маленький. Это не библиотека с иконками, а вручную составленный только с нужными иконками.

[Adamos]

vahromeevilya-widestudio, может быть, что-то с руками, которыми он составлен? Например, символы с иконками оказались не в том разделе уникода...

[vahromeevilya-widestudio]

Adamos, Шрифт подгружается нормально в 95% случаев. Эта проблема проявляется рандомно и в редких случаях, но появляется

[vahromeevilya-widestudio]

Adamos, Тем более под вручную , я подразумевал сайт https://icomoon.io/

[Ankhena]

vahromeevilya-widestudio,
Не получилось воспроизвести проблему.
Раз вы собирали шрифт, значит, есть исходные svg.
Так что можно взять и выкинуть шрифт.

[vahromeevilya-widestudio]

Ankhena, Да тоже уже думаю над тем чтобы заменить шрифт просто svg

[Ankhena]

vahromeevilya-widestudio, довольно часто делаю так:
в :root определяются кастомные свойства со всем иконками
--icon-search: url(data:image/svg+xml, и т.д.)

пример

--icon-search: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.171 20.8154H22.0189L21.6106 20.4217C23.0397 18.7592 23.9002 16.6008 23.9002 14.2529C23.9002 9.01749 19.6564 4.77374 14.421 4.77374C9.18557 4.77374 4.94182 9.01749 4.94182 14.2529C4.94182 19.4883 9.18557 23.7321 14.421 23.7321C16.7689 23.7321 18.9272 22.8717 20.5897 21.4425L20.9835 21.8508V23.0029L28.2752 30.28L30.4481 28.1071L23.171 20.8154ZM14.421 20.8154C10.7897 20.8154 7.85848 17.8842 7.85848 14.2529C7.85848 10.6217 10.7897 7.69041 14.421 7.69041C18.0522 7.69041 20.9835 10.6217 20.9835 14.2529C20.9835 17.8842 18.0522 20.8154 14.421 20.8154Z' fill='%23BEDEF5'/%3E%3C/svg%3E%0A");

И дальше в bg

background: var(--icon-search) no-repeat ... и что там ещё нужно

Если нужно менять цвет, то не в bg, а в mask.

[vahromeevilya-widestudio]

Ankhena, Ооо, спасибо за интересную идею. Рассмотрю ее обязательно

Answer 1

[vahromeevilya-widestudio]

В итоге мне помогло то, что поставил предзагрузку шрифта с 5 места по счету на 1. Видимо сервер не всегда успевал отдавать шрифт вовремя, поэтому и случались такие баги.