diff --git a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
index baa4b5e506d773d5a4e2a89402faabeebdedeb75..a6328706aa7ac20c1dfaa13d4d5038738afb8fe1 100644
--- a/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
+++ b/lib/web_ui/lib/src/engine/text_editing/text_editing.dart
@@ -1363,7 +1363,8 @@ class TextEditingChannel {
         throw StateError(
             'Unsupported method call on the flutter/textinput channel: ${call.method}');
     }
-    EnginePlatformDispatcher.instance._replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
+    EnginePlatformDispatcher.instance
+        ._replyToPlatformMessage(callback, codec.encodeSuccessEnvelope(true));
   }
 
   /// Used for submitting the forms attached on the DOM.
@@ -1664,7 +1665,8 @@ class EditableTextStyle {
 
   String? get align => textAlignToCssValue(textAlign, textDirection);
 
-  String get cssFont => '${fontWeight} ${fontSize}px ${fontFamily}';
+  String get cssFont =>
+      '${fontWeight} ${fontSize}px ${canonicalizeFontFamily(fontFamily)}';
 
   void applyToDomElement(html.HtmlElement domElement) {
     domElement.style
diff --git a/lib/web_ui/test/text_editing_test.dart b/lib/web_ui/test/text_editing_test.dart
index c8efd8182414d5b364ac1c81daeafcd90ff8ad20..6bd51debeba0be10344e086e2d9cc71a91340937 100644
--- a/lib/web_ui/test/text_editing_test.dart
+++ b/lib/web_ui/test/text_editing_test.dart
@@ -1405,6 +1405,28 @@ void testMain() {
         // TODO(nurhan): https://github.com/flutter/flutter/issues/50590
         skip: browserEngine == BrowserEngine.webkit);
 
+    test('Canonicalizes font family', () {
+      showKeyboard();
+
+      final HtmlElement input = textEditing.editingElement.domElement;
+
+      MethodCall setStyle;
+
+      setStyle = configureSetStyleMethodCall(12, 'sans-serif', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('sans-serif'));
+
+      setStyle = configureSetStyleMethodCall(12, '.SF Pro Text', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('.SF Pro Text'));
+
+      setStyle = configureSetStyleMethodCall(12, 'foo bar baz', 4, 4, 1);
+      sendFrameworkMessage(codec.encodeMethodCall(setStyle));
+      expect(input.style.fontFamily, canonicalizeFontFamily('foo bar baz'));
+
+      hideKeyboard();
+    });
+
     test(
         'negative base offset and selection extent values in editing state is handled',
         () {