inject font preload links

packages/kit/src/exports/vite/build/build_server.js

@@ -283,11 +283,15 @@ export async function build_server(options, client) {
 		/** @type {string[]} */
 		const stylesheets = [];
 
+		/** @type {string[]} */
+		const fonts = [];
+
 		if (node.component) {
 			const entry = find_deps(client.vite_manifest, node.component, true);
 
 			imported.push(...entry.imports);
 			stylesheets.push(...entry.stylesheets);
+			fonts.push(...entry.fonts);
 
 			exports.push(
 				`export const component = async () => (await import('../${
@@ -302,6 +306,7 @@ export async function build_server(options, client) {
 
 			imported.push(...entry.imports);
 			stylesheets.push(...entry.stylesheets);
+			fonts.push(...entry.fonts);
 
 			imports.push(`import * as shared from '../${vite_manifest[node.shared].file}';`);
 			exports.push(`export { shared };`);
@@ -314,7 +319,8 @@ export async function build_server(options, client) {
 
 		exports.push(
 			`export const imports = ${s(imported)};`,
-			`export const stylesheets = ${s(stylesheets)};`
+			`export const stylesheets = ${s(stylesheets)};`,
+			`export const fonts = ${s(fonts)};`
 		);
 
 		/** @type {string[]} */

packages/kit/src/exports/vite/build/utils.js

@@ -45,6 +45,9 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 	/** @type {Set<string>} */
 	const stylesheets = new Set();
 
+	/** @type {Set<string>} */
+	const fonts = new Set();
+
 	/**
 	 * @param {string} current
 	 * @param {boolean} add_js
@@ -57,6 +60,14 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 
 		if (add_js) imports.add(chunk.file);
 
+		if (chunk.assets) {
+			for (const asset of chunk.assets) {
+				if (/\.(woff2?|ttf|otf)$/.test(asset)) {
+					fonts.add(asset);
+				}
+			}
+		}
+
 		if (chunk.css) {
 			chunk.css.forEach((file) => stylesheets.add(file));
 		}
@@ -77,7 +88,8 @@ export function find_deps(manifest, entry, add_dynamic_css) {
 	return {
 		file: chunk.file,
 		imports: Array.from(imports),
-		stylesheets: Array.from(stylesheets)
+		stylesheets: Array.from(stylesheets),
+		fonts: Array.from(fonts)
 	};
 }
 

packages/kit/src/exports/vite/dev/index.js

@@ -65,7 +65,8 @@ export async function dev(vite, vite_config, svelte_config) {
 				entry: {
 					file: `/@fs${runtime_prefix}/client/start.js`,
 					imports: [],
-					stylesheets: []
+					stylesheets: [],
+					fonts: []
 				},
 				nodes: manifest_data.nodes.map((node, index) => {
 					return async () => {
@@ -80,6 +81,7 @@ export async function dev(vite, vite_config, svelte_config) {
 						// these are unused in dev, it's easier to include them
 						result.imports = [];
 						result.stylesheets = [];
+						result.fonts = [];
 
 						if (node.component) {
 							result.component = async () => {

packages/kit/src/runtime/server/page/render.js

@@ -55,6 +55,7 @@ export async function render_response({
 
 	const stylesheets = new Set(entry.stylesheets);
 	const modulepreloads = new Set(entry.imports);
+	const fonts = new Set(options.manifest._.entry.fonts);
 
 	/** @type {Set<string>} */
 	const link_header_preloads = new Set();
@@ -129,6 +130,10 @@ export async function render_response({
 				node.stylesheets.forEach((url) => stylesheets.add(url));
 			}
 
+			if (node.fonts) {
+				node.fonts.forEach((url) => fonts.add(url));
+			}
+
 			if (node.inline_styles) {
 				Object.entries(await node.inline_styles()).forEach(([k, v]) => inline_styles.set(k, v));
 			}
@@ -238,6 +243,19 @@ export async function render_response({
 		head += `\n\t\t<link href="${path}" ${attributes.join(' ')}>`;
 	}
 
+	for (const dep of fonts) {
+		const ext = dep.slice(dep.lastIndexOf('.') + 1);
+		const attributes = [
+			'rel="preload"',
+			'as="font"',
+			`type="font/${ext}"`,
+			`href="${prefixed(dep)}"`,
+			'crossorigin'
+		];
+
+		head += `\n\t\t<link ${attributes.join(' ')}>`;
+	}
+
 	if (page_config.csr) {
 		// prettier-ignore
 		const init_app = `

packages/kit/types/index.d.ts

@@ -616,6 +616,7 @@ export interface SSRManifest {
 			file: string;
 			imports: string[];
 			stylesheets: string[];
+			fonts: string[];
 		};
 		nodes: SSRNodeLoader[];
 		routes: SSRRoute[];

packages/kit/types/internal.d.ts

@@ -57,6 +57,7 @@ export interface BuildData {
 			file: string;
 			imports: string[];
 			stylesheets: string[];
+			fonts: string[];
 		};
 		vite_manifest: import('vite').Manifest;
 	};
@@ -255,6 +256,8 @@ export interface SSRNode {
 	imports: string[];
 	/** external CSS files */
 	stylesheets: string[];
+	/** external font files */
+	fonts: string[];
 	/** inlined styles */
 	inline_styles?(): MaybePromise<Record<string, string>>;