add computer modern fonts to the list of possible typography options

docs/changelog/index.mdx

@@ -4,6 +4,12 @@ description: "List of all notable changes and updates to Reactive Resume"
 rss: true
 ---
 
+<Update label="v5.0.9" description="9th February 2026">
+  - Add Computer Modern web fonts to the font selector, allowing the user to choose from a variety of "Computer Modern" (LaTeX) fonts.
+    - This lets you create a resume that looks just like a LaTeX document, with the same fonts and styles.
+  - Update dependencies to the latest versions.
+</Update>
+
 <Update label="v5.0.8" description="9th February 2026">
   - Remove Passkey support from the authentication system, as it was causing issues with the authentication provider.
   - Update dependencies to the latest versions.

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reactive-resume",
 	"description": "Reactive Resume is a free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
-	"version": "5.0.8",
+	"version": "5.0.9",
 	"license": "MIT",
 	"type": "module",
 	"packageManager": "pnpm@10.29.2+sha512.bef43fa759d91fd2da4b319a5a0d13ef7a45bb985a3d7342058470f9d2051a3ba8674e629672654686ef9443ad13a82da2beb9eeb3e0221c87b8154fff9d74b8",

scripts/fonts/generate.ts

@@ -1,8 +1,11 @@
 /**
- * This script is responsible for generating a JSON file containing the fonts served by Google Fonts.
- * The JSON file will be used to populate the typography options in the resume builder.
+ * This script generates a JSON file containing the fonts served by Google Fonts,
+ * and also injects the Computer Modern font families as served by https://github.com/bitmaks/cm-web-fonts
+ * to ensure they appear in the application's typography options.
  *
- * Information about the Google Fonts Developer API can be found here: https://developers.google.com/fonts/docs/developer_api
+ * See:
+ * - Google Fonts API: https://developers.google.com/fonts/docs/developer_api
+ * - Computer Modern Web Fonts: https://github.com/bitmaks/cm-web-fonts
  */
 
 import { mkdir, readFile, writeFile } from "node:fs/promises";
@@ -19,6 +22,7 @@ const FONTS_DIR = "./scripts/fonts";
 const RESPONSE_FILE = `${FONTS_DIR}/response.json`;
 const WEBFONTLIST_FILE = `${FONTS_DIR}/webfontlist.json`;
 
+/** Returns JSON from Google Fonts API or (unless --force) from local cache if it exists */
 async function getGoogleFontsJSON() {
 	let contents: string | null = null;
 
@@ -44,21 +48,99 @@ async function getGoogleFontsJSON() {
 	return data;
 }
 
+/** Map Google Fonts API variant strings to simple weights */
 function variantToWeight(variant: Variant): Weight | null {
 	if (["100", "200", "300", "500", "600", "700", "800", "900"].includes(variant)) return variant as Weight;
 	if (variant === "regular") return "400";
 	return null;
 }
 
+/**
+ * Helper: Get additional Computer Modern webfonts (manually curated from https://github.com/bitmaks/cm-web-fonts)
+ * These do NOT come from Google Fonts but should appear in webfontlist.json output.
+ * Files are delivered via jsDelivr CDN.
+ */
+function getComputerModernWebFonts(): WebFont[] {
+	const CDN = "https://cdn.jsdelivr.net/gh/bitmaks/cm-web-fonts@latest/font";
+
+	return [
+		{
+			type: "web",
+			category: "display",
+			family: "Computer Modern Bright",
+			weights: ["400", "700"],
+			preview: `${CDN}/Bright/cmunbmr.woff`,
+			files: {
+				"400": `${CDN}/Bright/cmunbmr.woff`,
+				"400italic": `${CDN}/Bright/cmunbmo.woff`,
+				"700": `${CDN}/Bright/cmunbbx.woff`,
+				"700italic": `${CDN}/Bright/cmunbxo.woff`,
+			},
+		},
+		{
+			type: "web",
+			category: "serif",
+			family: "Computer Modern Concrete",
+			weights: ["400", "700"],
+			preview: `${CDN}/Concrete/cmunorm.woff`,
+			files: {
+				"400": `${CDN}/Concrete/cmunorm.woff`,
+				"400italic": `${CDN}/Concrete/cmunobi.woff`,
+				"700": `${CDN}/Concrete/cmunobx.woff`,
+				"700italic": `${CDN}/Concrete/cmunoti.woff`,
+			},
+		},
+		{
+			type: "web",
+			category: "sans-serif",
+			family: "Computer Modern Sans",
+			weights: ["400", "700"],
+			preview: `${CDN}/Sans/cmunss.woff`,
+			files: {
+				"400": `${CDN}/Sans/cmunss.woff`,
+				"400italic": `${CDN}/Sans/cmunsl.woff`,
+				"700": `${CDN}/Sans/cmunsx.woff`,
+				"700italic": `${CDN}/Sans/cmunsi.woff`,
+			},
+		},
+		{
+			type: "web",
+			category: "serif",
+			family: "Computer Modern Serif",
+			weights: ["400", "700"],
+			preview: `${CDN}/Serif/cmunrm.woff`,
+			files: {
+				"400": `${CDN}/Serif/cmunrm.woff`,
+				"400italic": `${CDN}/Serif/cmunti.woff`,
+				"700": `${CDN}/Serif/cmunbx.woff`,
+				"700italic": `${CDN}/Serif/cmunbi.woff`,
+			},
+		},
+		{
+			type: "web",
+			category: "monospace",
+			family: "Computer Modern Typewriter",
+			weights: ["400", "700"],
+			preview: `${CDN}/Typewriter/cmuntt.woff`,
+			files: {
+				"400": `${CDN}/Typewriter/cmuntt.woff`,
+				"400italic": `${CDN}/Typewriter/cmunit.woff`,
+				"700": `${CDN}/Typewriter/cmuntx.woff`,
+				"700italic": `${CDN}/Typewriter/cmuntb.woff`,
+			},
+		},
+	];
+}
+
 export async function generateFonts() {
 	const response = await getGoogleFontsJSON();
-	console.log(`Found ${response.items.length} fonts in total.`);
+	console.log(`Found ${response.items.length} fonts in total (Google Fonts).`);
 
 	const filteredItems = response.items.filter(
 		(item) => !skippedFamilies.some((family) => item.family.includes(family)),
 	);
 
-	const result: WebFont[] = filteredItems.slice(0, argLimit).map((item) => {
+	const googleFontResults: WebFont[] = filteredItems.slice(0, argLimit).map((item) => {
 		// 1. weights: Only non-italic, convert "regular" to "400"
 		const weights: Weight[] = item.variants.map((v) => variantToWeight(v)).filter((w): w is Weight => !!w);
 
@@ -82,11 +164,19 @@ export async function generateFonts() {
 		} satisfies WebFont;
 	});
 
-	const jsonString = argCompress ? JSON.stringify(result) : JSON.stringify(result, null, 2);
+	// Manually append Computer Modern web fonts
+	const computerModernFonts = getComputerModernWebFonts();
+	const allWebFonts: WebFont[] = [...computerModernFonts, ...googleFontResults];
+
+	console.log(
+		`Added ${computerModernFonts.length} Computer Modern Web Fonts. Total output: ${allWebFonts.length} web fonts.`,
+	);
+
+	const jsonString = argCompress ? JSON.stringify(allWebFonts) : JSON.stringify(allWebFonts, null, 2);
 	await mkdir(FONTS_DIR, { recursive: true });
 	await writeFile(WEBFONTLIST_FILE, jsonString, "utf-8");
 
-	console.log(`Generated ${result.length} fonts in the list.`);
+	console.log(`Generated ${allWebFonts.length} fonts in the list (including Computer Modern web fonts).`);
 }
 
 if (import.meta.main) {

scripts/fonts/types.ts

@@ -30,7 +30,7 @@ type Item = {
 	subsets: string[];
 	variants: Variant[];
 	colorCapabilities?: string[];
-	files: Record<Variant, string>;
+	files: Partial<Record<Variant, string>>;
 };
 
 export type APIResponse = {
@@ -47,5 +47,5 @@ export type WebFont = {
 	family: string;
 	weights: Weight[];
 	preview: string;
-	files: Record<FileWeight, string>;
+	files: Partial<Record<FileWeight, string>>;
 };

src/components/typography/combobox.tsx

@@ -65,7 +65,7 @@ type FontFamilyComboboxProps = Omit<ComboboxProps, "options">;
 
 export function FontFamilyCombobox({ className, ...props }: FontFamilyComboboxProps) {
 	const options = useMemo(() => {
-		return [...localFontList, ...webFontList].map((font: LocalFont | WebFont) => ({
+		return [...webFontList, ...localFontList].map((font: LocalFont | WebFont) => ({
 			value: font.family,
 			keywords: [font.family],
 			label: <FontDisplay name={font.family} type={font.type} url={"preview" in font ? font.preview : undefined} />,
@@ -79,15 +79,18 @@ type FontWeightComboboxProps = Omit<MultipleComboboxProps, "options"> & { fontFa
 
 export function FontWeightCombobox({ fontFamily, ...props }: FontWeightComboboxProps) {
 	const options = useMemo(() => {
-		const fontData = webFontMap.get(fontFamily);
+		const webFontData = webFontMap.get(fontFamily);
+		const localFontData = localFontList.find((font) => font.family === fontFamily);
 
 		let weights: string[] = [];
 
-		if (!fontData || !Array.isArray(fontData.weights)) {
-			// Provide all possible options for local fonts or unknown fontFamily
-			weights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
+		if (webFontData && Array.isArray(webFontData.weights) && webFontData.weights.length > 0) {
+			weights = webFontData.weights as string[];
+		} else if (localFontData && Array.isArray(localFontData.weights) && localFontData.weights.length > 0) {
+			weights = localFontData.weights as string[];
 		} else {
-			weights = fontData.weights as string[];
+			// Fallback to all possible weights
+			weights = ["100", "200", "300", "400", "500", "600", "700", "800", "900"];
 		}
 
 		return weights.map((variant: string) => ({