repository·main·Indexed 19 days ago
https://github.com/qrac/yakuhanjpA font project that converts full-width Japanese punctuation and symbols (yakumono) into half-width versions to improve visual density and spacing. It provides specialized packages for browser use (yakuhanjp), raw font data (core), merged fonts for OGP image generation or game development (merged), and Unicode generation scripts (unicode). Supports installation via npm or CDN and includes integration tools for Vite and Satori.
The project is split into several specialized packages depending on your use case:
yakuhanjp: The package intended for use directly in browsers.core: Contains the raw YakuHanJP font data.merged: Contains data for YakuHanJP merged into base fonts.unicode: Scripts for generating Unicode values for the included characters.After installing the package, import the specific CSS file corresponding to the version of Yaku Han JP you wish to use in your application's entry point or CSS file.
/* YakuHanJP */
import "yakuhanjp"
/* YakuHanJPs */
import "yakuhanjp/dist/css/yakuhanjp_s.css"
/* YakuHanMP */
import "yakuhanjp/dist/css/yakuhanmp.css"
/* YakuHanMPs */
import "yakuhanjp/dist/css/yakuhanmp_s.css"
/* YakuHanRP */
import "yakuhanjp/dist/css/yakuhanrp.css"
/* YakuHanRPs */
import "yakuhanjp/dist/css/yakuhanrp_s.css"Once the font files are installed, use your application's font picker to select the Noto Sans JP font family.
wght axis to achieve any weight between the available extremes.NotoSansJP-Bold.ttf) required for your design.You can include Yaku Han JP fonts in your project without local installation by using the jsDelivr CDN. Follow these steps:
<link> tag and place it inside the <head> section of your HTML document.YakuHanJP (or the specific font name) before your fallback Japanese font families in the font-family declaration.<!-- 1. Place the link tag in your <head> -->
<link href="https://cdn.jsdelivr.net/npm/yakuhanjp/dist/yakuhanjp-regular.css" rel="stylesheet">
<!-- 2. Use in your CSS -->
<style>
body {
font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
}
</style>In environments where CSS fallback mechanisms are unavailable (such as OG image generation with satori or game development), use the merged fonts provided by YakuHanJP. These fonts have the YakuHanJP logic integrated directly into the original Google Fonts.
To use them:
For a concrete implementation example using satori and @resvg/resvg-js for OG image generation, refer to the Playground implementation.
To use Noto Sans JP, install the font files into your system or application. This package provides two ways to use the font:
NotoSansJP-VariableFont_wght.ttf if your application supports variable fonts. This single file contains all weight styles via the wght axis, allowing you to select intermediate styles.static/ directory.# Variable Font (Single file for all weights)
NotoSansJP-VariableFont_wght.ttf
# Static Fonts (Individual files per weight)
static/NotoSansJP-Thin.ttf
static/NotoSansJP-ExtraLight.ttf
static/NotoSansJP-Light.ttf
static/NotoSansJP-Regular.ttf
static/NotoSansJP-Medium.ttf
static/NotoSansJP-SemiBold.ttf
static/NotoSansJP-Bold.ttf
static/NotoSansJP-ExtraBold.ttf
static/NotoSansJP-Black.ttfInstall the yakuhanjp package using npm to use the Yaku Han JP font styles in your project.
$ npm install yakuhanjpThe minista.config.ts file allows you to configure the Minista build process. Within the assets object, you can configure partial settings. Setting usePreact: true enables the use of Preact for partials, which can be used to optimize performance or compatibility when rendering components within your Minista site.
import { defineConfig } from "minista"
export default defineConfig({
assets: {
partial: {
usePreact: true,
},
},
})Yaku Han JP is dual-licensed under SIL OFL 1.1 and MIT.
Note that the underlying fonts used in the project have their own licenses:
Noto Sans JP is provided under the OFL (Open Font License).
OFL.txt file included in this package.The pluginOgp() function provides a Vite plugin that exposes an API endpoint for generating Open Graph Protocol (OGP) images. When the plugin is active, it adds a middleware that listens for requests to /api/generate-ogp.
To use this plugin, include it in your Vite configuration. The endpoint accepts query parameters to customize the generated image, specifically the text content, the font name, and the font weight.
import { pluginOgp } from './path/to/plugin';
export default {
plugins: [
pluginOgp()
]
};