Example

Example

  • Gothic
  • Mincho
  • Round
  • Full
  • Small
  • Hiragino
  • Yu
  • Noto
  • Meiryo
  • w100
  • w200
  • w300
  • w400
  • w500
  • w700
  • w800
  • w900
  • 0.625em
  • 0.75em
  • 0.875em
  • 1em
  • 1.25em
  • 1.5em
  • 2em

「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは7種類。Noto Sans Japaneseに沿っています。

「約物半角専用のWebフォント」を優先的に当てることによって、Webテキストの日本語に含まれる約物を半角にすることができました。例えば「かっこ」や『二重かっこ』、【バッジに使いそうなかっこ】などを半角にできます。ウェイトは7種類。Noto Sans Japaneseに沿っています。

Include Fonts

YakuHanJP ゴシック体(約物全部入り)

、。!?〈〉《》「」『』【】〔〕・():;[]{}

YakuHanJPs ゴシック体(カッコのみ)

〈〉《》「」『』【】〔〕()[]{}

YakuHanMP 明朝体(約物全部入り)

、。!?《》「」『』【】〔〕・():;[]{}

YakuHanMPs 明朝体(カッコのみ)

《》「」『』【】〔〕()[]{}

YakuHanRP 丸ゴシック(約物全部入り)

、。!?〈〉《》「」『』【】〔〕・():;[]{}

YakuHanRPs 丸ゴシック(カッコのみ)

〈〉《》「」『』【】〔〕()[]{}

バグ回避のため、全てのフォントに .notdef space ellipsis が含まれています。

How To Use

  • CDN
  • npm
  • Local

CDN

  1. jsDelivrで配信しているCSSファイルへのリンクをHTML内に記述

    // YakuHanJP:ゴシック体(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css">
    
    // YakuHanJPs:ゴシック体(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp_s.min.css">
    
    // YakuHanMP:明朝体(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanmp.min.css">
    
    // YakuHanMPs:明朝体(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanmp_s.min.css">
    
    // YakuHanRP:丸ゴシック(約物全部入り)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanrp.min.css">
    
    // YakuHanRPs:丸ゴシック(カッコのみ)
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanrp_s.min.css">
    
  2. CSSでフォントを適応

    // YakuHanJP:ゴシック体(約物全部入り)
    .yakuhanjp {
      font-family: YakuHanJP, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanJPs:ゴシック体(カッコのみ)
    .yakuhanjps {
      font-family: YakuHanJPs, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanMP:明朝体(約物全部入り)
    .yakuhanmp {
      font-family: YakuHanMP, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanMPs:明朝体(カッコのみ)
    .yakuhanmps {
      font-family: YakuHanMPs, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanRP:丸ゴシック(約物全部入り)
    .yakuhanrp {
      font-family: YakuHanRP, "Rounded Mplus 1c", sans-serif;
    }
    
    // YakuHanRPs:丸ゴシック(カッコのみ)
    .yakuhanrps {
      font-family: YakuHanRPs, "Rounded Mplus 1c", sans-serif;
    }
    

npm

  1. npmコマンドで任意のプロジェクトにインストール

    npm install yakuhanjp
    
  2. モジュールとしてプロジェクトに組み込みフォントを呼び出せるようにする

  3. CSSでフォントを適応

    // YakuHanJP:ゴシック体(約物全部入り)
    .yakuhanjp {
      font-family: YakuHanJP, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanJPs:ゴシック体(カッコのみ)
    .yakuhanjps {
      font-family: YakuHanJPs, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanMP:明朝体(約物全部入り)
    .yakuhanmp {
      font-family: YakuHanMP, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanMPs:明朝体(カッコのみ)
    .yakuhanmps {
      font-family: YakuHanMPs, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanRP:丸ゴシック(約物全部入り)
    .yakuhanrp {
      font-family: YakuHanRP, "Rounded Mplus 1c", sans-serif;
    }
    
    // YakuHanRPs:丸ゴシック(カッコのみ)
    .yakuhanrps {
      font-family: YakuHanRPs, "Rounded Mplus 1c", sans-serif;
    }
    

Local

  1. データをダウンロード

  2. distフォルダ内の「css」「fonts」を制作サイトに配置

  3. HTML内でCSSを読み込む

    // YakuHanJP:ゴシック体(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanjp.min.css">
    
    // YakuHanJPs:ゴシック体(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanjp_s.min.css">
    
    // YakuHanMP:明朝体(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanmp.min.css">
    
    // YakuHanMPs:明朝体(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanmp_s.min.css">
    
    // YakuHanRP:丸ゴシック(約物全部入り)
    <link rel="stylesheet" href="dist/css/yakuhanrp.min.css">
    
    // YakuHanRPs:丸ゴシック(カッコのみ)
    <link rel="stylesheet" href="dist/css/yakuhanrp_s.min.css">
    
  4. CSSでフォントを適応

    // YakuHanJP:ゴシック体(約物全部入り)
    .yakuhanjp {
      font-family: YakuHanJP, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanJPs:ゴシック体(カッコのみ)
    .yakuhanjps {
      font-family: YakuHanJPs, "Hiragino Sans", Meiryo, "Yu Gothic Medium", sans-serif;
    }
    
    // YakuHanMP:明朝体(約物全部入り)
    .yakuhanmp {
      font-family: YakuHanMP, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanMPs:明朝体(カッコのみ)
    .yakuhanmps {
      font-family: YakuHanMPs, "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    }
    
    // YakuHanRP:丸ゴシック(約物全部入り)
    .yakuhanrp {
      font-family: YakuHanRP, "Rounded Mplus 1c", sans-serif;
    }
    
    // YakuHanRPs:丸ゴシック(カッコのみ)
    .yakuhanrps {
      font-family: YakuHanRPs, "Rounded Mplus 1c", sans-serif;
    }
    

Custom

Font face

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

  2. CSS内にfont-faceを記述(以下はYakuHanJPのウェイトを細くしfont-displayを適応した例)

    // Regular > Light
    @font-face {
      font-family: "YakuHanJP";
      font-style: normal;
      font-weight: 400;
      src: url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/fonts/YakuHanJP/YakuHanJP-Light.eot");
      src: url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/fonts/YakuHanJP/YakuHanJP-Light.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/fonts/YakuHanJP/YakuHanJP-Light.woff") format("woff");
      font-display: swap;
    }
    

Support

Chrome Firefox IE Ege Opera Safari(Mac)
55~ 50~ 9~ 14~ 36~ 6~
Safari(iOS) Chrome(Android) Browser(Android)
7~ 51~ 4.4~

License

  1. Yaku Han JP : SIL OFL 1.1
  2. Author : Qrac
  3. Author Group : QRANOKO
  4. Gothic fonts : Based on Noto Sans CJK JP licensed under the SIL OFL 1.1
  5. Mincho fonts : Based on Noto Serif CJK JP licensed under the SIL OFL 1.1
  6. Round Gothic fonts : Based on Rounded M+ 1c licensed under the M+ FONTS LICENSE