Adobe Fonts を使用したサイトでwindow.scrollToがうまく動かなかった際に行ったこと

こんな人向け
Adobe Fontsを使用したサイト
ページを読み込んだ際に、特定のいちまでスクロールしたい
読み込み時のTypekit.load()がグローバルな場所にあるから、個別のページごとに設定するのが難しい

現象

ページを読み込んだ際に、

window.scrollTo();

を使用して、指定の要素の位置までスクロールしたいが、webfontの読み込みが終わってないため、各要素の高さの計算がおかしくなり、想定している位置と指定の位置にズレが生じる。


うまくいかなかった方法

全ての要素が読み込まれたあとにjsを実行すればいいと思って

document.addEventListener("DOMContentLoaded", function() {
  // 実行したい処理
});

などの方法をためしましたが、これらの方法では解決できませんでした。


解決方法

document.fonts.ready.then(function() {
 // すべてのフォントが読み込まれた後にのみ実行する必要がある操作を
 // ここに記述します。
});

このメソッドをつかうと、フォントの読み込み後にスクリプトを実行してくれるので、しっかりと指定した位置にスクロールすることができました。

最後まで読んで下さりありがとうございます! サポートして頂けましたら非常に励みになります。 頂いたものは全て制作費にさせて頂きます。