Как скрыть элемент пока не применится нужный шрифт?

Question

В коде ниже, во время загрузки страницы вместо "u" генерируется знак рубля "₽" с нужными стилями. "u" здесь выступает в качестве заглушки и без нее, к сожалению никак.

<span class="ruble">u</span>

.ruble {
    font-family: 'Conv_rouble' !important;
    font-weight: normal !important;
}

Проблема в том, что при медленном интернете во время загрузки страницы можно увидеть эту "u" буквально на 1-2 секунды. Заказчик просит это исправить...
Подставить вместо "u" сам знак ₽ не прокатит, в этом случае шрифт 'Conv_rouble' не сработает :)
(пробел тоже).
Кучу вариантов потыкал в коде, так ниче и не работает(.

Решал похожую проблему во Vue, нужно было скрыть появление vue-переменных. Но там это легко решается через v-cloak. Здесь же нужно сделать тоже самое, только с css..

Хотелось бы решение что-то типа скрыть элемент, пока не сработает шрифт, скорее это как-то через js нужно сделать. Но я вообще уже не понимаю как. Если кто-то сталкивался с подобным или есть идеи, буду рад почитать)

Answer 1

html:

<span class="ruble none">u</span>

css:

.ruble{
    font-family: 'Conv_rouble' !important;
    font-weight: normal !important;
}
.none{
    display: none;
}

js:

$(document).ready(function () {
   let ruble = document.getElementsByClassName('ruble')
   ruble.classList.remove("none");
}

Answer 2

если проблемy правильно понял, это должнo помочь.

.rouble {
       display: inline-block;
       min-width: 1ch;
}

БЛОГ НА HUSL

Как скрыть элемент пока не применится нужный шрифт?

Ответы (2 шт):