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"; }

関連記事

コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
Webデザイナーが効率よくHTMLコーディングができるPugのメリット... 2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。 最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。 保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質...
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
Nuxt.jsのトラブル解決方法 今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。 Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。 インストー...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...