無趣味の戯言

三日坊主なので頑張らないように頑張ります

無料で使える日本語フォント「Noto Sans JP」を試してみた

ちょっとしたこだわり...?

こんばんは、だいちゃんです。

ホームページ制作...といってもHTMLとCSSで会社概要のページを作るだけの簡単なお仕事をいただいたので、ついでにWebフォントを試してみました。

フォントが綺麗だからといって特に感動することはないけど、なんとなく気持ち良く読めたりするもんなんですよね。そういう潜在的ななんとなくって感情をもう少し深掘りしてみたいと思ったり思わなかったり。

もともとフォント設定は大事だと思う派です。

udcsk.hateblo.jp

Webフォント

天下のGoogle様が提供している無料Webフォント「Google Fonts」の中に、日本語対応フォントが登場していたので使ってみることにしました。

そもそもフォント設定に関してはいろいろ意見があって、「読み込み長くなるからローカルのフォントにするべき」とか「OS、機種によって持ってるフォントが違うからたくさん指定するのめんどい」とか「ふぉんとなにそれおいしいの」とかまあいろいろです。つまりは作る人の考え方次第だと思うんです。

もっとも、早く読み込めるサイト作りたいなら 阿部寛さんのホームページ 見習えやって話ですが(違う)

僕だって早いほうがいいのは確かですが、取捨選択の中で許される範囲でフォントにはこだわるべきだと思います。読ませるタイプのページを作るなら特に。

まぁそんな背景からWebフォントを使うのもアリかなという結論に至りました。日本語対応でしかも無料のWebフォントが出たらしいから使ってみたかったってのも大いにあります。

fonts.google.com

Google Fontsのサイトから使いたいフォントの右上「+」ボタンをクリックします。複数選択できますがたくさん選ぶと読み込みに時間がかかります。

フォントを選び終わったら画面下部分になんかいるのでそれの「─」をクリック。この画面を初見で出せませんでした。デザイン的にどうなの。

「CUSTOMIZE」タブでフォントごとに必要な太さと言語を選択します。ここで「Japanese」選んでおかないと日本語対応できません。あと、欲張っていろいろつけるとこれまた読み込みに時間がかかります。おおよその目安として右上にLoadtimeが出てるので、なるべくFastに収まるようにする方がいいと思われ。どれくらい遅くなるかは試してないけど。

適用の仕方は簡単で、「EMBED」タブにコードが出てるのでそれをHEADタグ内に貼り付け。CSSでフォントファミリー設定するときは「Specify in CSS」のところに出てるコードをコピペして上げればOK。

実際に比較してみた

というわけで比較用にHTMLページ作ってみました。

<!DOCTYPE HTML>
<html>
<head>
   <meta charset=utf8>
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&amp;subset=japanese" rel="stylesheet">
   <style>
        #noset {
            font-family: sans-serif;
        }
        #set {
            font-family: 'Noto Sans JP';
        }
        #you {
            font-family: 'Yu Gothic Medium', '游ゴシック Medium', 'YuGothic', '游ゴシック体';
        }
        p span {
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div id="noset">
        <h1>Hello World</h1>
        <p>フォントファミリーを「 <span>sans-serif</span> 」で指定しています。</p>
    </div>
    
    <div id="set">
        <h1>Hello World</h1>
        <p>フォントファミリーを「 <span>Noto Sans JP</span> 」で指定しています。</p>
    </div>

    <div id="you">
        <h1>Hello World</h1>
        <p>フォントファミリーを「 <span>游ゴシック</span> 」で指定しています。</p>
    </div>

</body>
</html>   

そして各デバイスで表示させてみました。

うん、まぁそうなるよね。

まとめ

そこまで気にする必要ない

というのも、一昔前の海外製Androidにあったような醜い中華フォントも減ってきてて、Androidでもそこそこ許せる範囲のフォントを持ってるから総称ファミリー(sans-serifとかserifとか)だけ指定しておいても困ることは少ないかと。

ただ、ユーザーはローカルフォントに慣れてるので、急に別のフォントがくると「あれ?なんかこのサイト、他と若干雰囲気違う?」みたいな感じになって気を引ける...かもしれない。でもそれを狙うにはNotoは普通過ぎるので有料のやつ使ったほうがいいかもしれないですね。

一時期流行った游ゴシックも、Macは「游ゴシック体」じゃないとダメ、とか、Safariは英語で指定しないと読み飛ばされる、とか、Windowsは「標準」を明記しないと細すぎる、とかがあって游ゴシックを指定するだけで何個も羅列しないといけない事態になってましたが、そこはWebフォントなら解決できるかもしれないですね。

でも結局の所は作り手の好みの問題になるとは思いますが、Notoは綺麗だし重く感じなかったのでこれからも積極的に利用していこうと思います。無料だし。