Как предварительно загрузить шрифт или отследить когда он подргузился?

Question

[Богдан Кучерук]

Загружаю куски текста в блок, затем мне надо его прокрутить в самый низ:

var block = document.getElementById("div");
    block.scrollTop = 9999;

Проблема в том что загружаю посторонний шрифт который больше обычного:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">

И JS не докручивает блок до конца. Как это можно исправить?

Answer 1

[igor042018]

1) Не лучшее решение но можно убрать &display=swap, теоретически должно сработать.
2) Попробовать подключить шрифты с своего сервера и сделать пред загрузку шрифта https://habr.com/ru/company/ruvds/blog/470870/ не могу код вставить
3) font-family: "Poppins", "Подобрать веб безопасный шрифт с похожими размерами", sans-serif ( https://www.cssfontstack.com/ )
4) Если скинете ссылку могу детальнее посмотреть может смогу помочь

Comments

[Богдан Кучерук]

&display=swap не работает(

Пока шрифты со своего сервера подключить не могу, сайт на OpenServer( Но это вариант, когда все будет готово, спасибо большое!)

Answer 2

[Александр Каторгин]

document.addEventListener('load', function(){
	var block = document.getElementById("div");
        block.scrollTop = 9999;
});

Comments

[Богдан Кучерук]

Не работает( Шрифт подгружается позже чем DOM

[Александр Каторгин]

Да, не то указал, с "DOMContentLoaded" не сработает. Укажите "load" (внешние ресурсы были загружены, стили применены, размеры картинок известны и т.д.). Отредактировал код

[Богдан Кучерук]

Александр Каторгин, шрифт подгружается после срабатывания функции все-равно(