052-953-1001お電話

お問い合わせ

ブログ

日本語Webフォントをサブセット化する方法【ジャギー対応でなめらかに表示】

  • この記事をツイートする
  • この記事をFacebookでシェアする
  • この記事をLINEで送る

こんにちは。
今回は、Webサイトの最適化・高速化に繋がる「フォントのサブセット化」についてご紹介します。
サブセット化する際、なぜかフォントがギザギザ・ジャギジャギしてしまう問題に頭を抱えたので、その対処法もご紹介します。回避方法がなかなか見つけられなかったので、同じように悩まれている方の助けになれば嬉しいです。

目次

  1. サブセット化とは
  2. サブセット化の手順
  3. ギザギザ・ジャギジャギ問題発生
  4. ギザギザ・ジャギジャギ解決手順
  5. まとめ

サブセット化とは

いきなりですが、Webフォント、使ってますか?

Webサイト全体のイメージにも関わってくるのでフォント選びって重要ですよね。
なので、Webフォントは、どの端末・ブラウザでも同じフォントを表示してくれるのでとても助かります!
ただ、Webフォントにはデメリットもあるんです。

それは…重いんです…。

特に日本語のWebフォントは10MB前後にもなるので、読み込みに時間がかかってしまいます。
日本語って、ひらがな・カタカナ・漢字と文字数が多いですもんね。
それなら、必要な文字だけのフォントファイルにすれば読み込みも早くなるじゃないかというのが、フォントのサブセット化です。

サブセット化イメージ

では、サブセット化の手順について追っていきましょう。

サブセット化の手順

フォントを用意

では、サブセット化したいフォントを選びます。
フォントを選ぶ時は利用可能かライセンスを確認しましょうね。
今回は、商用利用可能な「源柔ゴシックBold」を選んでみました。

重さは11.6MBでした!

源柔ゴシック

ソフトをダウンロード

武蔵システムさんからサブセット化してくれる便利なフリーソフトが提供されている(ありがたい)のでそちらをダウンロードし、インストールします。

サブセットフォントメーカー

WOFFコンバータ

サブセットフォントメーカーでサブセット化

サブセットフォントメーカーを起動します。

サブセットフォントメーカー

①作成元フォントファイル

サブセット化したいフォントを指定します。

②作成後フォントファイル

サブセット化したフォントの保存場所とファイル名を指定します。

③フォントに格納する文字

使用したい文字を入力します。
例えば「あいうえお」と入力すれば、「あいうえお」の文字だけを含んでサブセット化されます。

ちなみに日本語フォントには、

  • JIS第1水準漢字
  • JIS第2水準漢字
  • ひらがな
  • カタカナ
  • 全角英数字
  • 半角英数字
  • 記号

が含まれています。

今回は、その中から、使わないであろう文字を除いた以下にまとめた「常用漢字」+「ひらがな」+「カタカナ」+「全角英数字」+「半角英数字」+「記号」をコピペして指定しました。

常用漢字…JIS第1水準漢字にJIS第2水準漢字の「丼傲刹哺喩嗅嘲彙恣惧慄憬拉摯曖楷毀璧瘍箋籠緻羞訃諧貪踪辣錮鬱」を加えた漢字

亜哀愛悪握圧扱安暗案以位依偉囲委威尉意慰易為異移維緯胃衣違遺医井域育一壱逸稲芋印員因姻引飲院陰隠韻右宇羽雨渦浦運雲営影映栄永泳英衛詠鋭液疫益駅悦謁越閲円園宴延援沿演炎煙猿縁遠鉛塩汚凹央奥往応押横欧殴王翁黄沖億屋憶乙卸恩温穏音下化仮何価佳加可夏嫁家寡科暇果架歌河火禍稼箇花荷華菓課貨過蚊我画芽賀雅餓介会解回塊壊快怪悔懐戒拐改械海灰界皆絵開階貝劾外害慨概涯街該垣嚇各拡格核殻獲確穫覚角較郭閣隔革学岳楽額掛潟割喝括活渇滑褐轄且株刈乾冠寒刊勘勧巻喚堪完官寛干幹患感慣憾換敢棺款歓汗漢環甘監看管簡緩缶肝艦観貫還鑑間閑関陥館丸含岸眼岩頑顔願企危喜器基奇寄岐希幾忌揮机旗既期棋棄機帰気汽祈季紀規記貴起軌輝飢騎鬼偽儀宜戯技擬欺犠疑義議菊吉喫詰却客脚虐逆丘久休及吸宮弓急救朽求泣球究窮級糾給旧牛去居巨拒拠挙虚許距漁魚享京供競共凶協叫境峡強恐恭挟教橋況狂狭矯胸脅興郷鏡響驚仰凝暁業局曲極玉勤均斤琴禁筋緊菌襟謹近金吟銀九句区苦駆具愚虞空偶遇隅屈掘靴繰桑勲君薫訓群軍郡係傾刑兄啓型契形径恵慶憩掲携敬景渓系経継茎蛍計警軽鶏芸迎鯨劇撃激傑欠決潔穴結血月件倹健兼券剣圏堅嫌建憲懸検権犬献研絹県肩見謙賢軒遣険顕験元原厳幻弦減源玄現言限個古呼固孤己庫弧戸故枯湖誇雇顧鼓五互午呉娯後御悟碁語誤護交侯候光公功効厚口向后坑好孔孝工巧幸広康恒慌抗拘控攻更校構江洪港溝甲皇硬稿紅絞綱耕考肯航荒行衡講貢購郊酵鉱鋼降項香高剛号合拷豪克刻告国穀酷黒獄腰骨込今困墾婚恨懇昆根混紺魂佐唆左差査砂詐鎖座債催再最妻宰彩才採栽歳済災砕祭斎細菜裁載際剤在材罪財坂咲崎作削搾昨策索錯桜冊刷察撮擦札殺雑皿三傘参山惨散桟産算蚕賛酸暫残仕伺使刺司史嗣四士始姉姿子市師志思指支施旨枝止死氏祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治璽磁示耳自辞式識軸七執失室湿漆疾質実芝舎写射捨赦斜煮社者謝車遮蛇邪借勺尺爵酌釈若寂弱主取守手朱殊狩珠種趣酒首儒受寿授樹需囚収周宗就州修愁拾秀秋終習臭舟衆襲週酬集醜住充十従柔汁渋獣縦重銃叔宿淑祝縮粛塾熟出術述俊春瞬准循旬殉準潤盾純巡遵順処初所暑庶緒署書諸助叙女序徐除傷償勝匠升召商唱奨宵将小少尚床彰承抄招掌昇昭晶松沼消渉焼焦照症省硝礁祥称章笑粧紹肖衝訟証詔詳象賞鐘障上丈乗冗剰城場壌嬢常情条浄状畳蒸譲醸錠嘱飾植殖織職色触食辱伸信侵唇娠寝審心慎振新森浸深申真神紳臣薪親診身辛進針震人仁刃尋甚尽迅陣酢図吹垂帥推水炊睡粋衰遂酔錘随髄崇数枢据杉澄寸世瀬畝是制勢姓征性成政整星晴正清牲生盛精聖声製西誠誓請逝青静斉税隻席惜斥昔析石積籍績責赤跡切拙接摂折設窃節説雪絶舌仙先千占宣専川戦扇栓泉浅洗染潜旋線繊船薦践選遷銭銑鮮前善漸然全禅繕塑措疎礎祖租粗素組訴阻僧創双倉喪壮奏層想捜掃挿操早曹巣槽燥争相窓総草荘葬藻装走送遭霜騒像増憎臓蔵贈造促側則即息束測足速俗属賊族続卒存孫尊損村他多太堕妥惰打駄体対耐帯待怠態替泰滞胎袋貸退逮隊代台大第題滝卓宅択拓沢濯託濁諾但達奪脱棚谷丹単嘆担探淡炭短端胆誕鍛団壇弾断暖段男談値知地恥池痴稚置致遅築畜竹蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷鋳駐著貯丁兆帳庁弔張彫徴懲挑朝潮町眺聴脹腸調超跳長頂鳥勅直朕沈珍賃鎮陳津墜追痛通塚漬坪釣亭低停偵貞呈堤定帝底庭廷弟抵提程締艇訂逓邸泥摘敵滴的笛適哲徹撤迭鉄典天展店添転点伝殿田電吐塗徒斗渡登途都努度土奴怒倒党冬凍刀唐塔島悼投搭東桃棟盗湯灯当痘等答筒糖統到討謄豆踏逃透陶頭騰闘働動同堂導洞童胴道銅峠匿得徳特督篤毒独読凸突届屯豚曇鈍内縄南軟難二尼弐肉日乳入如尿任妊忍認寧猫熱年念燃粘悩濃納能脳農把覇波派破婆馬俳廃拝排敗杯背肺輩配倍培媒梅買売賠陪伯博拍泊白舶薄迫漠爆縛麦箱肌畑八鉢発髪伐罰抜閥伴判半反帆搬板版犯班畔繁般藩販範煩頒飯晩番盤蛮卑否妃彼悲扉批披比泌疲皮碑秘罷肥被費避非飛備尾微美鼻匹必筆姫百俵標氷漂票表評描病秒苗品浜貧賓頻敏瓶不付夫婦富布府怖扶敷普浮父符腐膚譜負賦赴附侮武舞部封風伏副復幅服福腹複覆払沸仏物分噴墳憤奮粉紛雰文聞丙併兵塀幣平弊柄並閉陛米壁癖別偏変片編辺返遍便勉弁保舗捕歩補穂募墓慕暮母簿倣俸包報奉宝峰崩抱放方法泡砲縫胞芳褒訪豊邦飽乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貿防北僕墨撲朴牧没堀奔本翻凡盆摩磨魔麻埋妹枚毎幕膜又抹末繭万慢満漫味未魅岬密脈妙民眠務夢無矛霧婿娘名命明盟迷銘鳴滅免綿面模茂妄毛猛盲網耗木黙目戻問紋門匁夜野矢厄役約薬訳躍柳愉油癒諭輸唯優勇友幽悠憂有猶由裕誘遊郵雄融夕予余与誉預幼容庸揚揺擁曜様洋溶用窯羊葉要謡踊陽養抑欲浴翌翼羅裸来頼雷絡落酪乱卵欄濫覧利吏履理痢裏里離陸律率立略流留硫粒隆竜慮旅虜了僚両寮料涼猟療糧良量陵領力緑倫厘林臨輪隣塁涙累類令例冷励礼鈴隷零霊麗齢暦歴列劣烈裂廉恋練連錬炉路露労廊朗楼浪漏老郎六録論和話賄惑枠湾腕
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょ
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂズデドバビブベボパピプペポァィゥェォッャュョヴ
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ!@~`#$%^&*()_-+=\|}{]['";:/?.,<>  !@〜`#$%^*()_ー=+|¥}{'":;・?>。、<「」『』¡¢£¤¥¦§¨©ª«¬¯°±²³´µ¶·¸¹º»¼½¾¿,.゛゜ ̄ヽヾゝゞ〃仝〆―‐/\∥...‥'"〔〕[]〈〉《》【】-×÷≠≦≧∞∴♂♀′″℃¢£&☆★○●◎◇◆■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨¬⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬ʼn♯♭♪†‡◯─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂

④作成開始

「作成終了後、WOFFコンバータを起動する」にチェックを入れた状態で「作成開始」をクリックすると、②作成後フォントファイルで指定した場所にサブセット化したフォントが生成され、続いてWOFFコンバータが自動で起動します。

WOFFコンバータでフォントを変換

サブセット化フォントは生成されたのに変換ってどういうこと?と思われたことでしょう。
サブセット化されたフォントの拡張子は何になっていますか?「ttf」か「otf」でしょうか?
Webサイトで表示されているフォントは種類があり、ブラウザによっては対応していないのです。なので、サブセットフォントメーカーで生成されたフォント以外にも変換しなければなりません。

ここでWebサイト上で表示されているフォントと対応ブラウザ等、確認してみます。

結構種類があるんですね。
基本的にサブセット化するフォントの種類は

  • ttf か otf
  • woff
  • woff2(元ファイルがotfの場合生成されない)

でよいと思います。

さて、WOFFコンバータの操作に戻ります。

WOFFコンバータ

①変換前ファイル

サブセットフォントメーカーで「作成終了後、WOFFコンバータを起動する」にチェックを入れた状態で「作成開始」をクリックした場合は、すでに参照先が選択されているので、触らなくてOKです。

②変換後ファイル

ここも特に触らなくてOKです。

③フォントをWOFFに変換する時

「WOFF2を作成する」にチェックが入った状態にします。

元フォントファイルがotfの場合はwoff2は生成できません。

④変換開始

「変換開始」をクリックすると、「①変換前ファイル」と同じ場所に、変換されたフォントファイルが生成されます。

10.5MBあった源柔ゴシックBoldは、

  • ttf⇒1.4MB
  • woff⇒703KB
  • woff2⇒537KB

にまで軽くなりました!

Webサイトに反映

サブセット化ができたので、Webサイトに反映しておきます。
任意のディレクトリにフォントを格納して、CSSの@font-faceを使ってフォントを読み込みます。

源柔ゴシックBoldの場合はこんな感じです。

CSS

// 源柔ゴシックBold
@font-face {
	font-family: 'GenJyuuGothic'; //この名前がfont-familyで指定するフォント名になります
	font-style: normal;
	font-weight: 700;
	src: url('../font/GenJyuuGothic-Bold.woff2') format('woff2'), url('../font/GenJyuuGothic-Bold.woff') format('woff'), url('../font/GenJyuuGothic-Bold.ttf') format('truetype'); 
}
body {
	font-family: 'GenJyuuGothic', sans-serif;
}

複数のウェイトで使う場合は、それぞれのウェイトをサブセット化し、それぞれを読み込みます。

CSS

// 源柔ゴシックBold
@font-face {
	font-family: 'GenJyuuGothic';
	font-style: normal;
	font-weight: 700;
	src: url('../font/GenJyuuGothic-Bold.woff2') format('woff2'), url('../font/GenJyuuGothic-Bold.woff') format('woff'), url('../font/GenJyuuGothic-Bold.ttf') format('truetype'); 
}
// 源柔ゴシックNormal
@font-face {
	font-family: 'GenJyuuGothic';
	font-style: normal;
	font-weight: 400;
	src: url('../font/GenJyuuGothic-Normal.woff2') format('woff2'), url('../font/GenJyuuGothic-Normal.woff') format('woff'), url('../font/GenJyuuGothic-Normal.ttf') format('truetype');
}
body {
	font-family: 'GenJyuuGothic', sans-serif;
}
h1 {
	font-weight: 700; //Boldにしたい箇所はウェイトの指定を変えればOKです
}

ブラウザで見てみると…

源柔ゴシックが表示されましたね!
以上がフォントのサブセット化の手順となります。

ギザギザ・ジャギジャギ問題発生

これでサブセット化もばっちりと思っていたのですが、各ブラウザでチェックをしたときに問題が…!!!
WindowsのFirefox、IE11で、ギザギザ、ジャギジャギしている…!?

Windows版FirefoxとIE11のスクリーンショット

小さくて分かりづらいのですが、Boldにした14pxのフォントの表示が美しくありません。
どうやら、一部のttfでこの現象が起きるようです(この現象が起きるのは、M+や源真ゴシック系のフォントのようです)。

ttfには「フォントヒンティング」という情報がはいっており、WindowsのFirefoxやIE11では、フォントサイズが16px以下になるとアンチエイリアスのかかっていないギザギザ、ジャギジャギな表示にしてしまいます。
元々は、解像度の低いディスプレイでの表示のための情報とのことなので、この情報を除いてしまいましょう。

方法は以下の記事を参考にさせていただきました。

【Fontforge】ブラウザやElectron系ソフトで表示される文字がガビガビになってる時の解決法と、ヒンティングについて感じたこと

ギザギザ・ジャギジャギ解決手順

ソフトをダウンロード

フォント編集ソフト、Fontforgeをダウンロードし、インストールします。

Fontforge

Fontforgeでフォントヒンティングを削除

Fontforge

Fontforgeを起動し、「ファイル」⇒「開く」を選択し、フォントヒンティングを削除したいフォントを選択します。
ここでは、最初にダウンロードした源柔ゴシックのttfを指定します。

Fontforge

表示されたフォントすべてを選択し、「ヒント」⇒「Remove Instr Tables」、「ヒントを削除」、「ヒント命令を削除」を選択します。

Fontforge

「ファイル」⇒「フォントを出力」、フォントの形式は「TrueType」を選択し、「生成」をクリックします。

あとの手順は、サブセット化の手順の「サブセットフォントメーカーでサブセット化」からと同じです。
ブラウザで確認してみると…

Windows版FirefoxとIE11のスクリーンショット

きれいに表示されています!!

実はこのギザギザ・ジャギジャギ問題で、数日悩みました。
解決方法として、CSSのtransformを使ってフォントをわからない程度に回転させているWebサイトもあるみたいですね。
もし、同じところで悩まれていたらこの方法で対処してみてください。

まとめ

以上、日本語Webフォントのサブセット化についてのまとめでした。
Web制作の技術って色々あるので、面白いですね。
これからも、エーアンドエースタッフがWeb制作技術について発信していくと思うので、楽しみにしてください。
では!

エーアンドエーとホームページを制作しませんか?

エーアンドエーは「高い制作品質」と「柔軟なお客様対応力」が強みの愛知県名古屋市のホームページ制作・Web制作会社です。デジタル技術とアナログな心でお客様の課題を解決し、名古屋・東海地域を支える企業様から選ばれてきました。ホームページのことでお困りの方、信頼と実績のあるホームページ制作会社をお求めの方は、ぜひエーアンドエーまでご相談ください。

  • この記事をツイートする
  • この記事をFacebookでシェアする
  • この記事をLINEで送る

まずはお気軽にご相談ください

ホームページ制作のプロ集団・エーアンドエーが、強みの制作品質と柔軟対応でお客様の課題を解決します。
不安や悩みを抱えているホームページ担当者様は、ぜひエーアンドエーにご相談ください。

ホームページ制作のご依頼・ご相談は

お問い合わせフォーム

エーアンドエーについて検討されたい方は

会社案内ダウンロード

お電話でのお問い合わせも受け付けています

052-953-1001

受付時間/平日 9:30~18:00

※勧誘やセールスのお電話はお断りしております。

資料請求