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 です。

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

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

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

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

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

新しい記事へ古い記事へ

記事一覧へ