昨日,ホームページを大幅に修正したのですが,これまで使っていた「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ファイルを用意して読み込ませたら「うまくいった」というお話でした。
投稿記事のカテゴリやタグと同じ記事をランダム表示します。