この Codelab では、Font Face Observer を使用してテキストをすぐに表示する方法を説明します。
Font Face Observer を追加
Font Face Observer は、フォントが読み込まれたタイミングを検出するスクリプトです。fontfaceobserver.js
ファイルはすでにプロジェクト ディレクトリに保存されているため、別途追加する必要はありません。ただし、スクリプトタグを追加する必要があります。
- [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
fontfaceobserver.js
のスクリプトタグをindex.html
に追加します。
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Font Face Observer を使用する
オブザーバーの作成
ページで使用されているフォント ファミリーごとにオブザーバーを作成します。
fontfaceobserver.js
スクリプトの後に次のスクリプトを追加します。これにより、「Pacifico」フォント ファミリーと「Roboto」フォント ファミリーのオブザーバーが作成されます。
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
どのフォント オブザーバーを作成する必要があるかわからない場合は、CSS 内で font-family
宣言を探します。これらの宣言の font-family
名を FontFaceObserver()
に渡します。フォールバック フォント用にフォント オブザーバーを作成する必要はありません。
たとえば、CSS が次のようになっているとします。
font-family: "Times New Roman", Times, serif;
FontFaceObserver('Times New Roman')
を追加します。Times と Serif は代替フォントであるため、FontFaceObserver を宣言する必要はありません。
フォントの読み込みを検出する
フォントの読み込みを検出するためのコードは次のようになります。
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
は、フォントの読み込み時に解決される Promise です。
デモサイトでは 2 つの異なるフォントを使用しているため、Promise.all()
を使用して、両方のフォントが読み込まれるまで待つ必要があります。
- 宣言した FontFaceObserver のすぐ下に、この Promise をスクリプトに追加します。
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️ チェックイン
スクリプトは次のようになります。
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
fonts-loaded
クラスを適用
- スクリプトの
/* Do things */
コメントを次の行に置き換えます。
document.documentElement.classList.add("fonts-loaded");
これにより、両方のフォントが読み込まれると、fonts-loaded
クラスがドキュメントのルート要素(<html>
タグ)に追加されます。
✔️ チェックイン
完成したスクリプトは次のようになります。
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
CSS の更新
最初はシステム フォントを使用し、fonts-loaded
クラスを適用した後はカスタム フォントを使用するようにページのスタイルを設定する必要があります。
- CSS を更新します。
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
確認
- サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
次のようなページが表示された場合は、Font Face Observer が正常に実装され、「非表示テキストのフラッシュ」は削除されています。