Fix - Editor Google Fonts request returns HTTP 400 and never reaches the block editor

.themegrill-qa/suite.json

@@ -59,6 +59,10 @@
       "content-none.php",
       "content.php",
       "inc/template-tags.php"
+    ],
+    "block-editor": [
+      "style-editor-block.css",
+      "functions.php"
     ]
   }
 }

functions.php

@@ -174,14 +174,22 @@ function radiate_scripts() {
 add_action( 'wp_enqueue_scripts', 'radiate_scripts' );
 
 /**
- * Enqueue Google fonts and editor styles.
+ * Enqueue block editor styles and fonts.
+ *
+ * Hooked on `enqueue_block_assets` because styles enqueued on
+ * `enqueue_block_editor_assets` stay outside the block editor iframe, or only
+ * reach it through a compatibility path WordPress warns about.
  */
 function radiate_block_editor_styles() {
-	wp_enqueue_style( 'radiate-editor-googlefonts', '//fonts.googleapis.com/css2?family=Roboto|Merriweather:400,300&display=swap' );
+	if ( ! is_admin() ) {
+		return;
+	}
+
+	wp_enqueue_style( 'radiate-editor-googlefonts', 'https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&family=Roboto:wght@400&display=swap', array(), null );
 	wp_enqueue_style( 'radiate-block-editor-styles', get_template_directory_uri() . '/style-editor-block.css' );
 }
 
-add_action( 'enqueue_block_editor_assets', 'radiate_block_editor_styles', 1, 1 );
+add_action( 'enqueue_block_assets', 'radiate_block_editor_styles' );
 
 
 /**

tests/e2e/specs/block-editor/editor-fonts.spec.ts

@@ -0,0 +1,47 @@
+import { test, expect } from "../../fixtures";
+import { ADMIN_STATE, hasAdminCredentials } from "../../utils/login";
+
+test.use({ storageState: ADMIN_STATE });
+
+/**
+ * @area block-editor
+ * @tier fresh
+ * @guards radiate-pro#63
+ * @source fix/63-editor-google-fonts-url 2026-09-30; functions.php
+ * @why The theme asked Google for its editor fonts with an invalid css2 URL
+ *      (HTTP 400) and on a hook whose styles never reach the editor iframe, so
+ *      the editor text fell back to generic fonts. Guards that the editor canvas
+ *      carries the fonts stylesheet with valid css2 syntax and the theme's
+ *      editor stylesheet, and that WordPress raises no "added to the iframe
+ *      incorrectly" warning for a theme asset. Reads the links themselves, so it
+ *      needs no network access to Google; it does not assert which font is
+ *      rendered.
+ */
+test("the block editor canvas loads the theme's Google fonts with a valid CSS2 URL @fresh @block-editor", async ({
+  page,
+}) => {
+  test.skip(!hasAdminCredentials(), "needs TGQA_ADMIN_USER / TGQA_ADMIN_PASS");
+  test.setTimeout(90_000);
+  page.on("dialog", (dialog) => dialog.accept());
+  const iframeWarnings: string[] = [];
+  page.on("console", (message) => {
+    if (/radiate-.*added to the iframe incorrectly/.test(message.text())) {
+      iframeWarnings.push(message.text());
+    }
+  });
+
+  await page.goto("/wp-admin/post-new.php");
+  await expect(page.locator('iframe[name="editor-canvas"]')).toBeVisible({ timeout: 60_000 });
+
+  const canvas = page.frameLocator('iframe[name="editor-canvas"]');
+  const fonts = canvas.locator('link[href*="fonts.googleapis.com"]');
+  await expect(fonts.first()).toBeAttached({ timeout: 20_000 });
+
+  const href = (await fonts.first().getAttribute("href"))!;
+  expect(href).toMatch(/^https:\/\/fonts\.googleapis\.com\/css2\?family=[^|]+$/);
+  expect(href).toContain("Merriweather");
+  expect(href).toContain("Roboto");
+
+  await expect(canvas.locator('link[href*="style-editor-block.css"]').first()).toBeAttached();
+  expect(iframeWarnings).toEqual([]);
+});