diff --git a/Tests/LibWeb/Text/expected/canvas/invalid-font-property.txt b/Tests/LibWeb/Text/expected/canvas/invalid-font-property.txt
new file mode 100644
index 00000000000..9db99cf0bf0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/canvas/invalid-font-property.txt
@@ -0,0 +1,4 @@
+normal normal 20px SerenitySans
+normal normal 20px SerenitySans
+normal normal 20px SerenitySans
+normal normal 20px SerenitySans
diff --git a/Tests/LibWeb/Text/input/canvas/invalid-font-property.html b/Tests/LibWeb/Text/input/canvas/invalid-font-property.html
new file mode 100644
index 00000000000..ee94df86c46
--- /dev/null
+++ b/Tests/LibWeb/Text/input/canvas/invalid-font-property.html
@@ -0,0 +1,15 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let canvas = document.createElement("canvas");
+        let context = canvas.getContext("2d");
+        context.font = '20px SerenitySans';
+        println(context.font);
+        context.font = 'inherit'; // CSS-wide keywords are not allowed
+        println(context.font);
+        context.font = 'var(--font-size, 30px) Arial'; // Variables are not allowed here
+        println(context.font);
+        context.font = '!!!'; // Invalid value, should be ignored.
+        println(context.font);
+    });
+</script>
diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
index 6e945a82c9f..7e449848efd 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasTextDrawingStyles.h
@@ -41,11 +41,14 @@ public:
         // The font IDL attribute, on setting, must be parsed as a CSS <'font'> value (but without supporting property-independent style sheet syntax like 'inherit'),
         // and the resulting font must be assigned to the context, with the 'line-height' component forced to 'normal', with the 'font-size' component converted to CSS pixels,
         // and with system fonts being computed to explicit values.
+        // FIXME: with the 'line-height' component forced to 'normal'
+        // FIXME: with the 'font-size' component converted to CSS pixels
         auto parsing_context = CSS::Parser::ParsingContext { reinterpret_cast<IncludingClass&>(*this).realm() };
         auto font_style_value_result = parse_css_value(parsing_context, font, CSS::PropertyID::Font);
 
         // If the new value is syntactically incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'), then it must be ignored, without assigning a new font value.
-        if (!font_style_value_result) {
+        // NOTE: ShorthandStyleValue should be the only valid option here. We implicitly VERIFY this below.
+        if (!font_style_value_result || !font_style_value_result->is_shorthand()) {
             return;
         }
         my_drawing_state().font_style_value = font_style_value_result.release_nonnull();