Yoha Kuto JP

Demo

• Demo Page

About

"Yoha Kuto JP"は、font-feature-settings: "palt";を使った日本語文字詰めで「句読点のみ余裕を持たせたい」と考えた場合に利用する「余白のある句読点専用Webフォント」です。Googleの"Noto Sans CJK JP（源ノ角ゴシック）"と"Noto Serif CJK JP（源ノ明朝）"をベースにしており、ゴシック体と明朝体でそれぞれ7ウェイト対応できます。

Detail

仕組みは、「メトリクス情報を持たない等幅句読点だけのフォント」をfont-feature-settings: "palt";で詰まるフォントよりも前に優先的適応することです。font-family（CSS）のフォールバック機能を利用しています。プロポーショナルメトリクスが利用できるモダンブラウザでのみ効果を発揮します。動的コンテンツへの利用が最適。1つのフォントが2〜4KBと軽量なので、表示速度やパフォーマンスを重視するサイトへの使用も安心です。

Valuation

ゴシック体と明朝体を使い分けられます。

• YohaKutoJP : ゴシック体
• YohaKutoMP : 明朝体

内包する文字はそれぞれ以下の通りです。

// YohaKutoJP
、。

// YohaKutoMP
、。

※バグ回避のため、上記に加え.notdef・space・ellipsisが含まれています。

ウェイトは7段階。付属のCSSでは以下のfont-weightで指定できます。※Noto Sans CJK JPとNoto Serif CJK JPでウエイト・ファイル名が若干異なるため、当ライブラリ内のファイル名もそれに準じています。

• font-weight: 100;
• font-weight: 200;
• font-weight: 300;
• font-weight: 400;
• font-weight: 500;
• font-weight: 700;
• font-weight: 900;

Use

CDN

jsDelivrで配信しているCSSファイルへのリンクをHTML内に記述するだけで全ウェイトのフォントを利用できます。

// YohaKutoJP
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/css/yohakutojp.min.css">
 
// YohaKutoMP
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/css/yohakutomp.min.css">

npm

npmコマンドで任意の場所にインストールできます。

npm install yohakutojp

Download

1. データをダウンロード
2. distフォルダ内の「css」「fonts」を制作サイトに配置
3. HTML内でCSSを読み込む

• ゴシック体「yohakutojp.min.css」
• 明朝体「yohakutomp.min.css」

1. CSSでフォントを適応

• ゴシック体「YohaKutoJP」
• 明朝体「YohaKutoMP」

// YohaKutoJP
<link rel="stylesheet" href="docs/css/yohakutojp.min.css">
 
// YohaKutoMP
<link rel="stylesheet" href="docs/css/yohakutomp.min.css">

// YakuHanMP
.yohakutojp {
  font-family: YohaKutoJP, "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  font-feature-settings: "palt";
}
 
// YohaKutoMP
.yohakutomp {
  font-family: YohaKutoMP, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-feature-settings: "palt";
}

Custom

Font face

1. 利用するフォントファイルへのリンクを個別に取得（CDNの場合）

• YohaKutoJP
• YohaKutoMP

1. CSS内にfont-faceを記述（以下はYohaKutoJPで300のウェイトを細くしfont-displayを適応した例）

// Demi Light > Light
@font-face {
  font-family: "YohaKutoJP";
  font-style: normal;
  font-weight: 300;
  src: url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.eot");
  src: url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.woff2") format("woff2"),
  url("https://cdn.jsdelivr.net/npm/yohakutojp@0.4.0/docs/fonts/YohaKutoJP/YohaKutoJP-Light.woff") format("woff");
  font-display: swap;
}

Support

Chrome	Firefox	IE	Ege	Opera	Safari(Mac)
62~	56~	11~	14~	36~	9.1~

Safari(iOS)	Chrome(Android)	Browser(Android)
9.3~	61~	4.4~

License

• Yoha Kuto JP : SIL OFL 1.1
• Author : Qrac
• Author Group: QRANOKO
• Gothic fonts : Based on "Noto Sans CJK JP" licensed under the SIL OFL 1.1
• Mincho fonts : Based on "Noto Serif CJK JP" licensed under the SIL OFL 1.1