「」とか・みたいな約物を半角にできるウェブフォント『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;
}

うまく適応されない場合は、「YakuHanJP」の後に続くfont-familyのいずれかがバッティングしてしまい無効化されているケースがある。ひとつずつ削除していったら、適応されるはずだ。