「」とか・みたいな約物を半角にできるウェブフォント『Yaku Han JP』

約物半角専用のWebフォント『Yaku Han JP』をご紹介しましょう。

、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝などの約物を全角から半角にしてくれるウェブフォントです。
軽量でありCDNもあるので、導入も容易で助かります。

開発者はデザイナーのクラク（QRANOKO）氏。CDN月間アクセスが1億を突破されたとのこと。

導入イメージ

導入前と導入後のビフォーアフターをご覧いただきましょう（画像は公式サイトより引用）。
Afterのほうは約物が半角になっています。

少し横に詰まるので、テキストを詰め込みたい（改行で余計な高さを消費したくない）という価値観の方は、積極的に利用を検討すべきでしょう。

導入方法

CDNでCSSを読み込む

まずはHTMLのheadタグ内にてCDNを読み込む。

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

CSSのfont-familyに追記

font-familyの先頭に「YakuHanJP」を追記しましょう。

body {
 font-family: YakuHanJP,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"Yu Gothic Medium",sans-serif;
}