google Adobe が共同開発したオープンソースフォント Noto sans font。
これまでWEBフォントはgenericonsやgoogle font位しか使ってませんでしたが、せっかくなので、挑戦してみました！！
Notoをダウンロード
Notoをサブセット化（圧縮）する
サーバーにアップする
fontデータを読み込む＞表示
という流れです。
色々な記事を参考にさせて頂きました！
皆様ありがとうございます！
確認できる範囲では検証しましたが、これで果たしてOKなのだろうか！！
目次
表示例
ちなみに、コレですね。
テスト環境でやってましたがsafariがなんか汚かったので友人知人にも診てもらおうと思ってこちらの環境にも導入しました。
通常フォント
font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
私、きれい？
Noto Sans JP
Thin
私、きれい？
Light
私、きれい？
DemiLight
私、きれい？
Regular
私、きれい？
Medium
私、きれい？
Bold
私、きれい？
Black
私、きれい？
綺麗だよ～。IE FF chromeなら綺麗だよ～。androidでも綺麗だよ～。 Noto sans fontのサブセット・アップ、読み込みについて、一連で解説されている記事が見つけられなかったのでなるべくわかりやすくまとめたいと思います。 お恥かしながらWEBフォントをアップして利用するのをイチから自分でやるのは初なので不足な所があったら申し訳ありません。 ご参考までにご覧下さい！ Notoって？という人はwikiをどうぞ！由来なんかも書いてます。 Noto Sans CJK JP のリンクからダウンロードしましょう。 windowsならコントロールパネル＞フォント で開いた所に インストールすればイラレ・フォトショでも使えるようになるので、是非。 サイト内の基本フォントをNotoに・・・という目的ではありません。 やはり、フォントを大きく見せる時、日本語フォントは選択の幅が狭いので見た目が単調になってしまいますからね！ Notoフォントを実際にダウンロードしてデザインに取り入れてみると、やっぱ素敵ですね。 今後も取り入れていきたいなと思いました。 これまでWEBフォントはgoogle fontをコピペで利用するくらいでしたのであまり意識してきませでしたが、実際にフォントをサーバーにアップして利用しようとすると、意外と面倒な手順が必要なんですね。 ブラウザやデバイスによって、表示可能なデータ形式が異なります。 2014年時点で、一番わかりやすい記事は これは・・・・めんどくせぇ・・・・ 対応するデータ形式が違うため、フォントデータをファイル形式分用意する必要があります。 そのため、フォントデータをサブセット化（必要なデータのみに圧縮する）が必要になります。 サブセット化というのはWEBページで使用する文字のみを抜き出して利用する方法です。 サブセット化には下記の武蔵システム様のフリーソフトを利用しました。 サブセットフォントメーカーを起動し、インストール済みフォントを指定し、作成後の保存先・ファイル名を指定 『作成終了後、WOFFコンバータを起動する』にチェックを入れていれば、自動的に下記のWOFFコンバータが起動します。 サブセットの文字列はひらがなカタカナ、常用漢字と一般的な半角全角数字・記号にとどめました。 記号も全て網羅したい場合は !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼?∥｜…‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋－±×÷＝≠＜＞≦≧∞∴♂♀°′″℃￥＄￠￡％＃＆＊＠§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓１２３４５６７８９０ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ 常用漢字は青空文庫様の漢字一覧表を利用させて頂きました。 亜哀愛悪握圧扱安暗案以位依偉囲委威尉意慰易為異移維緯胃衣違遺医井域育一壱逸稲芋印員因姻引飲院陰隠韻右宇羽雨渦浦運雲営影映栄永泳英衛詠鋭液疫益駅悦謁越閲円園宴延援沿演炎煙猿縁遠鉛塩汚凹央奥往応押横欧殴王翁黄沖億屋憶乙卸恩温穏音下化仮何価佳加可夏嫁家寡科暇果架歌河火禍稼箇花荷華菓課貨過蚊我画芽賀雅餓介会解回塊壊快怪悔懐戒拐改械海灰界皆絵開階貝劾外害慨概涯街該垣嚇各拡格核殻獲確穫覚角較郭閣隔革学岳楽額掛潟割喝括活渇滑褐轄且株刈乾冠寒刊勘勧巻喚堪完官寛干幹患感慣憾換敢棺款歓汗漢環甘監看管簡緩缶肝艦観貫還鑑間閑関陥館丸含岸眼岩頑顔願企危喜器基奇寄岐希幾忌揮机旗既期棋棄機帰気汽祈季紀規記貴起軌輝飢騎鬼偽儀宜戯技擬欺犠疑義議菊吉喫詰却客脚虐逆丘久休及吸宮弓急救朽求泣球究窮級糾給旧牛去居巨拒拠挙虚許距漁魚享京供競共凶協叫境峡強恐恭挟教橋況狂狭矯胸脅興郷鏡響驚仰凝暁業局曲極玉勤均斤琴禁筋緊菌襟謹近金吟銀九句区苦駆具愚虞空偶遇隅屈掘靴繰桑勲君薫訓群軍郡係傾刑兄啓型契形径恵慶憩掲携敬景渓系経継茎蛍計警軽鶏芸迎鯨劇撃激傑欠決潔穴結血月件倹健兼券剣圏堅嫌建憲懸検権犬献研絹県肩見謙賢軒遣険顕験元原厳幻弦減源玄現言限個古呼固孤己庫弧戸故枯湖誇雇顧鼓五互午呉娯後御悟碁語誤護交侯候光公功効厚口向后坑好孔孝工巧幸広康恒慌抗拘控攻更校構江洪港溝甲皇硬稿紅絞綱耕考肯航荒行衡講貢購郊酵鉱鋼降項香高剛号合拷豪克刻告国穀酷黒獄腰骨込今困墾婚恨懇昆根混紺魂佐唆左差査砂詐鎖座債催再最妻宰彩才採栽歳済災砕祭斎細菜裁載際剤在材罪財坂咲崎作削搾昨策索錯桜冊刷察撮擦札殺雑皿三傘参山惨散桟産算蚕賛酸暫残仕伺使刺司史嗣四士始姉姿子市師志思指支施旨枝止死氏祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治璽磁示耳自辞式識軸七執失室湿漆疾質実芝舎写射捨赦斜煮社者謝車遮蛇邪借勺尺爵酌釈若寂弱主取守手朱殊狩珠種趣酒首儒受寿授樹需囚収周宗就州修愁拾秀秋終習臭舟衆襲週酬集醜住充十従柔汁渋獣縦重銃叔宿淑祝縮粛塾熟出術述俊春瞬准循旬殉準潤盾純巡遵順処初所暑庶緒署書諸助叙女序徐除傷償勝匠升召商唱奨宵将小少尚床彰承抄招掌昇昭晶松沼消渉焼焦照症省硝礁祥称章笑粧紹肖衝訟証詔詳象賞鐘障上丈乗冗剰城場壌嬢常情条浄状畳蒸譲醸錠嘱飾植殖織職色触食辱伸信侵唇娠寝審心慎振新森浸深申真神紳臣薪親診身辛進針震人仁刃尋甚尽迅陣酢図吹垂帥推水炊睡粋衰遂酔錘随髄崇数枢据杉澄寸世瀬畝是制勢姓征性成政整星晴正清牲生盛精聖声製西誠誓請逝青静斉税隻席惜斥昔析石積籍績責赤跡切拙接摂折設窃節説雪絶舌仙先千占宣専川戦扇栓泉浅洗染潜旋線繊船薦践選遷銭銑鮮前善漸然全禅繕塑措疎礎祖租粗素組訴阻僧創双倉喪壮奏層想捜掃挿操早曹巣槽燥争相窓総草荘葬藻装走送遭霜騒像増憎臓蔵贈造促側則即息束測足速俗属賊族続卒存孫尊損村他多太堕妥惰打駄体対耐帯待怠態替泰滞胎袋貸退逮隊代台大第題滝卓宅択拓沢濯託濁諾但達奪脱棚谷丹単嘆担探淡炭短端胆誕鍛団壇弾断暖段男談値知地恥池痴稚置致遅築畜竹蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷鋳駐著貯丁兆帳庁弔張彫徴懲挑朝潮町眺聴脹腸調超跳長頂鳥勅直朕沈珍賃鎮陳津墜追痛通塚漬坪釣亭低停偵貞呈堤定帝底庭廷弟抵提程締艇訂逓邸泥摘敵滴的笛適哲徹撤迭鉄典天展店添転点伝殿田電吐塗徒斗渡登途都努度土奴怒倒党冬凍刀唐塔島悼投搭東桃棟盗湯灯当痘等答筒糖統到討謄豆踏逃透陶頭騰闘働動同堂導洞童胴道銅峠匿得徳特督篤毒独読凸突届屯豚曇鈍内縄南軟難二尼弐肉日乳入如尿任妊忍認寧猫熱年念燃粘悩濃納能脳農把覇波派破婆馬俳廃拝排敗杯背肺輩配倍培媒梅買売賠陪伯博拍泊白舶薄迫漠爆縛麦箱肌畑八鉢発髪伐罰抜閥伴判半反帆搬板版犯班畔繁般藩販範煩頒飯晩番盤蛮卑否妃彼悲扉批披比泌疲皮碑秘罷肥被費避非飛備尾微美鼻匹必筆姫百俵標氷漂票表評描病秒苗品浜貧賓頻敏瓶不付夫婦富布府怖扶敷普浮父符腐膚譜負賦赴附侮武舞部封風伏副復幅服福腹複覆払沸仏物分噴墳憤奮粉紛雰文聞丙併兵塀幣平弊柄並閉陛米壁癖別偏変片編辺返遍便勉弁保舗捕歩補穂募墓慕暮母簿倣俸包報奉宝峰崩抱放方法泡砲縫胞芳褒訪豊邦飽乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貿防北僕墨撲朴牧没堀奔本翻凡盆摩磨魔麻埋妹枚毎幕膜又抹末繭万慢満漫味未魅岬密脈妙民眠務夢無矛霧婿娘名命明盟迷銘鳴滅免綿面模茂妄毛猛盲網耗木黙目戻問紋門匁夜野矢厄役約薬訳躍柳愉油癒諭輸唯優勇友幽悠憂有猶由裕誘遊郵雄融夕予余与誉預幼容庸揚揺擁曜様洋溶用窯羊葉要謡踊陽養抑欲浴翌翼羅裸来頼雷絡落酪乱卵欄濫覧利吏履理痢裏里離陸律率立略流留硫粒隆竜慮旅虜了僚両寮料涼猟療糧良量陵領力緑倫厘林臨輪隣塁涙累類令例冷励礼鈴隷零霊麗齢暦歴列劣烈裂廉恋練連錬炉路露労廊朗楼浪漏老郎六録論和話賄惑枠湾腕 劇的にサイズが小さくなります！！ 2016.03.21 亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕 同じく武蔵システム様にwoff eotに変換するソフトが配布されています。 『EOTファイルを作成する』にチェックを入れておけば、WOFFとEOTを一緒に作成できます。 上記フリーソフトでは 下記のサービスを利用してみました。 ファイル名変更ができないので保存後に変える必要があります。 変換したい元ファイル・変換したい形式を選択して『変換する』 出てきたリンク先（名前は固定）を保存して任意の名前をつけます。 元データであるotfを では、出来上がったフォントを『noto』フォルダにでもいれてサーバーにUPします。 実際にCSSでフォントの指定をします。 古いブラウザは特にターゲットではありませんが、古いモバイル端末は対応させたいので、 Noto sans の紹介記事を見るとライセンスに気をつけよう！ ———————————————————- 2015.05.28追記 http://www.google.com/get/noto/#/family/noto-sans-jpan Noto fonts are open source. Noto Sans CJK is published under the SIL Open Font License, Version 1.1. All other Noto fonts are published under the Apache License, Version 2.0. CJKは SIL Open Font License, Version 1.1 ———————————————————– こちらの記事を参考にさせて頂きました。 原文 SIL Open Font License (OFL)はこちら style.cssに下記の記述 を記述します。 @font-faceで、CSS内で使うフォントファミリー名とフォントデータを紐付け、フォントを利用するクラスも作っておきます。 のような形でやるのがいいんですかね。 投稿内に クラス指定のコードを書いていざ確認！！ こんな感じになりました！！ 一応、古めのAndroid タブレットやモバイル端末、一般的なブラウザでも試してみましたが問題なさそうです。 なんかジャギってる。 『おい、おまえ！オレの（ファイル）名を言ってみろ！』 ひい～～！！！確認します！ あ、あれ、、どっちも『WOFF様です！！』 ん～、どっちもwoffは読み込めているようなんですが・・・ フォントは全部読み込んでみましたが、目的は限定的なため、Regular Medium Bold あたりで良いかな～と思っています。 将来的にWOFFに統一されるということで、そうなるとファイルの読み込みも少なくなりますし、気軽にWEBフォントが使えるようになりますね！
追加情報 iPhone6 きれいだよ～！
追加情報
Android 2.2タブレット きれいだよ～！
Android 2.3.4 HTC きれいだよ～！
Android 4.0.3 au arrows Z きれいだけどなぜかweightが一定だよ～！
Noto sans font 導入に際して参考にした記事
Noto sans font って？
実際の導入方法
google NOTO sans font ダウンロード
ダウンロードしたデータをドラッグすればインストールが開始されます。
導入目的
レスポンシブかつSEOを重視したサイト制作案件にて、TOPページの見出し用にと思い、提案させて頂きました。
サーバーにアップする上での注意点
データ形式の問題
・EOT形式・・・IE独自
・WOFF形式・・・一般的なモダンブラウザ
・TTF形式・・・Android端末（～4.3）
等々。
ウェブクリ８.jp様かなと思います。容量の問題
素のデータで必要ファイル形式分データを用意すると・・・・
たぶんとんでもない容量になります（笑）
ダウンロードした素の状態だと、かなり容量が大きいので限定的に使う・使うフォントが限られているならサブセット化した方が良さそうです。さて、Notoをサブセット化
Noto sans (.otf) をサブセット化
（なので予め両方インストールしておいてね！！）
http://junk-blog.com/font_list/
こちらのサイト様が便利そうです！
※常用漢字もコピペで使えるものを探していましたが、上記の文字だけだと、例えば『挨拶』とかが出ません。
2010年の改定では常用漢字に挨拶も含まれるようです。
第一水準までで探した方がいいのかな～。
またサブセットする機会があったので
http://kanjitisiki.com/jis1/
さんより、JIS第一水準漢字をコピーさせてもらいました（改行・タブ排除済）.eot .woff に変換
HTMLでも確認できるので『サンプルHTMLファイル』にもチェックしています。
サブセットしたotfを.ttfや.svgに
otf > eot,woff はできますが
otf > ttf,svgが出来ないので
（今回svgは検証していません。）
変換まとめ
1.武蔵システム様のサブセットメーカーで圧縮 otf
2.さらに同社WOFFコンバータでwoff eot に変換
3.1で圧縮したサブセットotfを henkan-muryo.comで ttf
という手順で、下記のように劇的に軽量化できます。
15メガバイトが500キロバイト位になります。
サーバーにUPして読み込んでみる
WordPressの場合だと使っているテーマのフォルダに入れましょう。
notoにしたのは最近のテーマはfontsフォルダが既にあったりするからです。@font-faceとライセンス表記
ウェブクリ８.jp様の記述を元に、今回はSVG以外をサポートする形でやってみます。
と書いている記事はたくさんあるのですが、実際に記載している例が少なく。。。なぜなんだろう。
これでOKだと思うのですが。。
ライセンスについて、ご指摘頂きました！
Extend Wings様、ありがとうございます。
によると
それ以外の全てのNoto fonts はApache License, Version 2.0 であると書かれていますね。
大変失礼致しました！
樂印様
WebフォントのCSSとライセンス記載まとめ
SIL Open Font License (OFL)
IPAフォントライセンスv1.0
Apache License 2.0
の表記についてまとめられています。
http://www.apache.org/licenses/LICENSE-2.0
日本語訳
Apache License, Version 2.0 日本語参考訳
http://sourceforge.jp/projects/opensource/wiki/licenses%2FApache_License_2.0
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
/*
* "Noto Sans CJK JP" licensed under the SIL Open Font License
* https://www.google.com/get/noto/#/（配布元のURL）
*/
/* CSS内で使うフォントファミリー名と、フォントデータを紐付ける */
@font-face {
font-family: 'NotoSansCJKjpRegular';
src: url('noto/NotoSansCJKjp-Regular-subset.eot'); /* IE9 Compat Modes */
src: url('noto/NotoSansCJKjp-Regular-subset.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('noto/NotoSansCJKjp-Regular-subset.woff') format('woff'), /* Modern Browsers */
url('noto/NotoSansCJKjp-Regular-subset.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* 実際にNotoフォントを利用するクラスを作る */
.NotoSansCJKjpRegular {
font-family: 'NotoSansCJKjpRegular';
}
WordPressでやるならフォントを適用したいクラスにfont-family を追加かな。
/* wordpress Twenty Fourteenなら */
#content .entry-title,
#content h2,
#content h3,
#content h4 {
font-family: 'NotoSansCJKjpRegular';
}
表示の確認
<p class="NotoSansCJKjpRegular">確認したい文字列</p>
まとめ
safariがなんか汚い。。。
iPhoneはどうなんだろう。。。（持ってない）
ブラウザによって差異はあるということですが、これは正しく表示されているのかどうか。。
こちらは引き続き要検証ですね。。
さすがにThinやBlackは読み辛いかな～～。。
Noto Sans CJKは他のNotoフォントファミリーと異なり、Apache Licenseではなく、SIL OFLですよ。
Extend Wings様
コメントありがとうございます。
確かに、Noto Sans CJKのみ SIL OFL と配布元に書いておりましたね。
ご指摘、誠にありがとうございました。