ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

Webフォント「Noto Sans Japanese」フォントを簡単に使う方法

2016年11月9日
notosans

Noto Fontsとは何か

Noto Fontsとは、GoogleがAdobeと協力して作ったフォント(Adobe 側は「源ノ角ゴシック」という名称で提供している)です。「世界中の言語を1つのフォントセットで表現する」という試みで作られました。
フォントセットにない文字を使うと表示される豆腐文字を撲滅するべく作られたそうです。Google言わくno more tofuとのこと。略してNotoという名前らしいです。
覚えやすい名前ですね。
特徴として、フォントの太さが7種類あるのと、見やすく美しいフォントということらしいです。

さて、そのNoto Fontsですが使う際にはちょっと気をつけなくてはなりません。
それは、何よりまずファイルサイズが格段に重い。。ということです。
というのも、日本語にはひらがなやカタカナ、漢字など膨大な文字数があるので、他の言語と比べてウェブフォントデータが重くなるのも納得できますね。
ちなみに、Noto Fontsの日本語版である「Noto Sans CJK JP」はフルサイズだと16MBほどあるようです。

このように、ファイルサイズが重いのでそのまま使うとサイトの表示速度が遅くなってしまうので、サブセット化という作業でフォントを軽量化することができるので、その参考サイトを下記に記載しておきます。

【サブセット化の参考サイト】
https://b.0218.jp/20150620044014.html
http://bamka.info/webfont-weight-saving

上記に参考サイトを記載したサブセット化とは別で、Googleのapiを利用しCSSファイル経由でNoto Sans Japaneseをダウンロードし、簡単にNoto Fontsを利用できる方法を紹介したいと思います。

スポンサードサーチ

Google api を利用してNoto Fontsを使う方法

css

CSS
1
2
3
4
5
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 
body{
  font-family: 'Noto Sans Japanese', sans-serif;  
}

このようにcssに@import文でapiを読み込み、あとはfont-familyでNoto Sans Japaneseを指定してあげれば簡単に使用することができます!
制作現場、クライアントによっては、ダウンロードして使用する場合もあるかもしれないので、その際にはサブセットを使って軽量化してフォントを使用したりと、臨機応変に使い分けるのが良さそうですね!

関連記事

  • サブセット済み! Noto Sans Japanese のダウンロードはこちら(IE9以降対応)2017年5月9日 サブセット済み! Noto Sans Japanese のダウンロードはこちら(IE9以降対応)
  • 【css3】背景を斜線にするlinear-gradientの書き方2016年10月23日 【css3】背景を斜線にするlinear-gradientの書き方
  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
  • Safariで崩れる!?  floatを使わずdisplay:inline-blockで横並びにする方法2016年12月10日 Safariで崩れる!? floatを使わずdisplay:inline-blockで横並びにする方法
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.