質問: 今回初めてサイトでM+FONTSのwebフォントを使用しました。 見出しだけでなく、本文も全てM+FONTSを使用しています。 現在、ウェイトをthinからheavyまでの6種類使用しており サイトがかなり重く表示が遅いので、 少しでも軽量化を図りたいと考えています。 しかし、使用カ所が多いため、サブセット化は向かないかと思っています。 そこで、例えば ``` @font-face{ font-family: 'mplus-2p-light'; src: url('../fonts/mplus-2p-light.eot'); src: url('../fonts/mplus-2p-light.eot?#iefix') format('embedded-opentype'), url('../fonts/mplus-2p-light.woff') format('woff'), url('../fonts/mplus-2p-light.ttf') format('truetype'); } ``` これに ``` font-weight:bold; ``` を指定できたら、ウェイトを6種類から3種類に減らすことができるのではと考えたのですが、 指定してみても太字になりません。 このような指定は、効かないのでしょうか? そもそも、webフォントの使用方法として間違っているのでしょうか? 他に何か軽量化できる方法がありますでしょうか? 何卒ご教授ください。よろしくお願い致します。
回答: font-weightの指定は、フォントが内包しているweightの中から、近いものを指定しています。なので複数weightが無いフォントは標準の状態で出力されます。 【font-weight - CSS | MDN】 > > 使用カ所が多いため、サブセット化は向かないかと思っています。 > > > JIS第一水準+英数字記号くらいであれば標準的な文章の場合問題なく表示されると思います。サイトによく出てくる単語についてはJIS第2水準に入っていないか確認し、それも入れておけばより安全でしょう。(ひらがなカタカナ英数字のみにして後述のLoaderで遅延読み込みでも良いとは思います) 【JIS第2水準の漢字一覧表】 【Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io】 【Noto Sans (源の角ゴシック) をWebフォントで使えるように軽量化する方法 | あなたのスイッチを押すブログ】 また、レギュラーフォント(一番多く使うフォントweight)のみサブセット化して、それ以外のweightについてはWebFont Loaderで遅延読み込みすることで体感スピードを上げる事も可能だと思います。 【Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう - W3Q】 【Webサイト高速化のためのWebフォントとソーシャルボタンを遅延読み込みさせるすべらない話 | cherry-pick BLOG | 株式会社cherry-pick】