質問: ### 前提・実現したいこと デザイン上Noto SerifをWebフォントとして使用しているページがあるのですが、重いし使う人が限られる状況ので、ローカルにあればローカルから取得しようと考えました。ところが、Chromeだけうまく反映されなくなっています。 そのままでも動くといえば動くのですが、ローカル参照で解決させる方法はないものでしょうか。 ### 発生している問題・エラーメッセージ ローカルにフォントインストールした環境でも、Webフォントのダウンロードをしてから表示するので、正しい表示を得られるまでに時間がかかる ### 該当のソースコード ``` @font-face{ font-family: 'NotoSerif'; src: local('Noto Serif CJK JP SemiBold'), local('Noto Serif CJK JP 中太'), // もちろんこれにはアクセスできます url(https://example.com/path/to/NotoSerifCJKjp-SemiBold.otf); font-weight: bold; } ``` ### 試したこと * CSSのフォント指定を`local('Noto Serif CJK JP')`にしたところ、ローカルのフォントを使うようにはなったのですが、太字が効かなくなりました。 * こちらのQiita記事のデモページを確認しても、Chromeだけ全ウェイトをネットワークダウンロードとなっています(Firefoxは全てローカルから参照、IE11はなぜかRegularだけダウンロード)。 ### 補足情報(FW/ツールのバージョンなど) * Windows 7 x64 * Google Chrome 64.0.3282.186(Official Build) (64 ビット)
回答: `font-weight:`の指定を数値ではどうですか? 私も「Noto Serif」をローカルに入れてWebフォントとして使用しています。指定は数値で現在問題なく表示されます。 -追記- 現在使用している指定方法です(太字のみ抜粋) ``` @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 900; src: url(./example/NotoSerifCJKjp-Black.woff2) format('woff2'), url(./example/NotoSerifCJKjp-Black.woff) format('woff'), url(./example/NotoSerifCJKjp-Black.otf) format('opentype'); } ``` すみません。質問をよく読んでなかったです。ローカルでの読込にはしていなかったです。 m(_ _)m -追記2- 以下のリンクは参考になるでしょうか? ウェブフォントを使用するとデフォルトのfont-style: boldがnormalになる 太字のバージョンを指定していない@ font-faceを使用している場合、font-weight CSSプロパティは無視されます。