feat(fonts): npm provider (#15529)

* feat(fonts): npm provider

* misc

* jsdocs

* provide readFile

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

---------

Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com>

Author: florian-lefebvre

.changeset/heavy-beers-unite.md

@@ -0,0 +1,27 @@
+---
+'astro': minor
+---
+
+Adds a new build-in font provider `npm` to access fonts installed as NPM packages
+
+You can now add web fonts specified in your `package.json` through Astro's type-safe Fonts API.  The `npm` font provider allows you to add fonts either from locally installed packages in `node_modules` or from a CDN.
+
+Set `fontProviders.npm()` as your fonts provider along with the required `name` and `cssVariable` values, and add `options` as needed:
+
+```js
+import { defineConfig, fontProviders } from 'astro/config';
+
+export default defineConfig({
+    experimental: {
+        fonts: [
+            {
+                name: 'Roboto',
+                provider: fontProviders.npm(),
+                cssVariable: '--font-roboto',
+            },
+        ],
+    },
+});
+```
+
+See the [NPM font provider reference documentation](https://v6.docs.astro.build/en/reference/font-provider-reference/#npm) for more details.

packages/astro/package.json

@@ -163,7 +163,7 @@
     "tinyglobby": "^0.2.15",
     "tsconfck": "^3.1.6",
     "ultrahtml": "^1.6.0",
-    "unifont": "~0.7.3",
+    "unifont": "~0.7.4",
     "unist-util-visit": "^5.1.0",
     "unstorage": "^1.17.4",
     "vfile": "^6.0.3",

packages/astro/src/assets/fonts/providers/index.ts

@@ -3,13 +3,17 @@ import {
 	type GoogleFamilyOptions,
 	type GoogleiconsFamilyOptions,
 	type InitializedProvider,
+	type NpmProviderOptions,
+	type NpmFamilyOptions,
 	providers,
 } from 'unifont';
 import { FontaceFontFileReader } from '../infra/fontace-font-file-reader.js';
 import type { FontProvider } from '../types.js';
 import { type LocalFamilyOptions, LocalFontProvider } from './local.js';
+import { fileURLToPath } from 'node:url';
+import { readFile } from 'node:fs/promises';
 
-/** [Adobe](https://fonts.adobe.com/) */
+/** [Adobe](https://v6.docs.astro.build/en/reference/font-provider-reference/#adobe) */
 function adobe(config: AdobeProviderOptions): FontProvider {
 	const provider = providers.adobe(config);
 	let initializedProvider: InitializedProvider | undefined;
@@ -28,7 +32,7 @@ function adobe(config: AdobeProviderOptions): FontProvider {
 	};
 }
 
-/** [Bunny](https://fonts.bunny.net/) */
+/** [Bunny](https://v6.docs.astro.build/en/reference/font-provider-reference/#bunny) */
 function bunny(): FontProvider {
 	const provider = providers.bunny();
 	let initializedProvider: InitializedProvider | undefined;
@@ -46,7 +50,7 @@ function bunny(): FontProvider {
 	};
 }
 
-/** [Fontshare](https://www.fontshare.com/) */
+/** [Fontshare](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontshare) */
 function fontshare(): FontProvider {
 	const provider = providers.fontshare();
 	let initializedProvider: InitializedProvider | undefined;
@@ -64,7 +68,7 @@ function fontshare(): FontProvider {
 	};
 }
 
-/** [Fontsource](https://fontsource.org/) */
+/** [Fontsource](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontsource) */
 function fontsource(): FontProvider {
 	const provider = providers.fontsource();
 	let initializedProvider: InitializedProvider | undefined;
@@ -82,7 +86,7 @@ function fontsource(): FontProvider {
 	};
 }
 
-/** [Google](https://fonts.google.com/) */
+/** [Google](https://v6.docs.astro.build/en/reference/font-provider-reference/#google) */
 function google(): FontProvider<GoogleFamilyOptions | undefined> {
 	const provider = providers.google();
 	let initializedProvider: InitializedProvider<GoogleFamilyOptions> | undefined;
@@ -100,7 +104,7 @@ function google(): FontProvider<GoogleFamilyOptions | undefined> {
 	};
 }
 
-/** [Google Icons](https://fonts.google.com/icons) */
+/** [Google Icons](https://v6.docs.astro.build/en/reference/font-provider-reference/#google-icons) */
 function googleicons(): FontProvider<GoogleiconsFamilyOptions | undefined> {
 	const provider = providers.googleicons();
 	let initializedProvider: InitializedProvider<GoogleiconsFamilyOptions> | undefined;
@@ -118,22 +122,46 @@ function googleicons(): FontProvider<GoogleiconsFamilyOptions | undefined> {
 	};
 }
 
-/** A provider that handles local files. */
+/** [Local](https://v6.docs.astro.build/en/reference/font-provider-reference/#local) */
 function local(): FontProvider<LocalFamilyOptions> {
 	return new LocalFontProvider({
 		fontFileReader: new FontaceFontFileReader(),
 	});
 }
 
+/** [NPM](https://v6.docs.astro.build/en/reference/font-provider-reference/#npm) */
+function npm(
+	options?: Omit<NpmProviderOptions, 'root' | 'readFile'>,
+): FontProvider<NpmFamilyOptions | undefined> {
+	let initializedProvider: InitializedProvider<NpmFamilyOptions> | undefined;
+	return {
+		name: providers.npm()._name,
+		async init(context) {
+			initializedProvider = await providers.npm({
+				...options,
+				root: fileURLToPath(context.root),
+				readFile: (path) => readFile(path, 'utf-8').catch(() => null),
+			})(context);
+		},
+		async resolveFont({ familyName, ...rest }) {
+			return await initializedProvider?.resolveFont(familyName, rest);
+		},
+		async listFonts() {
+			return await initializedProvider?.listFonts?.();
+		},
+	};
+}
+
 /**
  * Astro exports a few built-in providers:
- * - [Adobe](https://fonts.adobe.com/)
- * - [Bunny](https://fonts.bunny.net/)
- * - [Fontshare](https://www.fontshare.com/)
- * - [Fontsource](https://fontsource.org/)
- * - [Google](https://fonts.google.com/)
- * - [Google Icons](https://fonts.google.com/icons)
- * - Local
+ * - [Adobe](https://v6.docs.astro.build/en/reference/font-provider-reference/#adobe)
+ * - [Bunny](https://v6.docs.astro.build/en/reference/font-provider-reference/#bunny)
+ * - [Fontshare](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontshare)
+ * - [Fontsource](https://v6.docs.astro.build/en/reference/font-provider-reference/#fontsource)
+ * - [Google](https://v6.docs.astro.build/en/reference/font-provider-reference/#google)
+ * - [Google Icons](https://v6.docs.astro.build/en/reference/font-provider-reference/#google-icons)
+ * - [Local](https://v6.docs.astro.build/en/reference/font-provider-reference/#local)
+ * - [NPM](TODO:)
  */
 export const fontProviders = {
 	adobe,
@@ -143,4 +171,5 @@ export const fontProviders = {
 	google,
 	googleicons,
 	local,
+	npm,
 };

packages/astro/test/units/assets/fonts/providers.test.js

@@ -14,6 +14,7 @@ describe('fonts providers', () => {
 			assert.equal(fontProviders.fontsource().name, 'fontsource');
 			assert.equal(fontProviders.google().name, 'google');
 			assert.equal(fontProviders.googleicons().name, 'googleicons');
+			assert.equal(fontProviders.npm().name, 'npm');
 			assert.equal(fontProviders.local().name, 'local');
 		});