@bloxwap/font 0.1.1 → 0.1.2

package/README.md

@@ -9,6 +9,8 @@ npm install @bloxwap/font
 
 ## Next.js
 
+The `next/font` exports need Next.js 15 or later.
+
 ```tsx title="app/layout.tsx"
 import { BloxwapSans } from '@bloxwap/font/sans';
 import { BloxwapMono } from '@bloxwap/font/mono';
@@ -22,7 +24,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-`BloxwapSans`, `BloxwapMono` and `BloxwapPixel` come from `next/font/local`, so Next.js self-hosts and preloads them.
+`BloxwapSans`, `BloxwapMono` and `BloxwapPixel` come from `next/font/local`, so Next.js self-hosts them and preloads
+the normal face. The italic is in the same family but isn't preloaded: a page downloads it only when it renders italic text.
 `.variable` defines `--font-bloxwap-sans`, `--font-bloxwap-mono` and `--font-bloxwap-pixel`:
 
 ```css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloxwap/font",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Bloxwap Sans, Mono and Pixel: rounded variable web fonts with Arabic, Hebrew, Armenian, Georgian, Japanese, Korean and Chinese companions. next/font exports and a plain CSS stylesheet.",
   "type": "module",
   "license": "OFL-1.1",
@@ -75,7 +75,7 @@
     "prepack": "node scripts/build.mjs"
   },
   "peerDependencies": {
-    "next": ">=13.2.0"
+    "next": ">=15.0.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/mono-italic.js

@@ -0,0 +1,19 @@
+import localFont from 'next/font/local';
+
+// The italic face of Bloxwap Mono, imported for its side effect by ./mono.js. It is a separate next/font call so that it
+// can opt out of preloading: `preload` applies to every file in a call, and a page that never renders italic text
+// would otherwise download the italic as well. Without a preload, the browser fetches this face only when text uses it.
+//
+// From Next.js 15, next/font/local names the family after the const the call is assigned to (Next 13.2-14 hashed it
+// per call, hence the `next >=15` peer range), so this const must stay `BloxwapMono`:
+// that adds the italic to the same family as the normal face in ./mono.js, and <em> gets the real italic, not a
+// synthesized slant.
+const BloxwapMono = localFont({
+  src: [{ path: '../fonts/BloxwapMono/BloxwapMono-Italic-Variable.woff2', weight: '100 900', style: 'italic' }],
+  display: 'swap',
+  preload: false,
+  // Like ./mono.js, no metric-adjusted fallback face.
+  adjustFontFallback: false,
+});
+
+export default BloxwapMono;

package/src/mono.d.ts

@@ -1,3 +1,7 @@
 import type { BloxwapFont } from './font';
 
+/**
+ * Bloxwap Mono (`next/font/local`): `variable` sets --font-bloxwap-mono. Only the normal face is preloaded; the real
+ * italic is in the same family and downloads only when a page renders italic text.
+ */
 export declare const BloxwapMono: BloxwapFont;

package/src/mono.js

@@ -1,13 +1,17 @@
 import localFont from 'next/font/local';
 // The companion scripts (Arabic, Hebrew, Armenian, Georgian, CJK) as one fallback family with unicode-range.
 import '../mono-scripts.css';
+// The italic face: the same family, not preloaded, so it downloads only when a page renders italic text.
+import './mono-italic.js';
 
-/** Bloxwap Mono for Next.js: variable weight 100–900 with italics; `variable` sets --font-bloxwap-mono. */
+/**
+ * Bloxwap Mono for Next.js: variable weight 100–900 with italics; `variable` sets --font-bloxwap-mono.
+ * Next.js preloads the normal face; the italic loads only when a page renders italic text.
+ */
 export const BloxwapMono = localFont({
-  src: [
-    { path: '../fonts/BloxwapMono/BloxwapMono-Variable.woff2', weight: '100 900', style: 'normal' },
-    { path: '../fonts/BloxwapMono/BloxwapMono-Italic-Variable.woff2', weight: '100 900', style: 'italic' },
-  ],
+  // No `style` on this src: with a single file next/font copies its style onto className and .style, and a
+  // `font-style: normal` there would cancel inherited italics (<em><code className>) and fall back to the normal face.
+  src: [{ path: '../fonts/BloxwapMono/BloxwapMono-Variable.woff2', weight: '100 900' }],
   variable: '--font-bloxwap-mono',
   display: 'swap',
   adjustFontFallback: false,

package/src/pixel-italic.js

@@ -0,0 +1,19 @@
+import localFont from 'next/font/local';
+
+// The italic face of Bloxwap Pixel, imported for its side effect by ./pixel.js. It is a separate next/font call so that it
+// can opt out of preloading: `preload` applies to every file in a call, and a page that never renders italic text
+// would otherwise download the italic as well. Without a preload, the browser fetches this face only when text uses it.
+//
+// From Next.js 15, next/font/local names the family after the const the call is assigned to (Next 13.2-14 hashed it
+// per call, hence the `next >=15` peer range), so this const must stay `BloxwapPixel`:
+// that adds the italic to the same family as the normal face in ./pixel.js, and <em> gets the real italic, not a
+// synthesized slant.
+const BloxwapPixel = localFont({
+  src: [{ path: '../fonts/BloxwapPixel/BloxwapPixel-Italic-Variable.woff2', weight: '100 900', style: 'italic' }],
+  display: 'swap',
+  preload: false,
+  // Like ./pixel.js, no metric-adjusted fallback face.
+  adjustFontFallback: false,
+});
+
+export default BloxwapPixel;

package/src/pixel.d.ts

@@ -1,3 +1,7 @@
 import type { BloxwapFont } from './font';
 
+/**
+ * Bloxwap Pixel (`next/font/local`): `variable` sets --font-bloxwap-pixel. Only the normal face is preloaded; the real
+ * italic is in the same family and downloads only when a page renders italic text.
+ */
 export declare const BloxwapPixel: BloxwapFont;

package/src/pixel.js

@@ -1,14 +1,16 @@
 import localFont from 'next/font/local';
+// The italic face: the same family, not preloaded, so it downloads only when a page renders italic text.
+import './pixel-italic.js';
 
 /**
  * Bloxwap Pixel for Next.js: variable weight 100–900 and roundness (set `font-variation-settings: "ROND" 0–100`),
- * with italics; `variable` sets --font-bloxwap-pixel.
+ * with italics; `variable` sets --font-bloxwap-pixel. Next.js preloads the normal face; the italic loads only when a
+ * page renders italic text.
  */
 export const BloxwapPixel = localFont({
-  src: [
-    { path: '../fonts/BloxwapPixel/BloxwapPixel-Variable.woff2', weight: '100 900', style: 'normal' },
-    { path: '../fonts/BloxwapPixel/BloxwapPixel-Italic-Variable.woff2', weight: '100 900', style: 'italic' },
-  ],
+  // No `style` on this src: with a single file next/font copies its style onto className and .style, and a
+  // `font-style: normal` there would cancel inherited italics (<em><code className>) and fall back to the normal face.
+  src: [{ path: '../fonts/BloxwapPixel/BloxwapPixel-Variable.woff2', weight: '100 900' }],
   variable: '--font-bloxwap-pixel',
   display: 'swap',
   adjustFontFallback: false,

package/src/sans-italic.js

@@ -0,0 +1,19 @@
+import localFont from 'next/font/local';
+
+// The italic face of Bloxwap Sans, imported for its side effect by ./sans.js. It is a separate next/font call so that it
+// can opt out of preloading: `preload` applies to every file in a call, and a page that never renders italic text
+// would otherwise download the italic as well. Without a preload, the browser fetches this face only when text uses it.
+//
+// From Next.js 15, next/font/local names the family after the const the call is assigned to (Next 13.2-14 hashed it
+// per call, hence the `next >=15` peer range), so this const must stay `BloxwapSans`:
+// that adds the italic to the same family as the normal face in ./sans.js, and <em> gets the real italic, not a
+// synthesized slant.
+const BloxwapSans = localFont({
+  src: [{ path: '../fonts/BloxwapSans/BloxwapSans-Italic-Variable.woff2', weight: '100 900', style: 'italic' }],
+  display: 'swap',
+  preload: false,
+  // Like ./sans.js, no metric-adjusted fallback face.
+  adjustFontFallback: false,
+});
+
+export default BloxwapSans;

package/src/sans.d.ts

@@ -1,3 +1,7 @@
 import type { BloxwapFont } from './font';
 
+/**
+ * Bloxwap Sans (`next/font/local`): `variable` sets --font-bloxwap-sans. Only the normal face is preloaded; the real
+ * italic is in the same family and downloads only when a page renders italic text.
+ */
 export declare const BloxwapSans: BloxwapFont;

package/src/sans.js

@@ -1,13 +1,17 @@
 import localFont from 'next/font/local';
 // The companion scripts (Arabic, Hebrew, Armenian, Georgian, CJK) as one fallback family with unicode-range.
 import '../sans-scripts.css';
+// The italic face: the same family, not preloaded, so it downloads only when a page renders italic text.
+import './sans-italic.js';
 
-/** Bloxwap Sans for Next.js: variable weight 100–900 with italics; `variable` sets --font-bloxwap-sans. */
+/**
+ * Bloxwap Sans for Next.js: variable weight 100–900 with italics; `variable` sets --font-bloxwap-sans.
+ * Next.js preloads the normal face; the italic loads only when a page renders italic text.
+ */
 export const BloxwapSans = localFont({
-  src: [
-    { path: '../fonts/BloxwapSans/BloxwapSans-Variable.woff2', weight: '100 900', style: 'normal' },
-    { path: '../fonts/BloxwapSans/BloxwapSans-Italic-Variable.woff2', weight: '100 900', style: 'italic' },
-  ],
+  // No `style` on this src: with a single file next/font copies its style onto className and .style, and a
+  // `font-style: normal` there would cancel inherited italics (<em><code className>) and fall back to the normal face.
+  src: [{ path: '../fonts/BloxwapSans/BloxwapSans-Variable.woff2', weight: '100 900' }],
   variable: '--font-bloxwap-sans',
   display: 'swap',
   // A metric-adjusted Arial fallback would sit before the companions and draw Arabic and Hebrew in Arial.