【Googleウェブフォント】Noto Sans Japaneseを使う方法 wordpressなどで導入可

「世界中の言語を1つのフォントセットで表現する」

フォントセットにない文字を使うと表示される「豆腐文字」を撲滅するべく作られた”Noto Sans”。Google曰くNo More Tofu!略してNotoというわけです。

Notoフォントは全ての言語に対応することを目指す野心的なフォントで、GoogleとAdobeが共同開発していて、Adobeからは、『源ノ角ゴシック』として提供されています。

Adobeが関わっているおかげか、Notoフォント自体非常に美しいです。

そんなNotoフォントは『Google Noto Fonts』なるプロジェクトで無料で公開されています。

今回は、Noto Sansをこのブログに実際にダウンロードしてみましたので、使う方法を紹介します!

実は面倒くさい、Noto Sans

Webフォント提供サービスは数多く存在します。

サイトを見る端末にサイトで指定したフォントがインストールされていなくとも、外部からフォントをダウンロードして使うため、端末ごとのフォントの見た目を統一できる素晴らしいものです!

ところがこのNoto Sans JapaneseをWebフォントとして使う方法がややこしいんです。

理由は、以前当ブログでも紹介したNoto Sansなどの日本語版を提供しているプロジェクト『Google Fonts 早期アクセス』にいっつも変更が入るからです。早期アクセスだから仕方ないですが、フォントのURLが変わったりとせわしないんです。

世界中の言語を網羅したNoto

Noto Fontsは世界中の言語を網羅しているので、見慣れない文字も表示することができます。

タイ語やらアラビア文字といった文字も、もし使った場合は端末に対応するフォントが入っていなくても見ることができるんです。

Noto Sans Japaneseの使い方

使い方はとても簡単で、Googleにホストされているcssファイルを@importstyleタグで読み込み、フォントファミリーの指定をするだけで使うことが出来ます。

@importで読み込む場合

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

CSSファイル内に上記を追記すればOKです。

styleタグで読み込む場合

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

HTMLの<head>~</head>内で上記を記述すればOKです。

フォントファミリーの指定をする

CSSを読み込んだら、後は使いたい箇所にフォントファミリーの指定をします。
例えば、H1とH2だけ使いたい場合は以下のように記述します。

<style>
h1, h2 {
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
}
</style>

また、フォントを太さを変えたい場合はfont-weightの値を変更します。一番細いもので100、一番太いもので900まで用意されているので、数値変えながら好みの太さに調整していくのが良いと思います。

GoogleがおすすめするWebフォントの使い方

Androidに対応するためには、@font-faceというものを使います。これはフォントを定義するためのCSSの@ルールで、フォント名と、そのフォントのソース(フォントの読み込み元)などを指定できる。 詳しい使い方はGoogleの公式レファレンスに。ウェブフォントの最適化 | Web Fundamentals – Google Developers

これをみると、ソースに『local』と『url』の二種類があります。localは、サイトを観覧しているデバイス(PC、スマホ)に入っているフォントファイルを使う方法。対してurlは外部からファイルを取ってくるために使います。

この二つの方法を一緒に使えば、サイトで指定されているフォントがインストールされていればそれを使い(ローカルフォント)、無ければ外からダウンロードしてくる(Webフォント)ということができますので、少しでも速度を早めることができます。

例えばこのように

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('ttf'),
       url('/fonts/awesome.eot') format('eot');
}

と設定します。

@font-faceで設定したフォントを使うには、フォント名を指定するだけでいい(今までと同じ)です。

フォントウェイトについて

notosansweight

Noto Sansの日本語版の元となったSource Han Sans(源ノ角ゴシック)には7種類のウエイトがあります。

Thin 100, Light 300, DemiLight 350, Regular 400, Medium 500, Bold 700, Black 900です。

同じように派生版であるNoto Sans Japaneseには7種類全てが登録されています。

使いたいところで

font-weight : 350;

などと設定すればOKです!

Webフォントで日本語を使用するときの注意

1番の問題点は重さです。2バイト文字のため、1つのウエイトで、1MB以上あります。

Note FontsはGoogle Fontsで提供されているので、Googleの高速なサーバにあるものを利用できますし、通信環境は高速化していますので、ページの読み込み初回のみ少し時間がかかる感じです。また、同じサーバにあるWebフォントは1度ダウンロードしてしまえばブラウザにキャッシュされますので、2度目以降は速度に問題ありません。

他にも表示の遅延対策として一般的なブラウザでは、Webフォントを非同期(読み込みが完了した順番)で読み込みます。ダウンロードまでの時間はパソコンに入った標準フォントで表示しておき、ダウンロード完了後にWebフォントに切り替えます。

wordpressでかんたん設定

wordpressでは、各利用テーマのスタイルシートを編集するだけでかんたんに設定できます。

まず、編集ページの「外観」タブから「テーマの編集」をクリック。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

するとこのような画面が開くので、これがスタイルシート (style.css)であることを確認したら、style.cssの構成コンテンツの一番上(このページでは#Normalize)に

 

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

を記述すれば、あとは

「Ctrl + f 」でページ内検索を立ち上げ「font-family」を検索。

Noto Sansを使いたいところのfont-family で

font-family : 'Noto Sans Japanese', ...;

と記述して「更新」をクリックすればOKです!

(上記”…”は既にstyleシートで指定されているフォントとお考えください。必要なければNoto Sansだけの記述でOKですが、サーバーからフォントが表示できないことも考えて、記述しておくことをおすすめします)

ちなみに、(このページもそうでしたが)メニューボタンなどのデザインになぜかフォントを使用していることもありますので、font-familyがなんの項に入っているか、よく確認してくださいね。

おわりに

というわけで美しいWebフォント、Noto Sans Japaneseをダウンロードする方法をご紹介しました!

当ブログにもインストールさせて頂きましたが、皆さんにも反映されてるでしょうか!

スマホで確認したらやはり最初だけ読み込みが遅いようですが、2度目以降は高速で表示ですね。

GoogleのページではDownloadボタンでダウンロードして、PC上でフォントとして利用できます!

(まあつまり、Adobeの源ノ角ゴシックをつかえるわけですよねw)

それでは!

mamesuke

福岡出身、関西で学ぶ大学生。学生メディアとして、大学新聞で活動中。ガジェット好き、旅行好き、カメラ好き。鉄道もちょっとかじってます。

あわせて読みたい