fix: font issue with terminal

Author: bajrangCoder

src/lib/fonts.js

@@ -9,6 +9,8 @@ import robotoMono from "../res/fonts/RobotoMono.ttf";
 const fonts = new Map();
 const customFontNames = new Set();
 const CUSTOM_FONTS_KEY = "custom_fonts";
+const FONT_FACE_STYLE_ID = "font-face-style";
+const EDITOR_STYLE_ID = "editor-font-style";
 
 add(
 	"Fira Code",
@@ -188,29 +190,14 @@ function has(name) {
 async function setFont(name) {
 	loader.showTitleLoader();
 	try {
-		const $style = tag.get("style#font-style") ?? (
-			<style id="font-style"></style>
-		);
-		let css = get(name);
-
-		// Get all URL font references
-		const urls = [...css.matchAll(/url\((.*?)\)/g)].map((match) => match[1]);
-
-		urls?.map(async (url) => {
-			if (!/^https?/.test(url)) return;
-			if (/^https?:\/\/localhost/.test(url)) return;
-			const fontFile = await downloadFont(name, url);
-			const internalUrl = await helpers.toInternalUri(fontFile);
-			css = css.replace(url, internalUrl);
-		}),
-			($style.textContent = `${css}
-  .editor-container.ace_editor{
+		await loadFont(name);
+		const $style = ensureStyleElement(EDITOR_STYLE_ID);
+		$style.textContent = `.editor-container.ace_editor{
     font-family: "${name}", NotoMono, Monaco, MONOSPACE !important;
   }
   .ace_text{
     font-family: inherit !important;
-  }`);
-		document.head.append($style);
+  }`;
 	} catch (error) {
 		toast(`${name} font not found`, "error");
 		setFont("Roboto Mono");
@@ -238,7 +225,7 @@ async function downloadFont(name, link) {
 }
 
 async function loadFont(name) {
-	const $style = tag.get("style#font-style") ?? <style id="font-style"></style>;
+	const $style = ensureStyleElement(FONT_FACE_STYLE_ID);
 	let css = get(name);
 
 	if (!css) {
@@ -260,12 +247,20 @@ async function loadFont(name) {
 	// Add font face to document if not already present
 	if (!$style.textContent.includes(`font-family: '${name}'`)) {
 		$style.textContent = `${$style.textContent}\n${css}`;
-		document.head.append($style);
 	}
 
 	return css;
 }
 
+function ensureStyleElement(id) {
+	const selector = `style#${id}`;
+	const $style = tag.get(selector) ?? <style id={id}></style>;
+	if (!$style.isConnected) {
+		document.head.append($style);
+	}
+	return $style;
+}
+
 export default {
 	add,
 	addCustom,

src/main.js

@@ -18,10 +18,7 @@ import { setKeyBindings } from "ace/commands";
 import { initModes } from "ace/modelist";
 import Contextmenu from "components/contextmenu";
 import Sidebar from "components/sidebar";
-import {
-	DEFAULT_TERMINAL_SETTINGS,
-	TerminalManager,
-} from "components/terminal";
+import { TerminalManager } from "components/terminal";
 import tile from "components/tile";
 import toast from "components/toast";
 import tutorial from "components/tutorial";
@@ -37,7 +34,6 @@ import checkPluginsUpdate from "lib/checkPluginsUpdate";
 import EditorFile from "lib/editorFile";
 import EditorManager from "lib/editorManager";
 import { initFileList } from "lib/fileList";
-import fonts from "lib/fonts";
 import lang from "lib/lang";
 import loadPlugins from "lib/loadPlugins";
 import Logger from "lib/logger";
@@ -492,20 +488,6 @@ async function loadApp() {
 
 	initFileList();
 
-	const terminalSettings = settings.value.terminalSettings || {};
-	const terminalFontFamily =
-		terminalSettings.fontFamily || DEFAULT_TERMINAL_SETTINGS.fontFamily;
-	if (terminalFontFamily) {
-		try {
-			await fonts.loadFont(terminalFontFamily);
-		} catch (error) {
-			console.error(
-				`Failed to preload terminal font ${terminalFontFamily}:`,
-				error,
-			);
-		}
-	}
-
 	TerminalManager.restorePersistedSessions().catch((error) => {
 		console.error("Terminal restoration failed:", error);
 	});