Google fontなどを使ってWebサイトを作った時に、読み込みが遅れて一瞬違う文字が表示されてしまう問題をずっと放置してたけどWeb Font Loaderを使って解決させました。
簡単に説明すると、opacity: 0;にしといてfontを読み込み終わったらJavascriptでopacity: 1;にして表示させるだけ。
Google fontの場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォントの併用デモ</title>
<style>
body {
opacity: 0; /* 初期状態で非表示に */
}
.wf-active {
opacity: 1; /* フォントがアクティブになったら表示 */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Roboto'] // Google Fontsから読み込むフォントファミリー
}
active: function() {
document.body.classList.add('wf-active'); // フォント読み込み完了時にクラスを追加
}
});
</script>
</head>
<body>
<!-- ここにページの内容を記述 -->
<h1>フォントが読み込み完了しました</h1>
</body>
</html>
@font-faceで指定したローカルフォントの場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォント読み込み完了後の表示制御</title>
<style>
@font-face {
font-family: 'Mouhitu';
src: url('../font/KouzanMouhituFontOTF.otf') format('truetype');
}
body {
opacity: 0; /* 初期状態で非表示に */
}
.wf-active {
opacity: 1; /* フォントがアクティブになったら表示 */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
document.fonts.load('1em Mouhitu').then(function () {
// ローカルフォントの読み込みが完了したらWeb Font Loaderを実行
WebFont.load({
google: {
families: ['Zen Maru Gothic'] // Google Fontsから読み込むフォントファミリー
},
active: function() {
// すべてのフォントが読み込み完了したらbodyの透明度を変更
document.body.classList.add('wf-active');
}
});
});
</script>
</head>
<body>
<!-- ここにページの内容を記述 -->
<h1>フォントが読み込み完了しました</h1>
<p>ローカルフォント「Mouhitu」と、Google Fontsを併用しています。</p>
</body>
</html>
このコードでは、まず@font-faceで指定した「Mouhitu」フォントが読み込まれるのを待ちます。
これが完了すると、WebFont.loadを呼び出して、その他のウェブフォントの読み込みを開始。
すべてのフォントの読み込みが完了した後に、ページの透明度が変更されてコンテンツが表示されます。
応援クリックよろしくお願いします！
