Safari で Webfont が適用されない問題

 2021年11月1日

昨日,ホームページを大幅に修正したのですが,これまで使っていた「Noto Sans Japanese」に加えて,新しく「Roboto Mono」 の Webfont を使っています。

トップページのメニューに「Roboto Mono」を,ページ全体に「Noto Sans Japanese」という形です。

前回は,Google Fonts から url を指定して読み込んでいたのですが,今回は,ローカルにフォントをダウンロードして,読み込ませています。

ここで引っかかりました。

webpack で読み込ませている CSS コードは次のとおりです。

@font-face {
  font-family: 'Noto Sans JP';
  src: url("./../webfonts/NotoSansJP-Black.otf") format('opentype'),
  url("./../webfonts/NotoSansJP-Bold.otf") format('opentype'),
  url("./../webfonts/NotoSansJP-Light.otf") format('opentype'),
  url("./../webfonts/NotoSansJP-Medium.otf") format('opentype'),
  url("./../webfonts/NotoSansJP-Regular.otf") format('opentype'),
  url("./../webfonts/NotoSansJP-Thin.otf") format('opentype');
  font-display: swap;
}

上が,「NotoSansJP」を読み込ませている SCSS の例です。

@font-face {
  font-family: 'Roboto Mono';
  src: url('./../webfonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype'),
  url("./../webfonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

こちらが,「Roboto Mono」を読み込ませている例です。

(略)
{
  test: /\.(otf|ttf|eot|woff|woff2)$/,
  type: 'asset/resource',
  use: [{
    loader: "file-loader",
    options: {
      name: "[name].[ext]",
      outputPath: outputWebFontDir,
      publicPath: "../webfonts"
    }
  }]
},
(略)

上が webpack の config の一部です。outputPath にある outputWebFontDir は,先に出力先のパスを定義しています。

それぞれ,webpack 実行時のコンパイルはエラーなく,正しく CSS ファイルと,読み込み用の webfonts ファイルが生成されます。

これで「Google Chrome」「Edge」「Firefox」では正しく Webフォントが読み込まれているのですが,「Safari」では,なぜか Webフォントが反映されません。(IE は見ていません。おそらく反映されていないでしょう。)

色々とググって試したのですが,どうにもうまくいかず,結局,webpack を使った Webフォントの読み込みはあきらめました。

別に作成した CSSファイルの内容は下のとおりです。

@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  src: url('../webfonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url("../webfonts/RobotoMono-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

ここまでが,「Roboto Mono」用の CSS です。

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 900;
  src: url("../webfonts/NotoSansJP-Black.otf") format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  src: url("../webfonts/NotoSansJP-Bold.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 300;
  src: url("../webfonts/NotoSansJP-Light.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 500;
  src: url("../webfonts/NotoSansJP-Medium.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  src: url("../webfonts/NotoSansJP-Regular.otf") format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 100;
  src: url("../webfonts/NotoSansJP-Thin.otf") format('opentype');
  font-display: swap;
}

上が,「Noto Sans JP」用の CSS です。

それぞれ,1つの webfont.css ファイルとして,webpack で出力した CSS ファイルとは別に読み込ませています。

これを読み込ませることで,「Safari」でも正しくWebフォントが動いていることを確認できました。

しかし,webpack で出力したファイルで「Safari」だけうまく反映されなかった理由は分からずじまいです。

原因が分かったら,また更新したいと思いますが,webpack で Webフォントのコンパイルをするのは,かなり処理時間をくうので,別にファイルを用意して読み込ませた方が,楽で確実で,良いのかもしれませんね。

以上,webpack5 で,Webフォントを読み込ませようとしたら,Safari だけうまく反映されなかったので,結局別にCSSファイルを用意して読み込ませたら「うまくいった」というお話でした。


投稿に関連する記事抜粋

投稿記事のカテゴリやタグと同じ記事をランダム表示します。