Fix "Can't resolve 'next/font/local/target.css'"

.gitignore

@@ -40,3 +40,6 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# prepare fonts programmatically
+app/fonts/index.ts

package.json

@@ -3,8 +3,9 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
+		"predev": "node prepare-font.js",
 		"dev": "SENTRY_SUPPRESS_TURBOPACK_WARNING=1 next dev --turbo",
-		"prebuild": "node download-assets.js",
+		"prebuild": "node prepare-font.js",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"

download-assets.js → prepare-font.js

@@ -35,6 +35,7 @@ const downloadFile = async (url, destination) => {
 			url: `${BLOB_URL}/fonts/${fileName}.woff2`,
 			destination: `./app/fonts/${fileName}.woff2`,
 		}));
+		fs.copyFile("./vendor/fonts/rosert.ts", "./app/fonts/index.ts");
 
 		for (const file of filesToDownload) {
 			try {
@@ -45,6 +46,7 @@ const downloadFile = async (url, destination) => {
 			}
 		}
 	} else {
-		console.log("Skipping download in non-production environment");
+		fs.copyFile("./vendor/fonts/alternative.ts", "./app/fonts/index.ts");
+		console.log("Using an alternative font file in development mode.");
 	}
 })();

vendor/fonts/alternative.ts

@@ -0,0 +1,8 @@
+import { Roboto_Serif } from "next/font/google";
+/**
+ * Since the Rosart font is a proprietary font, use an alternative font during OSS development.
+ */
+export const rosart = Roboto_Serif({
+	variable: "--font-rosart",
+	subsets: ["latin"],
+});