English | 日本語
Gen Interface JP is a typeface designed for digital interfaces that aims to harmonize Latin script with Japanese. Blending Inter with Noto Sans JP, it ensures consistent readability across multiple languages.
- Gen Interface JP: Body & UI
- Gen Interface JP Display: Headings & display
- 100: Thin
- 200: ExtraLight
- 300: Light
- 400: Regular
- 500: Medium
- 600: SemiBold
- 700: Bold
- 800: ExtraBold
In web projects, you can use web fonts simply by loading a stylesheet within the head.
With subsetting similar to Google Fonts, we achieve faster display than a single bundled font file.
<!--
index.html
100.css ... 800.css
-->
<head>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/gen-interface-jp@latest/cdn/400.css"
/>
</head>/* style.css */
body {
font-family: "Gen Interface JP", sans-serif;
font-weight: 400; /* 100–800 */
}<!--
index.html
display-100.css ... display-800.css
-->
<head>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/gen-interface-jp@latest/cdn/display-800.css"
/>
</head>/* style.css */
h1,
h2 {
font-family: "Gen Interface JP Display", sans-serif;
font-weight: 800; /* 100–800 */
}all.css: All 16 weights400.css: Gen Interface JP Regular (400)display-400.css: Gen Interface JP Display Regular (400)
Use cdn/*.css files when linking directly from jsDelivr. Use plain .css
files after npm install or when self-hosting so they keep relative ./w/...
WOFF2 references.
src/
font/ # Core font generation
webfont/ # Web font CSS + subset WOFF2
release/ # GitHub Release / npm packaging
site/ # Landing page and font preview site
vendor/
fonts/ # Inter and Noto Sans JP source fonts
nam-files/ # googlefonts/nam-files data for subsetting
docs/
ARCHITECTURE.md # Full build pipeline spec
The repository's primary artifact is the font families generated by src/font/. src/webfont/ and src/release/ are downstream packaging stages. Build outputs go under dist/ and are not committed.
Build pipeline and internal-spec details are in docs/ARCHITECTURE.md.
make font # Generate fonts under dist/ttf/
make site # Build the site (site/dist/)
make serve # Local dev server for the siteFor webfont subsetting, release packaging, tests, npm publishing, and the full command list, see the "Commands" section in docs/ARCHITECTURE.md.
Source code in this repository is MIT License; the generated fonts are licensed under SIL Open Font License 1.1.
Items under vendor/ follow their bundled licenses.
