パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

Google Fontsで日本語Webフォントを実用レベルで実装する方法

2016年01月20日

どうも、毎度ものぐさコーダーのおーみです。

以前『Google FontsでWebフォントを使ってみよう』という記事で、Google Fontsの使用方法をご紹介いたしました。今回は一歩踏み込んで日本語フォントをダウンロードして使用する方法をご紹介いたします。※本記事は Windows OS向けの記事となっております

使用するフォントは「Noto Sans Japanese」。font-weight(文字の太さ)が7種類用意されており、読みやすいデザインと場所を選ばない汎用さがあります。さらにはライセンスがApache Licenseなので、商用利用が可能です。そのため今後どんどん使用される機会が増えることでしょう。

本フォントを使用するにあたって、日本語Webフォントを使用するには少しばかり注意する点があります。それはフォントデータの重さです。本記事で紹介するのはフォントをいかに軽くするかがポイントになります。

作業を大きく分けると下記のようになります。

では順番に見ていきましょう。

1.使用するフォントの太さや反映場所のルールを予め決めておく

この最初のルール決めが一番のポイントとなる部分です。今回は下記をルールに進めていきたいと思います。

  • ひらがな、カタカナ、漢字、アルファベット、数字、一般的な記号
  • 見出しやリンクボタンなど、ちょっとしたアイキャッチのみに使用
  • フォントの太さは通常と太字の2種類を採用
  • 将来的には通常文にも適用する可能性あり

2.フォントデータをダウンロード(otf形式)

下記ページから「Download」をクリックしてデータをダウンロードします。解凍すると7つのotfデータがあります。

このままでも使用できるとのことですが全部で30MBもあるため、軽量化させましょう!

3.フォントデータから不必要な文字を除外して軽量化

具体的にどうするのかといいますと、武蔵システム様制作の「サブセットフォントメーカー」を使用します。

要インストールですが、フリーソフトの上に商用利用もできちゃいます。(素敵!)

インストールしたら立ち上げ、「作成元フォントファイル」に先程落としてきたフォントファイルを指定します。「作成後フォントファイル」には軽量化したデータの保存先を指定します。この時「作成元フォントファイル」と同じだとエラーになってしまうので別ファイル名もしくは別の場所を指定しましょう。

その次に「フォント格納する文字」に、フォントとして使用する文字列を記入します。下記ブログを参考に抽出文字を入力してみましょう。

上記記事に、

数字・アルファベット・記号・ひらがな/カタカナなどに加えて漢字は「第一水準漢字」を抽出する。

とあるので、その下の文字列をコピーします。「フォント格納する文字」にペーストしたら「作成開始」を押すと抽出済みのフォントファイルが出来上がるので必要なだけ圧縮してみます。

その結果がこちら。合計30MB:平均4.2MBだったのが、合計4.75MB:平均約678KBまで落とすことができました。

画像では全部データ変換してますが、必要分だけで問題ありません

さらに今回、手順1のルールに引っかからずに明らかに使わないであろう(と思われる)記号を除いてみたところ、合計3.30MB:平均約471KBまで軽減することができました。詳細は下記になります。


!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz·¸、。,.・?!゛゜々ー―‐~...()[]〈〉《》「」『』【】+-×÷=<>¥%&*@☆★○●◎◇◆□■△▲▽▼◯0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔

手順1のルール次第ではもう少し軽量することができそうです。

4.軽量化されたotfを各ブラウザ用のフォーマットファイルに変換

こちらも同じく武蔵システム様制作の「WOFFコンバータ」(フリー)を使用します。このツールを使用して、「woff」「ttf」「eot」ファイルにそれぞれ変換します。

otfファイルからwoffファイルへ変換(ついでにeotファイルも作成)

woffファイルからttfファイルへ変換

必要な分だけ作成したのが下記になります。合計2.5MBになりました。

woffはモダンブラウザ用、ttfは iOS / Android用、eotはIE用となります。

5.HTML&CSSに必要な記述する

CSSは下記のように記述します。フォントデータへのパスは適宜修正してください。


@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 400;
    src: url('NotoSansJP-Regular.eot'),
    src: url('NotoSansJP-Regular.eot?#iefix') format('embedded-opentype'),
    url('NotoSansJP-Regular.woff') format('woff'),
    url('NotoSansJP-Regular.ttf')  format('truetype');
}
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 700;
    src: url('NotoSansJP-Bold.eot');
    src: url('NotoSansJP-Bold.eot?#iefix') format('embedded-opentype'),
    url('NotoSansJP-Bold.woff') format('woff'),
    url('NotoSansJP-Bold.ttf')  format('truetype');
}

6.表示確認

以上、フォントデータ・HTMLデータ・CSSデータをアップすると下記のような表示になります。

まとめ

上記にもありますが、本記事の一番のポイントは手順1のルール決めになります。構成の段階で、日本語Webフォント使用箇所を限定すればするほど、必要なフォントデータ量は軽くなります。

今回の場合、一般的によく使用される「標準」「太字」の2種類だけでも合計2~3MBのデータになります。個人的には全種類の太さを試してみたいのですが、現時点においてはまだ時期尚早な印象です。

Webフォントを利用するサイトはスマホ対策がほぼ必須になるかと思われます。Wifi環境でアクセスする分には気にならないかもしれませんが、外にいる時などは常に高速回線でアクセスできるわけではないため、やはりデータの重さ問題は避けては通れないでしょう。

今後、別のフォントデータ圧縮方法が確立される、またはIE10以下が対応外になれば日本語Webフォントは爆発的に流行するとみましたがはてさて。

仕事のご依頼・お問い合わせ

この記事を書いた人
おーみ

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績