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...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
このフレームワークに惚れたらレスポンシブデザインについて色々考えちゃいました... 先日フレームワークのResponsive Grid Systemが大幅に変更されたと知って興味があって調べてみました。 Responsive Grid Systemとはグリッドシステムを使うためのフレームワークで、レスポンシブデザインでも使用できるような設計をされているものです。 確認し...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
RGBAをIE8でも使う簡単な方法 CSS3で使いたい機能というと角丸やグラデーション系が多いと思いますが、割りとRGBAも便利かなと思っています。 PIEを始め、角丸やグラデーションはIE8でも使えるようにという対策はありますが、RGBAはあまり聞きませんね。 私はPHPを使ってRGBAで色指定(透過率も)したものを画像生成する...