web関連

FONTPLUSで発行したスクリプトを貼りつけたら表示がおかしくなった

2018/09/03

webサービス

フォント

FONTPLUSでフォント用のスクリプトを発行して、サイトに貼りつけたらbodyにcssの「visibility」プロパティが当たり、サイト読み込み時の挙動がおかしかったので備忘録

現象：サイトが一瞬真っ白になる

以下のような現象が起きた。

サイトがブラウザ標準フォントで読み込まれる
サイトが一瞬真っ白になる
FONTPLUSで契約したフォントが当たって表示される

結論：「delay=1」「delay=2」はいらない

FONTPLUSの管理画面の「スクリプトの発行」→「Webフォントに切り替わるまでの表示スタイルを選択してください」で『標準設定』以外を選択して発行すると「delay=1」「delay=2」が出力されるけどいらない。

//　○　正しい
<script src="//webfont.fontplus.jp/accessor/script/fontplus.js?(英数字の羅列)&box=(英数字の羅列)"></script>

//　×　「delay=1」「delay=2」はいらない
<script src="//webfont.fontplus.jp/accessor/script/fontplus.js?(英数字の羅列)&box=(英数字の羅列)&delay=1"></script>

おまけ

「delay=1」「delay=2」があると以下のコードが出力される

//　bodyタグに「visibility: visible;」
<body style="visibility: visible;">

//　headタグ内に挿入される
<style type="text/css" id="fontplus_delay_css">.fontplus_target_tags {visibility:hidden;} body {visibility:hidden}</style>

サイトの読み込みの挙動がおかしいと思い調べていたが原因がわからなかった。js、php、プラグインを見ていき最後にFONTPLUSのスクリプトタグが原因だと判明。完全に盲点だった。