web関連

FONTPLUSで発行したスクリプトを貼りつけたらbodyにvisibilityが付与される件

2018/09/03

2018/09/04

/

FONTPLUSで発行したスクリプトを貼りつけたらbodyにvisibilityが付与される件

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>
scriptタグで外部のソースコード読み込んでから出力しているから遅いんだよなぁ「delay=1」「delay=2」を使うくらいならcssで制御した方がスムーズな気がする
 

サイトの読み込みの挙動がおかしいと思って調べていたけど何が原因かわからなくて「おかしい、おかしいいなぁ」とjs、php、プラグイン見ていって最後にFONTPLUSのスクリプトタグにたどり着いた。
完全に盲点でしたわ…