ankake

【css】NotoフォントをWeb fontとして使ってみよう!(挫折編)

最近web界隈を賑わせているニクい奴。そう、Adobe + google の最強タッグが開発した「Notoフォント」ちゃん。

 

Adobe側では「源ノ角ゴシック」って言うたい!なんて細かいことは置いといて、せっかくフリーのフォントなんだからwebフォントとしても使えないのー?

google先生が提供するフォントなんだから、Google Fontsからペッと設置出来るんじゃない?

と素朴な疑問が浮かんだので、自分的メモ。

 

Google Fontsにアクセス

毎度お世話になっている、Google Fontsさんにまずはアクセス。

スクリーンショット

 

さくっと、Notoフォントを検索

スクリーンショットあるじゃない、あるじゃない notoフォントちゃん♪

 

で、今回はNormal 400と太字も使いたいのでBold 700にチェックを入れます。

スクリーンショット

 

 

HTML,CSSに設定

「3. Add this code to your website:」にあるlink~で始まるコードをコピー

スクリーンショット

 

headタグ内にペースト

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
</head>

 

 

「4. Integrate the fonts into your CSS:」の、font-family:~をまるっとコピー
スクリーンショット

 

cssで使用するフォントにfont-familyとして記述

p{
font-family: 'Noto Sans', sans-serif;
}

 

これで、スーパービューティフルな「Notoフォント」が表示されるはず。

 

サンプルテキスト

あれ?思ったより普通だな。

Notoフォントも案外たいして騒ぐほどキレイでもないのかな?

 

ん、まてよ、、、

日本語ひらがなカタカナ、特に漢字が膨大な数であり、Webフォントのダウンロード量など、英語欧文と比較して課題がある。例として2010年にサービスを開始したGoogle Web Fontsでは日本語は提供されていない(2013年現在)。国内初の日本語対応WEBフォントサービスは、2003年5月に開設され、2010年、2011年頃から日本語に対応したWebフォントサービスが普及し始めた。
引用元: Webフォント – Wikipedia.

 

えぇーっ!!

例として2010年にサービスを開始したGoogle Web Fontsでは日本語は提供されていない(2013年現在)。

 

散々焦らしたあとの放置プレイ。
Google Web Fontsでは日本語は提供されていないだなんて。

ちゃんと調べない自分が悪いんだけどさー だってさー だってさー

 

 

[結論]
Googleフォントで、きれいな日本語webフォントがラクラクで使えてウマウマかと思いきや、そんなに世の中ウマイ話はありませんでしたとさ。

 

次回(圧縮編)につづく。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>