CSSでのフォント指定を無効にする手段はブラウザーに用意されていることもあるが、ウェブフォントだけを無効にする手段は用意されていないように思う。もちろんMobile Safariのコンテンツブロッカーに対応したアプリのいくつかでは対応しているようだが、それをデスクトップからテストするのはなかなか難しい。
僕はまずはSCSSのレベルで工夫してデバッグしやすいように整えておき、JavaScriptの助けを借りる形にした。
$font-family-sans-serif-local: -apple-system, "Helvetica Neue", "Calibri", sans-serif;
$font-family-sans-serif: "Eau Douce", $font-family-sans-serif-local;フォント定義ではまずローカルのフォントを参照する変数を作成する。実際に使う変数ではそれを参照したうえでウェブフォントを先頭に追加する。
.no-webfont {
font-family: $font-family-sans-serif-local;
}デバッグ用のCSSファイルの元になるSCSSファイルでは、このようにno-webfontクラスを作っておく。
document.getElementById("toggle-webfont").addEventListener("click", function () {
document.body.classList.toggle("no-webfont");
});テストに使うウェブページではこのようなJavaScriptを仕込み、toggle-webfontというIDを持つ要素(button要素など)でbody要素のno-webfontクラスをトグルできるようにする。これでその要素をクリックするとウェブフォントの有効と無効をエミュレートすることができる。
このようなテストが必要な理由は簡単で、Mobile Safariのコンテンツブロッカーはフォント指定を無効にするわけではないからだ。@hinatamiのツイートでも教えてもらったが、手元で確認した感じでも@font-faceルールを無効化するような形(HTTPリクエストのレベルで無効化しているような雰囲気だが、ちゃんとした挙動を知るにはもうちょっとちゃんと調べる必要がある)で機能しているようだ。そのためフォールバックのフォントでどうなるかを確認する必要があるということになる。
僕のようなやり方はちょっと遠回りで環境に強く依存している。しかし、何かしらの手段でテストするか、テストせずともうまく機能するようにCSSを工夫する必要があるだろう。そうでないとウェブフォントが、もっとはっきりと言えばアイコン・フォントが、もっと細かく言うのならばハンバーガー・ボタンが適切に表示されない場合にどうなるかを確認することができない。
CSSの工夫となると一番単純なものはウェブフォントを使わないになる。そうでない場合は使いたいウェブフォントとボディのサイズが近いローカルのフォントをフォールバックに指定することになる。どちらも選択肢としてはなかなか厳しいところがあるので、しっかりとテストする環境を整えることを薦めたい。