Web production note

　【更新日 : 】

FONTPLUSのスクリプトコードによるレイアウト崩れへの対応案（文字の非表示は維持しつつbodyにvisibilityプロパティが設定されるのを回避する）

Category：
css / js
Tags：
, , ,

FONTPLUS独自の表示スタイル切り替え機能を用いて、Webフォントが読み込まれるまで非表示にする設定（「Webフォント適応箇所のみ非表示にする」or「Webサイト全体を非表示」）の適応時に、Webサイトのレイアウトが崩れてしまった際の対応案です。

記事執筆時点（2025年7月）での検証内容です。FONTPLUS側で仕様変更が発生した場合、以下の手法は不要になる可能性があります。

レイアウト崩れの原因（bodyに追加されるvisibilityプロパティ）

FONTPLUSの独自機能で非表示設定を入れるとbodyタグにvisibilityプロパティが追加されます。

visibility : hidden;（非表示）→visibility: visible;（表示）というプロセスで非表示の機能が提供されていますが、表示された後もbodyタグに visibility: visible; が残り続けるため、このプロパティ由来のレイアウト崩れが発生する可能性が非常に高くなります。

visibility - CSS: カスケーディングスタイルシート | MDN

developer.mozilla.org

visibility – CSS: カスケーディングスタイルシート | MDN

visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは の行や列を隠すこともできます。…

visibilityプロパティのバグ

主にSafariで散見される事象ですが、clip-path、filter系、transformなど、スタッキングコンテキストが発生するプロパティなどで設定が効かないバグが発生しやすくなります。

また、visibility : hidden;になっている過程でCSSアニメーションが実行されてしまうとアニメーションが発火していないように見えるなど、ページ読み込み時に設定しているアニメーションなどにも影響を与える可能性があります。

回避案：FONTPLUSの非表示設定は利用しない

管理画面を触れる場合は、「システム既存フォントにて表示（標準設定）」に変更して埋め込みコードを再生成します。

埋め込みコードしか触れない場合は、パラメータの途中にある「&delay=1 or 2」を削除します。

<!-- FONTPLUS独自の表示スタイル切り替え機能が設定されているコードの例 -->
<script src="https://webfont.fontplus.jp/accessor/script/fontplus.js?英数字=英数字%3D&delay=1[設定内容によってこの後にも&パラメータが続く場合がある]"></script>

非表示設定を利用せず「Webフォント適応箇所のみ非表示」を再現したい場合

「システム既存フォントにて表示（標準設定）」ではWebフォントが読み込まれるまで代替フォントが表示されるため、置換する段階で文字のチラつきが発生します。

FONTPLUSの独自機能は、本来この挙動を回避したいがために設定していた機能だったと思いますが、visibilityプロパティ由来で発生するバグは複雑な実装をしているケースも多いと思われるので、修正対応の工数も馬鹿にできません。

外部要因のvisibilityに振り回される工数をなくす目的で、独自機能は利用せずに似た挙動を再現してみます。

font-displayオプションを追加

FONTPLUSのスクリプトコードはパラメータに「&display=xx」を追加するとfont-displayプロパティの設定を追加することができる機能があります。

font-displayはCSSの@font-faceルールのディスクリプタ（記述子）で、Webフォントのダウンロード状況に応じてどのようにフォントを表示するかを指定するものです。FONTPLUSのスマートライセンス・プランでは、JavaScriptスニペットにdisplayパラメータを追記することでfont-displayを利用できます。

ダウンロード状況に応じてフォントの表示を変える | Webフォント・サービス FONTPLUS

fontplus.jp

ダウンロード状況に応じてフォントの表示を変える | Webフォント・サービス FONTPLUS

FONTPLUS（フォントプラス）は、バラエティ豊かなプロ向けのフォントが使えるWebフォントサービスです。

font-display - CSS: カスケーディングスタイルシート | MDN

developer.mozilla.org

font-display – CSS: カスケーディングスタイルシート | MDN

font-display は @font-face アットルールの記述子で、フォントがダウンロード済みで利用できるかに基づいて、どのようにフォントの種類を表示するかを定めます。

&display=blockを追加

font-display: block; は、最初の3秒間はテキストを透明にしますが、Webフォントが読み込まれた時点で置き換えます。また、3秒経っても読み込まなかった場合はデバイスの代替フォントを表示して、読み込み次第置き換わる設定です。

今回はこれを用いて「&delay=1 or 2」削除したスクリプトコードの末尾に「&display=block」を追加します。

<!-- FONTPLUS独自の表示スタイル切り替え機能が設定されているコードの例 -->
<script src="https://webfont.fontplus.jp/accessor/script/fontplus.js?英数字=英数字%3D[&delay以外のパラメータが続く場合がある]&display=block"></script>

独自コードの追加：FONTPLUSのスクリプトコードが読み込まれるまでの間だけ文字を非表示にする

font-displayオプションの設定はFONTPLUSのスクリプトコードが実行された後で適応されるため、スクリプトコードが読み込まれるまでは文字が表示されてしまいます。

殆どのケースではほぼ一瞬の出来事だと思いますが、これを回避する自作の対処法を追加します。

①CSSで文字透明化のclassを作成

.loading * {
  color: transparent !important;
}

②bodyの開始タグ直前に文字透明化のclassを追加するscriptを埋め込む

bodyタグが読み込まれた直前はまだテキスト情報まで読み込まれていないため、この段階で文字透明化のclassを付けることでテキストの表示を防ぎます。

<body>
  <script>
    document.body.classList.add('loading');
  </script>

</body>

文字透明化のclassをhtml直書きで初めからbodyに埋め込む方法もありますが、その場合はJavaScriptを無効化している環境下で文字が表示されなくなるため、JavaScriptで追加する方が影響が少なくより安全です。

③文字透明化のclassを早期解除する

コンテンツ（DOM）が一通り読み込まれる頃にはFONTPLUSのスクリプトコードが実行され font-display: block;  が有効になっているはずですので、文字透明化のclassはDOMContentLoadedイベントで早々に取り除きます。

コードは自作のjs内かheadタグに直接埋め込みます。

自作js内

addEventListener('DOMContentLoaded', () => {
  document.body.classList.add('loading');
});

headタグに直接埋め込む

<head>
  <script>
    addEventListener('DOMContentLoaded', () => {
      document.body.classList.add('loading');
    });
  </script>
</head>

目次 を閉じる