約物(やくもの)を半角にするWebフォント「Yaku Han JP」の使い方

みなさん、こんにちは。

全角の約物はスペースが出来てしまうので気になることがありますよね。
そんな時に便利な当サイトにも導入している約物を半角にするWebフォント「Yaku Han JP」をご紹介します。

「Yaku Han JP」の良いところ

約物が連続した時に不恰好になるのを解消できる

●「Yaku Han JP」なしの場合

「テキスト」、「テキスト」

●「Yaku Han JP」ありの場合

「テキスト」、「テキスト」

クライアントから「字間を詰めてほしい。」と言われたことも何度かはあったのでその心配が無くなるのは大きいです。

フォントの種類、ウェイトが豊富

ゴシック体だけでなく明朝体、丸ゴシックにも対応しています。
また、ウェイトは7種類もあり、「Noto Sans Japanese」に対応しています。

余程変わったフォントを使っていない限りは問題なく使用可能です。

そして、半角にする約物は以下の2種類から選べます。

約物全部入り

、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝

カッコ形だけ

〈〉《》「」『』【】〔〕（）［］｛｝

容量が軽い

Webフォントと言えど約物のみのWebフォントなので軽いです。
ですので、CDNでもサーバーにアップして読み込んでもどちらでも問題ないです。

「Yaku Han JP」の使い方

まずはフォントを読み込みます。
公式サイトhttps://qrac.github.io/yakuhanjp/からサイトに合ったCSSを選んでhtml内にコピペします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css">

あとは「font-family」を指定するだけです。

body {
	font-family: YakuHanJP, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
}

これで完了です。

まとめ

このWebフォントを知ってからはほぼ全てのサイト制作で使用しています。

今までありそうで無かった素晴らしいフォントだと思います。

Yaku Han JP
https://qrac.github.io/yakuhanjp/