Commit d3cced8e2be for woocommerce
commit d3cced8e2be990e5a77aef3e6fe3953e21b87b64
Author: Tony Arcangelini <33258733+arcangelini@users.noreply.github.com>
Date: Mon Mar 30 19:39:12 2026 +0200
Email Editor: change default font (#63622)
* Email Editor: change default font
* Add changefile(s) from automation for the following project(s): woocommerce
* Add Inter font support to email editor theme.json
* Add changefile(s) from automation for the following project(s): packages/php/email-editor, woocommerce
* Add changelog entry for email-editor package
* Remove duplicate changelog entry
* Revert non-email-editor changes, add Inter to font map
* Fix quoted font names not matching email-safe fonts in style sync
CSS font-family values from WordPress themes or Gutenberg can arrive wrapped in
quotes (e.g. "Inter", sans-serif). The convert_to_email_safe_font method
was not stripping these quotes before lookup, causing all quoted font
names to fall through to the Arial default. Strip surrounding quotes
from the first font name after splitting on comma.
* Remove hardcoded fontFamily from heading element in email theme.json
Headings should inherit the global typography fontFamily rather than
having it duplicated. This avoids the heading font falling out of sync
when the global font is changed via site style sync.
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
Co-authored-by: Oluwaseun Olorunsola <seun.olorunsola@automattic.com>
diff --git a/packages/php/email-editor/changelog/63622-fix-WOOPRD-2899-refine-merchantcustomer-facing-email-styling b/packages/php/email-editor/changelog/63622-fix-WOOPRD-2899-refine-merchantcustomer-facing-email-styling
new file mode 100644
index 00000000000..97b9ec9f7ab
--- /dev/null
+++ b/packages/php/email-editor/changelog/63622-fix-WOOPRD-2899-refine-merchantcustomer-facing-email-styling
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Email Editor: update default font
\ No newline at end of file
diff --git a/packages/php/email-editor/src/Engine/class-site-style-sync-controller.php b/packages/php/email-editor/src/Engine/class-site-style-sync-controller.php
index d4be096f59e..0a48b9bc370 100644
--- a/packages/php/email-editor/src/Engine/class-site-style-sync-controller.php
+++ b/packages/php/email-editor/src/Engine/class-site-style-sync-controller.php
@@ -461,7 +461,9 @@ class Site_Style_Sync_Controller {
// Check if it's already an email-safe font.
$font_family_array = explode( ',', $font_family );
- $safe_font_family = $get_font_family( trim( $font_family_array[0] ) );
+ $first_font = trim( $font_family_array[0] );
+ $first_font = trim( $first_font, "\"'" );
+ $safe_font_family = $get_font_family( $first_font );
if ( $safe_font_family ) {
return $safe_font_family;
}
diff --git a/packages/php/email-editor/src/Engine/theme.json b/packages/php/email-editor/src/Engine/theme.json
index e3af49c9936..a04f3a60d4a 100644
--- a/packages/php/email-editor/src/Engine/theme.json
+++ b/packages/php/email-editor/src/Engine/theme.json
@@ -185,6 +185,11 @@
"name": "Pacifico",
"slug": "pacifico",
"fontFamily": "Pacifico, 'Arial Narrow', Arial, sans-serif"
+ },
+ {
+ "name": "Inter",
+ "slug": "inter",
+ "fontFamily": "Inter, 'Helvetica Neue', Arial, sans-serif"
}
],
"fontSizes": [
@@ -232,7 +237,7 @@
"text": "#1e1e1e"
},
"typography": {
- "fontFamily": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
+ "fontFamily": "Inter, 'Helvetica Neue', Arial, sans-serif",
"fontSize": "16px",
"fontWeight": "400",
"fontStyle": "normal",
@@ -244,7 +249,6 @@
"elements": {
"heading": {
"typography": {
- "fontFamily": "Arial, 'Helvetica Neue', Helvetica, sans-serif",
"fontWeight": "400",
"fontStyle": "normal",
"lineHeight": "1.2"
diff --git a/packages/php/email-editor/tests/integration/Engine/Site_Style_Sync_Controller_Test.php b/packages/php/email-editor/tests/integration/Engine/Site_Style_Sync_Controller_Test.php
index 4cb2052d107..83950ff9f21 100644
--- a/packages/php/email-editor/tests/integration/Engine/Site_Style_Sync_Controller_Test.php
+++ b/packages/php/email-editor/tests/integration/Engine/Site_Style_Sync_Controller_Test.php
@@ -1091,6 +1091,138 @@ class Site_Style_Sync_Controller_Test extends \Email_Editor_Integration_Test_Cas
$this->assertEquals( 'min(var(--size), 2vw)', $synced_data['styles']['typography']['fontSize'] );
}
+ /**
+ * Data provider for quoted font family tests.
+ *
+ * @return array Test cases with input font family and expected output.
+ */
+ public function quoted_font_family_data_provider(): array {
+ return array(
+ 'double-quoted Inter with fallback' => array(
+ '"Inter", sans-serif',
+ "Inter, 'Helvetica Neue', Arial, sans-serif",
+ ),
+ 'double-quoted Arial with fallback' => array(
+ '"Arial", sans-serif',
+ "Arial, 'Helvetica Neue', Helvetica, sans-serif",
+ ),
+ 'double-quoted Georgia' => array(
+ '"Georgia", serif',
+ "Georgia, Times, 'Times New Roman', serif",
+ ),
+ 'single-quoted Inter with fallback' => array(
+ "'Inter', sans-serif",
+ "Inter, 'Helvetica Neue', Arial, sans-serif",
+ ),
+ 'single-quoted Courier New' => array(
+ "'Courier New', monospace",
+ "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
+ ),
+ 'unquoted Inter with fallback' => array(
+ 'Inter, sans-serif',
+ "Inter, 'Helvetica Neue', Arial, sans-serif",
+ ),
+ 'double-quoted Roboto with fallback' => array(
+ '"Roboto", sans-serif',
+ "roboto, 'helvetica neue', helvetica, arial, sans-serif",
+ ),
+ 'double-quoted unknown font defaults' => array(
+ '"SomeCustomFont", sans-serif',
+ "Arial, 'Helvetica Neue', Helvetica, sans-serif",
+ ),
+ );
+ }
+
+ /**
+ * Test convert_to_email_safe_font with quoted font names.
+ *
+ * @testdox Should correctly resolve font family when name is wrapped in quotes.
+ * @dataProvider quoted_font_family_data_provider
+ *
+ * @param string $input_font The input font family string (potentially quoted).
+ * @param string $expected_font The expected email-safe font family output.
+ */
+ public function test_convert_to_email_safe_font_with_quoted_names( string $input_font, string $expected_font ): void {
+ $reflection = new \ReflectionClass( $this->controller );
+ $method = $reflection->getMethod( 'convert_to_email_safe_font' );
+ $method->setAccessible( true );
+
+ $result = $method->invoke( $this->controller, $input_font );
+ $this->assertEquals( $expected_font, $result, "Font family '$input_font' should resolve to '$expected_font'" );
+ }
+
+ /**
+ * Test quoted font family resolution through full sync path.
+ *
+ * @testdox Should resolve quoted font family through full typography sync path.
+ */
+ public function test_sync_site_styles_with_quoted_font_family(): void {
+ $mock_theme_data = array(
+ 'version' => 3,
+ 'settings' => array(),
+ 'styles' => array(
+ 'typography' => array(
+ 'fontFamily' => '"Inter", sans-serif',
+ 'fontSize' => '16px',
+ ),
+ ),
+ );
+
+ $mock_theme = new WP_Theme_JSON( $mock_theme_data );
+
+ $reflection = new \ReflectionClass( $this->controller );
+ $site_theme_property = $reflection->getProperty( 'site_theme' );
+ $site_theme_property->setAccessible( true );
+ $site_theme_property->setValue( $this->controller, $mock_theme );
+
+ $synced_data = $this->controller->sync_site_styles();
+
+ $this->assertArrayHasKey( 'typography', $synced_data['styles'] );
+ $this->assertEquals(
+ "Inter, 'Helvetica Neue', Arial, sans-serif",
+ $synced_data['styles']['typography']['fontFamily'],
+ 'Quoted "Inter" font family should resolve to the Inter email-safe font, not Arial'
+ );
+ }
+
+ /**
+ * Test quoted font family resolution in element heading styles.
+ *
+ * @testdox Should resolve quoted font family in element heading styles.
+ */
+ public function test_element_styles_with_quoted_font_family(): void {
+ $mock_theme_data = array(
+ 'version' => 3,
+ 'settings' => array(),
+ 'styles' => array(
+ 'elements' => array(
+ 'heading' => array(
+ 'typography' => array(
+ 'fontFamily' => '"Inter", sans-serif',
+ 'fontSize' => '24px',
+ ),
+ ),
+ ),
+ ),
+ );
+
+ $mock_theme = new WP_Theme_JSON( $mock_theme_data );
+
+ $reflection = new \ReflectionClass( $this->controller );
+ $site_theme_property = $reflection->getProperty( 'site_theme' );
+ $site_theme_property->setAccessible( true );
+ $site_theme_property->setValue( $this->controller, $mock_theme );
+
+ $synced_data = $this->controller->sync_site_styles();
+
+ $this->assertArrayHasKey( 'elements', $synced_data['styles'] );
+ $this->assertEquals(
+ "Inter, 'Helvetica Neue', Arial, sans-serif",
+ $synced_data['styles']['elements']['heading']['typography']['fontFamily'],
+ 'Quoted "Inter" in heading element should resolve to the Inter email-safe font'
+ );
+ }
+
/**
* Test already-valid px values don't use fallback.
*/