diff --git a/components/style/properties/shorthand/font.mako.rs b/components/style/properties/shorthand/font.mako.rs
index 18e2b97d387..acb7199d486 100644
--- a/components/style/properties/shorthand/font.mako.rs
+++ b/components/style/properties/shorthand/font.mako.rs
@@ -122,8 +122,67 @@
             SomeSystem,
             None
         }
+    % endif
+    enum SerializeFor {
+        Normal,
+    % if product == "gecko":
+        Canvas,
+    % endif
+    }
 
-        impl<'a> LonghandsToSerialize<'a> {
+    impl<'a> LonghandsToSerialize<'a> {
+        fn to_css_for<W>(&self,
+                         serialize_for: SerializeFor,
+                         dest: &mut W) -> fmt::Result where W: fmt::Write {
+            % if product == "gecko":
+                match self.check_system() {
+                    CheckSystemResult::AllSystem(sys) => return sys.to_css(dest),
+                    CheckSystemResult::SomeSystem => return Ok(()),
+                    CheckSystemResult::None => ()
+                }
+            % endif
+
+            % if product == "gecko" or data.testing:
+                % for name in gecko_sub_properties:
+                    if self.font_${name} != &font_${name}::get_initial_specified_value() {
+                        return Ok(());
+                    }
+                % endfor
+            % endif
+
+            // In case of serialization for canvas font, we need to drop
+            // initial values of properties other than size and family.
+            % for name in "style variant_caps weight stretch".split():
+                let needs_this_property = match serialize_for {
+                    SerializeFor::Normal => true,
+                % if product == "gecko":
+                    SerializeFor::Canvas =>
+                        self.font_${name} != &font_${name}::get_initial_specified_value(),
+                % endif
+                };
+                if needs_this_property {
+                    self.font_${name}.to_css(dest)?;
+                    dest.write_str(" ")?;
+                }
+            % endfor
+
+            self.font_size.to_css(dest)?;
+
+            match *self.line_height {
+                line_height::SpecifiedValue::Normal => {},
+                _ => {
+                    dest.write_str("/")?;
+                    self.line_height.to_css(dest)?;
+                }
+            }
+
+            dest.write_str(" ")?;
+            self.font_family.to_css(dest)?;
+
+            Ok(())
+        }
+
+        % if product == "gecko":
             /// Check if some or all members are system fonts
             fn check_system(&self) -> CheckSystemResult {
                 let mut sys = None;
@@ -148,47 +207,18 @@
                     CheckSystemResult::None
                 }
             }
-        }
-    % endif
+
+            /// Serialize the shorthand value for canvas font attribute.
+            pub fn to_css_for_canvas<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
+                self.to_css_for(SerializeFor::Canvas, dest)
+            }
+        % endif
+    }
 
     // This may be a bit off, unsure, possibly needs changes
     impl<'a> ToCss for LonghandsToSerialize<'a>  {
         fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
-            % if product == "gecko":
-                match self.check_system() {
-                    CheckSystemResult::AllSystem(sys) => return sys.to_css(dest),
-                    CheckSystemResult::SomeSystem => return Ok(()),
-                    CheckSystemResult::None => ()
-                }
-            % endif
-
-    % if product == "gecko" or data.testing:
-        % for name in gecko_sub_properties:
-            if self.font_${name} != &font_${name}::get_initial_specified_value() {
-                return Ok(());
-            }
-        % endfor
-    % endif
-
-    % for name in "style variant_caps weight stretch".split():
-            self.font_${name}.to_css(dest)?;
-            dest.write_str(" ")?;
-    % endfor
-
-            self.font_size.to_css(dest)?;
-
-            match *self.line_height {
-                line_height::SpecifiedValue::Normal => {},
-                _ => {
-                    dest.write_str("/")?;
-                    self.line_height.to_css(dest)?;
-                }
-            }
-
-            dest.write_str(" ")?;
-            self.font_family.to_css(dest)?;
-
-            Ok(())
+            self.to_css_for(SerializeFor::Normal, dest)
         }
     }
 </%helpers:shorthand>
diff --git a/ports/geckolib/glue.rs b/ports/geckolib/glue.rs
index bc4db3e7204..c3617682dc7 100644
--- a/ports/geckolib/glue.rs
+++ b/ports/geckolib/glue.rs
@@ -1434,6 +1434,29 @@ pub extern "C" fn Servo_DeclarationBlock_SerializeOneValue(
     })
 }
 
+#[no_mangle]
+pub extern "C" fn Servo_SerializeFontValueForCanvas(
+    declarations: RawServoDeclarationBlockBorrowed,
+    buffer: *mut nsAString) {
+    use style::properties::shorthands::font;
+
+    read_locked_arc(declarations, |decls: &PropertyDeclarationBlock| {
+        let longhands = match font::LonghandsToSerialize::from_iter(decls.declarations_iter()) {
+            Ok(l) => l,
+            Err(()) => {
+                warn!("Unexpected property!");
+                return;
+            }
+        };
+
+        let mut string = String::new();
+        let rv = longhands.to_css_for_canvas(&mut string);
+        debug_assert!(rv.is_ok());
+
+        write!(unsafe { &mut *buffer }, "{}", string).expect("Failed to copy string");
+    })
+}
+
 #[no_mangle]
 pub extern "C" fn Servo_DeclarationBlock_Count(declarations: RawServoDeclarationBlockBorrowed) -> u32 {
     read_locked_arc(declarations, |decls: &PropertyDeclarationBlock| {