WEBデザイン・プログラミング関連の
情報発信を手掛ける STAND4U

HOME > WEBサービス > Google FontsのNoto Serif JPがIE11で表示されない時の解決法

Google FontsのNoto Serif JPがIE11で表示されない時の解決法

WEBデザインやHTMLコーディングをする方にとって、身近になったWEBフォント。中でもGoogle Fonts(グーグルフォント)はとても貴重な存在ですよね?そのGoogle Fontsでついにの日本語フォントが正式サポート開始されました。その中でも日本語の美しい明朝体が使えるとても貴重なフォント「Noto Serif JP」も含まれています!しかし、ほとんどのモダンブラウザでは表示されるのに「Noto Serif JP」はIE11で表示されないというなぞの現象に遭遇します。

そこで今回はGoogle Fonts「Noto Serif JP」をIE11で表示する方法と、その使い方・注意点を解説したいと思います。

[景品表示法に基づく表記] 本コンテンツにはプロモーションが含まれています。

Google Fontsの使い方

まずはGoogle Fontsページ(https://fonts.google.com/)にアクセスします。

ページの右上の虫眼鏡マークの欄で探したいフォントを検索します。今回の場合は「Noto Serif JP」と検索すると、Noto Serif JPが出てきます。さらに赤い「+」マークを押すと、Noto Serif JPが選ばれた状態になり、画面右下に黒いバーとして格納されます。そして黒いバーの「ー」マークを押すと、埋め込みようのコード類が表示されます。

通常であれば、この画面にあるCSSリンク用のコードを貼り付けて、CSSでスタイルで「font-family: 'Noto Serif JP', sans-serif;」のように指定するだけで表示されるのだが、Noto Serif JPの場合はこれを少しカスタマイズする必要があります。

図のように「CUSTOMIZE」タブをクリックして、カスタマイズ画面に切り替えます。

すると画面の下の方にスクロール(下にあるので最初見えない場合あり)するとLanguagesを指定する箇所があるので、「Japanese」をチェックします。あとは、使う予定の好みのウエイトもチェックして、「EMBED」に戻ります。

そしてCSSのリンク部分のコードをよく見ると、コードが変わっています。

Noto Serif JPがIE11で表示されない時の解決法

上記のコードを見てもお分かりの通り、「&subset=japanese」が追記されたのです。つまりIE11で表示するにはsubsetでjapaneseを記述しないといけないという事なのです。これでめでたくIE11でNoto Serif JPが表示されるようになります!

GoogleFontsでNoto Serif JPを使う時の注意点

もう1点注意点として、カスタマイズ画面でフォントのウエイト(太さ)を選ぶ箇所があったと思うのですが、ウエイトをチェック入れていく毎に、画面右上をよく見ると「Load Time: Fast」「Load Time: Moderate」「Load Time: Slow」と表示が変わるのにお気づきでしょうか?

これはウエイト2つまでだと「Load Time: Fast」3つ〜5つだと「Load Time: Moderate」6つ以上だと「Load Time: Slow」と表示されるようです。つまりウエイトをたくさんリンクさせるとそれだけ、ロード時間がかかってしまい、重くなるという事です。

GoogleFontsなどWEBフォントを使う場合は、欲張ってたくさんのウエイトをロードしないように気をつけましょう。

Noto Serif JPのリンクコードとまとめ

Noto Serif JPのリンクコードは以下になります。

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:400,700&amp;subset=japanese" rel="stylesheet">

ウエイトは、400,700の部分を書き換えていただければ、変える事ができます。

CSSの指定

font-family: 'Noto Serif JP', sans-serif;

以上、「Google FontsのNoto Serif JPがIE11で表示されない時の解決法」でした。WEBフォントを正しく使って美しい見やすいWEBサイトにしましょう!


※当記事の掲載内容は執筆現在の個人の見解・調査によるもので、動作・サービス等を保証するものではありません。最新情報は各公式サイトでご確認頂き、購入・契約・データ作成等はご自身の判断・責任でお願いします。 免責事項

関連記事

この記事を書いた人

編集長

WEBデザイン・グラフィックデザイン歴:約18年、HTMLコーディング、jquery、wordpress、イラストなど本業とし、WEBデザインコンサル・プログラミング・ライティング等にも勤しんでいます

プロフィールはこちら

Twitter @stand_4u_ をフォロー

[ー]

目次

新着記事