前提・実現したいこと
デザイン上Noto SerifをWebフォントとして使用しているページがあるのですが、重いし使う人が限られる状況ので、ローカルにあればローカルから取得しようと考えました。ところが、Chromeだけうまく反映されなくなっています。
そのままでも動くといえば動くのですが、ローカル参照で解決させる方法はないものでしょうか。
発生している問題・エラーメッセージ
ローカルにフォントインストールした環境でも、Webフォントのダウンロードをしてから表示するので、正しい表示を得られるまでに時間がかかる
該当のソースコード
scss
1@font-face{ 2 font-family: 'NotoSerif'; 3 src: local('Noto Serif CJK JP SemiBold'), 4 local('Noto Serif CJK JP 中太'), 5 // もちろんこれにはアクセスできます 6 url(https://example.com/path/to/NotoSerifCJKjp-SemiBold.otf); 7 font-weight: bold; 8}
試したこと
- CSSのフォント指定を
local('Noto Serif CJK JP')
にしたところ、ローカルのフォントを使うようにはなったのですが、太字が効かなくなりました。 - こちらのQiita記事のデモページを確認しても、Chromeだけ全ウェイトをネットワークダウンロードとなっています(Firefoxは全てローカルから参照、IE11はなぜかRegularだけダウンロード)。
補足情報(FW/ツールのバージョンなど)
- Windows 7 x64
- Google Chrome 64.0.3282.186(Official Build) (64 ビット)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。