diff --git a/components/style/properties/shorthand/font.mako.rs b/components/style/properties/shorthand/font.mako.rs
index cc3cd819cf2..5e14fd6ab50 100644
--- a/components/style/properties/shorthand/font.mako.rs
+++ b/components/style/properties/shorthand/font.mako.rs
@@ -27,6 +27,7 @@
     use properties::longhands::system_font::SystemFont;
     use values::specified::text::LineHeight;
     use values::specified::FontSize;
+    use values::specified::font::{FontStretch, FontStretchKeyword};
 
     <%
         gecko_sub_properties = "kerning language_override size_adjust \
@@ -94,8 +95,8 @@
                 }
             }
             if stretch.is_none() {
-                if let Ok(value) = input.try(|input| font_stretch::parse(context, input)) {
-                    stretch = Some(value);
+                if let Ok(value) = input.try(FontStretchKeyword::parse) {
+                    stretch = Some(FontStretch::Keyword(value));
                     continue
                 }
             }
@@ -180,15 +181,31 @@
             % 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():
+            // Only font-stretch keywords are allowed as part as the font
+            // shorthand.
+            let font_stretch = match *self.font_stretch {
+                FontStretch::Keyword(kw) => kw,
+                FontStretch::Stretch(percentage) => {
+                    match FontStretchKeyword::from_percentage(percentage.get()) {
+                        Some(kw) => kw,
+                        None => return Ok(()),
+                    }
+                }
+                FontStretch::System(..) => return Ok(()),
+            };
+
+            % for name in "style variant_caps weight".split():
                 if self.font_${name} != &font_${name}::get_initial_specified_value() {
                     self.font_${name}.to_css(dest)?;
                     dest.write_str(" ")?;
                 }
             % endfor
 
+            if font_stretch != FontStretchKeyword::Normal {
+                font_stretch.to_css(dest)?;
+                dest.write_str(" ")?;
+            }
+
             self.font_size.to_css(dest)?;
 
             if *self.line_height != LineHeight::normal() {
diff --git a/components/style/values/specified/font.rs b/components/style/values/specified/font.rs
index c6a2c31a15d..b83727f16f0 100644
--- a/components/style/values/specified/font.rs
+++ b/components/style/values/specified/font.rs
@@ -418,6 +418,41 @@ impl FontStretchKeyword {
             UltraExpanded => 2.,
         })
     }
+
+    /// Does the opposite operation to `compute`, in order to serialize keywords
+    /// if possible.
+    pub fn from_percentage(percentage: f32) -> Option<Self> {
+        use self::FontStretchKeyword::*;
+        // NOTE(emilio): Can't use `match` because of rust-lang/rust#41620.
+        if percentage == 0.5 {
+            return Some(UltraCondensed);
+        }
+        if percentage == 0.625 {
+            return Some(ExtraCondensed);
+        }
+        if percentage == 0.75 {
+            return Some(Condensed);
+        }
+        if percentage == 0.875 {
+            return Some(SemiCondensed);
+        }
+        if percentage == 1. {
+            return Some(Normal);
+        }
+        if percentage == 1.125 {
+            return Some(SemiExpanded);
+        }
+        if percentage == 1.25 {
+            return Some(Expanded);
+        }
+        if percentage == 1.5 {
+            return Some(ExtraExpanded);
+        }
+        if percentage == 2. {
+            return Some(UltraExpanded);
+        }
+        None
+    }
 }
 
 impl FontStretch {