diff --git a/packages/app/e2e/browser/appearance-font-family.spec.ts b/packages/app/e2e/browser/appearance-font-family.spec.ts
index 6ec8600017..57b42ebde1 100644
--- a/packages/app/e2e/browser/appearance-font-family.spec.ts
+++ b/packages/app/e2e/browser/appearance-font-family.spec.ts
@@ -13,25 +13,30 @@ async function setFontFamily(page: Page, name: string, family: string) {
   await input.press("Tab");
 }
 
-for (const name of ["Code font family", "Interface font family"]) {
-  test(`keeps settings usable after an unfinished quote in ${name}`, async ({ page }, testInfo) => {
-    await openAppearance(page);
-    await setFontFamily(page, name, "'Fira Code', monospace");
-    await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
+test("keeps settings usable while editing code and interface font families", async ({
+  page,
+}, testInfo) => {
+  await openAppearance(page);
 
-    await setFontFamily(page, name, "'foo");
-    await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
-    await expect(page.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport();
-    await expect(page.getByText("Theme", { exact: true }).first()).toHaveCSS("font-size", "12px");
+  for (const name of ["Code font family", "Interface font family"]) {
+    await test.step(`reject an unfinished quote in ${name} and restore the default`, async () => {
+      await setFontFamily(page, name, "'Fira Code', monospace");
+      await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
 
-    await page.screenshot({ path: testInfo.outputPath("rejected-font.png") });
-    await page.reload();
-    await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
-    await expect(page.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport();
-    await setFontFamily(page, name, "");
-    await expect(page.getByRole("textbox", { name })).toHaveValue("");
-  });
-}
+      await setFontFamily(page, name, "'foo");
+      await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
+      await expect(page.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport();
+      await expect(page.getByText("Theme", { exact: true }).first()).toHaveCSS("font-size", "12px");
+
+      await page.screenshot({ path: testInfo.outputPath(`rejected-${name}.png`) });
+      await page.reload();
+      await expect(page.getByRole("textbox", { name })).toHaveValue("'Fira Code', monospace");
+      await expect(page.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport();
+      await setFontFamily(page, name, "");
+      await expect(page.getByRole("textbox", { name })).toHaveValue("");
+    });
+  }
+});
 
 test("opens settings with defaults when a malformed font was already saved", async ({ page }) => {
   await page.addInitScript(() => {