サンプル1   サンプル2   サンプル3(見出しだけが対象)

日本語フリーフォントを軽くしてWebフォント化して使用したサンプルページ

このページでは、見出し部分の表示に「Noto Sans CJK JP (Black)」フォントを軽くしたサブセットフォントを利用しています。 本文部分の表示にはフォントを指定していないため、デフォルトのフォントが使われます。
詳しい方法は、解説記事本文をご参照下さい。

Webフォント活用関連情報

• 望みのフォントで表示できる！ウェブフォントの使い方
• アイコンをWebフォントで表示できる「Font Awesome」
• 使うアイコンだけを含む最小限のウェブフォントを作る
• 色もサイズも自由自在！アイコンを綺麗に表示するWebフォント集

オススメCSS活用情報

• 表の空っぽのセルにだけ、CSSで斜線を引く方法
• tableレイアウトをCSSだけでレスポンシブ化する方法
• ウインドウ幅に合わせて画像サイズを変化させる方法
• 画像上の自由な位置に文字を重ねる方法
• スタイルシートの class と id の使い分け

便利スクリプト活用情報

• 現在のページ上に、別HTMLの内容を重ねて表示する方法
• 複数の画像がふわっと切り替わるスライドショーを作る
• Skitterで迫力ある効果のスライドショーを作る方法
• 別窓を開かずに、その場で拡大画像を表示する方法

その他のお役立ち情報

• ウェブ作成ソフト Microsoft Expression Web が無料化
• Not Foundなど エラーメッセージを独自作成
• 移転先へ自動移動(転送/リダイレクト)させる方法

サブセットフォントを作れば、日本語フォントでも現実的なサイズのWebフォントファイルになる

このページでは、見出し部分(h1要素とh2要素)に対してだけ、日本語フリーフォント「Noto Sans CJK JP」の一部文字を抜き出したサブセットフォントを使っています。 実際にページ内で使われている文字に限定した「小さなフォントファイル(＝サブセットフォント)」を作ることで、文字数の多い日本語であっても「ウェブ上からダウンロードできる現実的なサイズ」でWebフォントとして利用できます。
なお、このページで読み込んでいる日本語Webフォントは、わずか9.2KBです。
詳しくは、解説記事本文をご参照下さい。

解説記事へ戻る

(Notoフォントサイト)