Cntlog > スキルアップ・ノウハウ > コーディング > 【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページを使って見た。

【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページを使って見た。

Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。

これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。
簡単にですが公開されたフォントを紹介します。

Google Fonts + 日本語早期アクセス

嬉しいポイント

今回追加されたFontは当たり前ですが日本語という点、そして明朝体が追加されているところがポイントだと思います。

またGoogleのWebFontなのでこれまで同様CDNとして活用が可能です。
CDNだと数行コードに追記するだけで済むので実装も簡単なのも嬉しいです。

何より今回日本語フォントが追加された事でGoogleが今後も日本語Web Fontに対して積極的に取り組んでくれる姿勢を見せてくれたことがうれしいですね。

収録されたフォントについて

記事執筆時点(2016/10/21)で提供されているのは下記9書体です。

M+ 1p

日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。

Rounded M+ 1c

明るく伸びやかなデザインを心がけた。

はんなり明朝

明朝体は墨溜まりを意識してデザインしています。

こころ明朝

少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。

さわらび明朝

本文用のフォントとして使いやすくなるようにイメージしています。

さわらびゴシック

本文用のフォントとして使いやすくなるようにイメージしています。

ニクキュウ

モリっとして、ツヤのあるカタカナフォントです。

ニコモジ

すこしでもデザインのてだすけになれればさいわいです。

注意点

このプロジェクトは早期アクセス(アーリープロジェクト)として発表されています。

耳慣れない言葉かもしれませんが早期アクセス(アーリープロジェクト)とは、
ソフトウェアやWebサービスのリリース方法の一種でいわゆる「アルファ版」「ベータ版」「テスト版」「リリースカレント版」と言われるものです。

ですので完全版ではないと言われてるものですのですぐに案件に取り入れるのは少し判断をしたほうが良いかもしれません。
個人的には今すぐでも使えるクオリティだと思うのですが

使い方

Google Fontsの日本語早期アクセスではCDNでWebフォントを使えますのでファイルをダンロードする必要はありません。
下記の用にCSSでファイルを読み込んでfont-familyに設定するだけで簡単に実装できます。
M+ 1psample

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
.wf-mplus1p { font-family: "Mplus 1p"; }

Rounded M+ 1csample

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
.wf-roundedmplus1c { font-family: "Rounded Mplus 1c"; }

はんなり明朝sample

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />
.wf-hannari { font-family: "Hannari"; }

こころ明朝sample

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
.wf-kokoro { font-family: "Kokoro"; }

さわらび明朝sample

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

さわらびゴシックsample

<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }

ニクキュウsample

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
.wf-nikukyu { font-family: "Nikukyu"; }

ニコモジsample

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
.wf-nicomoji { font-family: "Nico Moji"; }

Noto Sans Japanesesample

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }

関連記事

今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】... CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。 実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。 ...
【2017年】よく使うmetaタグとかをまとめてみた... Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。 これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。 使いやすいようにスプレッドシートにもまとめています。 記事を読むのが煩わしいかた...