feat(fonts): experimental release

.changeset/happy-spies-punch.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Adds first-party support for fonts

packages/astro/client.d.ts

@@ -2,6 +2,7 @@
 /// <reference path="./types/content.d.ts" />
 /// <reference path="./types/actions.d.ts" />
 /// <reference path="./types/env.d.ts" />
+/// <reference path="./types/fonts.d.ts" />
 
 interface ImportMetaEnv {
 	/**
@@ -54,6 +55,7 @@ declare module 'astro:assets' {
 		inferRemoteSize: typeof import('./dist/assets/utils/index.js').inferRemoteSize;
 		Image: typeof import('./components/Image.astro').default;
 		Picture: typeof import('./components/Picture.astro').default;
+		Font: typeof import('./components/Font.astro').default;
 	};
 
 	type ImgAttributes = import('./dist/type-utils.js').WithRequired<
@@ -73,6 +75,7 @@ declare module 'astro:assets' {
 		imageConfig,
 		Image,
 		Picture,
+		Font,
 		inferRemoteSize,
 	}: AstroAssets;
 }

packages/astro/components/Font.astro

@@ -0,0 +1,30 @@
+---
+import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+
+// TODO: remove dynamic import when fonts are stabilized
+const { fontsData } = await import('virtual:astro:assets/fonts/internal').catch(() => {
+	throw new AstroError(AstroErrorData.ExperimentalFontsNotEnabled);
+});
+
+interface Props {
+	family: import('astro:assets').FontFamily;
+	preload?: boolean;
+}
+
+const { family, preload = false } = Astro.props;
+const data = fontsData.get(family);
+if (!data) {
+	throw new AstroError({
+		...AstroErrorData.FontFamilyNotFound,
+		message: AstroErrorData.FontFamilyNotFound.message(family),
+	});
+}
+---
+
+<style set:html={data.css}></style>
+{
+	preload &&
+		data.preloadData.map(({ url, type }) => (
+			<link rel="preload" href={url} as="font" type={`font/${type}`} crossorigin />
+		))
+}

packages/astro/package.json

@@ -65,6 +65,7 @@
     "./assets/endpoint/*": "./dist/assets/endpoint/*.js",
     "./assets/services/sharp": "./dist/assets/services/sharp.js",
     "./assets/services/noop": "./dist/assets/services/noop.js",
+    "./assets/fonts/providers/*": "./dist/assets/fonts/providers/entrypoints/*.js",
     "./loaders": "./dist/content/loaders/index.js",
     "./content/runtime": "./dist/content/runtime.js",
     "./content/runtime-assets": "./dist/content/runtime-assets.js",
@@ -113,7 +114,7 @@
     "test:e2e:match": "playwright test -g",
     "test:e2e:chrome": "playwright test",
     "test:e2e:firefox": "playwright test --config playwright.firefox.config.js",
-    "test:types": "tsc --project tsconfig.tests.json",
+    "test:types": "tsc --project test/types/tsconfig.json",
     "test:unit": "astro-scripts test \"test/units/**/*.test.js\" --teardown ./test/units/teardown.js",
     "test:integration": "astro-scripts test \"test/*.test.js\""
   },
@@ -122,6 +123,8 @@
     "@astrojs/internal-helpers": "workspace:*",
     "@astrojs/markdown-remark": "workspace:*",
     "@astrojs/telemetry": "workspace:*",
+    "@capsizecss/metrics": "^3.5.0",
+    "@capsizecss/unpack": "^2.4.0",
     "@oslojs/encoding": "^1.1.0",
     "@rollup/pluginutils": "^5.1.4",
     "acorn": "^8.14.1",
@@ -164,6 +167,7 @@
     "tinyglobby": "^0.2.12",
     "tsconfck": "^3.1.5",
     "ultrahtml": "^1.6.0",
+    "unifont": "^0.1.7",
     "unist-util-visit": "^5.0.0",
     "unstorage": "^1.15.0",
     "vfile": "^6.0.3",

packages/astro/src/actions/plugins.ts

@@ -4,7 +4,7 @@ import { addRollupInput } from '../core/build/add-rollup-input.js';
 import type { BuildInternals } from '../core/build/internal.js';
 import type { StaticBuildOptions } from '../core/build/types.js';
 import { shouldAppendForwardSlash } from '../core/build/util.js';
-import { getOutputDirectory } from '../prerender/utils.js';
+import { getServerOutputDirectory } from '../prerender/utils.js';
 import type { AstroSettings } from '../types/astro.js';
 import {
 	ASTRO_ACTIONS_INTERNAL_MODULE_ID,
@@ -73,7 +73,7 @@ export function vitePluginActionsBuild(
 					chunk.type !== 'asset' &&
 					chunk.facadeModuleId === RESOLVED_ASTRO_ACTIONS_INTERNAL_MODULE_ID
 				) {
-					const outputDirectory = getOutputDirectory(opts.settings);
+					const outputDirectory = getServerOutputDirectory(opts.settings);
 					internals.astroActionsEntryPoint = new URL(chunkName, outputDirectory);
 				}
 			}

packages/astro/src/assets/fonts/README.md

@@ -0,0 +1,11 @@
+# fonts
+
+The vite plugin orchestrates the fonts logic:
+
+- Retrieves data from the config
+- Initializes font providers
+- Fetches fonts data
+- In dev, serves a middleware that dynamically loads and caches fonts data
+- In build, download fonts data (from cache if possible)
+
+The `<Font />` component is the only aspect not managed in the vite plugin, since it's exported from `astro:assets`.

packages/astro/src/assets/fonts/config.ts

@@ -0,0 +1,82 @@
+import { z } from 'zod';
+import { GOOGLE_PROVIDER_NAME, LOCAL_PROVIDER_NAME } from './constants.js';
+
+// TODO: jsdoc for everything, most of those end up in the public AstroConfig type
+
+const weightSchema = z.union([z.string(), z.number()]);
+const styleSchema = z.enum(['normal', 'italic', 'oblique']);
+
+const familyPropertiesSchema = z.object({
+	weight: weightSchema,
+	style: styleSchema,
+	display: z.enum(['auto', 'block', 'swap', 'fallback', 'optional']).optional(),
+	unicodeRange: z.array(z.string()).nonempty().optional(),
+	stretch: z.string().optional(),
+	featureSettings: z.string().optional(),
+	variationSettings: z.string().optional(),
+});
+
+const fallbacksSchema = z.object({
+	fallbacks: z.array(z.string()).nonempty().optional(),
+	automaticFallback: z.boolean().optional(),
+});
+
+export const requiredFamilyAttributesSchema = z.object({
+	name: z.string(),
+	cssVariable: z.string(),
+});
+
+const entrypointSchema = z.union([z.string(), z.instanceof(URL)]);
+
+export const fontProviderSchema = z
+	.object({
+		entrypoint: entrypointSchema,
+		config: z.record(z.string(), z.any()).optional(),
+	})
+	.strict();
+
+export const localFontFamilySchema = requiredFamilyAttributesSchema
+	.merge(fallbacksSchema)
+	.merge(
+		z.object({
+			provider: z.literal(LOCAL_PROVIDER_NAME).optional(),
+			variants: z
+				.array(
+					familyPropertiesSchema.merge(
+						z
+							.object({
+								src: z
+									.array(
+										z.union([
+											entrypointSchema,
+											z.object({ url: entrypointSchema, tech: z.string().optional() }).strict(),
+										]),
+									)
+									.nonempty(),
+								// TODO: find a way to support subsets (through fontkit?)
+							})
+							.strict(),
+					),
+				)
+				.nonempty(),
+		}),
+	)
+	.strict();
+
+export const remoteFontFamilySchema = requiredFamilyAttributesSchema
+	.merge(
+		familyPropertiesSchema.omit({
+			weight: true,
+			style: true,
+		}),
+	)
+	.merge(fallbacksSchema)
+	.merge(
+		z.object({
+			provider: z.union([z.literal(GOOGLE_PROVIDER_NAME), fontProviderSchema]).optional(),
+			weights: z.array(weightSchema).nonempty().optional(),
+			styles: z.array(styleSchema).nonempty().optional(),
+			subsets: z.array(z.string()).nonempty().optional(),
+		}),
+	)
+	.strict();

packages/astro/src/assets/fonts/constants.ts

@@ -0,0 +1,43 @@
+import type { ResolvedRemoteFontFamily } from './types.js';
+
+export const GOOGLE_PROVIDER_NAME = 'google';
+export const LOCAL_PROVIDER_NAME = 'local';
+
+export const BUILTIN_PROVIDERS = [GOOGLE_PROVIDER_NAME, LOCAL_PROVIDER_NAME] as const;
+
+export const DEFAULTS = {
+	weights: ['400'],
+	styles: ['normal', 'italic'],
+	subsets: ['cyrillic-ext', 'cyrillic', 'greek-ext', 'greek', 'vietnamese', 'latin-ext', 'latin'],
+	// Technically serif is the browser default but most websites these days use sans-serif
+	fallbacks: ['sans-serif'],
+	automaticFallback: true,
+} satisfies Partial<ResolvedRemoteFontFamily>;
+
+export const VIRTUAL_MODULE_ID = 'virtual:astro:assets/fonts/internal';
+export const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
+
+// Requires a trailing slash
+export const URL_PREFIX = '/_astro/fonts/';
+export const CACHE_DIR = './fonts/';
+
+export const FONT_TYPES = ['woff2', 'woff', 'otf', 'ttf', 'eot'] as const;
+
+// Source: https://github.com/nuxt/fonts/blob/3a3eb6dfecc472242b3011b25f3fcbae237d0acc/src/module.ts#L55-L75
+export const DEFAULT_FALLBACKS: Record<string, Array<string>> = {
+	serif: ['Times New Roman'],
+	'sans-serif': ['Arial'],
+	monospace: ['Courier New'],
+	cursive: [],
+	fantasy: [],
+	'system-ui': ['BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial'],
+	'ui-serif': ['Times New Roman'],
+	'ui-sans-serif': ['Arial'],
+	'ui-monospace': ['Courier New'],
+	'ui-rounded': [],
+	emoji: [],
+	math: [],
+	fangsong: [],
+};
+
+export const FONTS_TYPES_FILE = 'fonts.d.ts';