Option to preload fonts

[benmccann]

Describe the problem

For performance, you probably want to either preload fonts or swap them

Describe the proposed solution

There's an ssrManifest option that can be passed to the client build that we're not using today. It would generate an ssr-manifest.json which includes the font files

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[Grsmto]

For anyone reading this, this is how I did it in the meanwhile:

1. Create a small plugin to not hash the font files (otherwise we can't reference them in our html)

function VitePluginRemoveHashFontFiles() {
	return {
		name: 'Remove hash from font files',
		apply: 'build',
		enforce: 'post',
		config(config) {
			const defaultAssetFileNames = config.build.rollupOptions.output.assetFileNames;
			config.build.rollupOptions.output.assetFileNames = ({ type, name }) => {
				if (type === 'asset' && /\.(woff2?|ttf|otf)$/.test(name)) return `[name].[ext]`;
				return defaultAssetFileNames;
			};
		}
	};
}

const config = {
	plugins: [sveltekit(), VitePluginRenameCSSFontFiles()]
};

2. Then you can add your preload link somewhere in your app

<svelte:head>
	<link
		rel="preload"
		href="/open-sans-latin-variable-wghtOnly-italic.woff2"
		as="font"
		crossOrigin="anonymous"
	/>
</svelte:head>