diff --git a/components/style/font_face.rs b/components/style/font_face.rs
index a29967d8d55..de6e23f25c3 100644
--- a/components/style/font_face.rs
+++ b/components/style/font_face.rs
@@ -9,7 +9,7 @@
 #![deny(missing_docs)]
 
 #[cfg(feature = "gecko")]
-use computed_values::{font_stretch, font_style};
+use computed_values::font_style;
 use cssparser::{AtRuleParser, DeclarationListParser, DeclarationParser, Parser};
 use cssparser::{CowRcStr, SourceLocation};
 #[cfg(feature = "gecko")]
@@ -28,7 +28,7 @@ use style_traits::values::SequenceWriter;
 use values::computed::font::FamilyName;
 #[cfg(feature = "gecko")]
 use values::specified::font::{SpecifiedFontFeatureSettings, SpecifiedFontVariationSettings};
-use values::specified::font::AbsoluteFontWeight;
+use values::specified::font::{AbsoluteFontWeight, FontStretch as SpecifiedFontStretch};
 use values::specified::url::SpecifiedUrl;
 
 /// A source for a font-face rule.
@@ -111,6 +111,24 @@ impl Parse for FontWeight {
     }
 }
 
+/// The font-stretch descriptor:
+///
+/// https://drafts.csswg.org/css-fonts-4/#descdef-font-face-font-stretch
+#[derive(Clone, Debug, PartialEq, ToCss)]
+pub struct FontStretch(pub SpecifiedFontStretch, pub Option<SpecifiedFontStretch>);
+
+impl Parse for FontStretch {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        let first = SpecifiedFontStretch::parse(context, input)?;
+        let second =
+            input.try(|input| SpecifiedFontStretch::parse(context, input)).ok();
+        Ok(FontStretch(first, second))
+    }
+}
+
 /// Parse the block inside a `@font-face` rule.
 ///
 /// Note that the prelude parsing code lives in the `stylesheets` module.
@@ -387,16 +405,16 @@ font_face_descriptors! {
         "src" sources / mSrc: Vec<Source>,
     ]
     optional descriptors = [
-        /// The style of this font face
+        /// The style of this font face.
         "font-style" style / mStyle: font_style::T,
 
-        /// The weight of this font face
+        /// The weight of this font face.
         "font-weight" weight / mWeight: FontWeight,
 
-        /// The stretch of this font face
-        "font-stretch" stretch / mStretch: font_stretch::T,
+        /// The stretch of this font face.
+        "font-stretch" stretch / mStretch: FontStretch,
 
-        /// The display of this font face
+        /// The display of this font face.
         "font-display" display / mDisplay: FontDisplay,
 
         /// The ranges of code points outside of which this font face should not be used.
diff --git a/components/style/gecko/rules.rs b/components/style/gecko/rules.rs
index e5e4cc22d93..91a6d806be7 100644
--- a/components/style/gecko/rules.rs
+++ b/components/style/gecko/rules.rs
@@ -5,10 +5,10 @@
 //! Bindings for CSS Rule objects
 
 use byteorder::{BigEndian, WriteBytesExt};
-use computed_values::{font_stretch, font_style};
+use computed_values::font_style::T as ComputedFontStyle;
 use counter_style::{self, CounterBound};
 use cssparser::UnicodeRange;
-use font_face::{FontDisplay, FontWeight, Source};
+use font_face::{FontDisplay, FontWeight, FontStretch, Source};
 use gecko_bindings::structs::{self, nsCSSValue};
 use gecko_bindings::sugar::ns_css_value::ToNsCssValue;
 use properties::longhands::font_language_override;
@@ -16,7 +16,7 @@ use std::str;
 use values::computed::font::FamilyName;
 use values::generics::font::FontTag;
 use values::specified::font::{SpecifiedFontFeatureSettings, SpecifiedFontVariationSettings};
-use values::specified::font::AbsoluteFontWeight;
+use values::specified::font::{AbsoluteFontWeight, FontStretch as SpecifiedFontStretch};
 
 impl<'a> ToNsCssValue for &'a FamilyName {
     fn convert(self, nscssvalue: &mut nsCSSValue) {
@@ -24,6 +24,24 @@ impl<'a> ToNsCssValue for &'a FamilyName {
     }
 }
 
+impl<'a> ToNsCssValue for &'a SpecifiedFontStretch {
+    fn convert(self, nscssvalue: &mut nsCSSValue) {
+        use values::specified::font::FontStretchKeyword;
+        match *self {
+            SpecifiedFontStretch::Stretch(ref p) => nscssvalue.set_number(p.get()),
+            SpecifiedFontStretch::Keyword(ref kw) => {
+                // TODO(emilio): Use this branch instead.
+                if false {
+                    nscssvalue.set_number(kw.compute().0)
+                } else {
+                    nscssvalue.set_enum(FontStretchKeyword::gecko_keyword(kw.compute().0) as i32)
+                }
+            }
+            SpecifiedFontStretch::System(..) => unreachable!(),
+        }
+    }
+}
+
 impl<'a> ToNsCssValue for &'a AbsoluteFontWeight {
     fn convert(self, nscssvalue: &mut nsCSSValue) {
         nscssvalue.set_font_weight(self.compute().0)
@@ -68,28 +86,34 @@ impl<'a> ToNsCssValue for &'a SpecifiedFontVariationSettings {
     }
 }
 
-impl<'a> ToNsCssValue for &'a FontWeight {
-    fn convert(self, nscssvalue: &mut nsCSSValue) {
-        let FontWeight(ref first, ref second) = *self;
+macro_rules! descriptor_range_conversion {
+    ($name:ident) => {
+        impl<'a> ToNsCssValue for &'a $name {
+            fn convert(self, nscssvalue: &mut nsCSSValue) {
+                let $name(ref first, ref second) = *self;
+                let second = match *second {
+                    None => {
+                        nscssvalue.set_from(first);
+                        return;
+                    }
+                    Some(ref second) => second,
+                };
 
-        let second = match *second {
-            None => {
-                nscssvalue.set_from(first);
-                return;
+                let mut a = nsCSSValue::null();
+                let mut b = nsCSSValue::null();
+
+                a.set_from(first);
+                b.set_from(second);
+
+                nscssvalue.set_pair(&a, &b);
             }
-            Some(ref second) => second,
-        };
-
-        let mut a = nsCSSValue::null();
-        let mut b = nsCSSValue::null();
-
-        a.set_from(first);
-        b.set_from(second);
-
-        nscssvalue.set_pair(&a, &b);
+        }
     }
 }
 
+descriptor_range_conversion!(FontWeight);
+descriptor_range_conversion!(FontStretch);
+
 impl<'a> ToNsCssValue for &'a font_language_override::SpecifiedValue {
     fn convert(self, nscssvalue: &mut nsCSSValue) {
         match *self {
@@ -106,16 +130,16 @@ impl<'a> ToNsCssValue for &'a font_language_override::SpecifiedValue {
 macro_rules! map_enum {
     (
         $(
-            $prop:ident {
+            $ty:ident {
                 $($servo:ident => $gecko:ident,)+
             }
         )+
     ) => {
         $(
-            impl<'a> ToNsCssValue for &'a $prop::T {
+            impl<'a> ToNsCssValue for &'a $ty {
                 fn convert(self, nscssvalue: &mut nsCSSValue) {
                     nscssvalue.set_enum(match *self {
-                        $( $prop::T::$servo => structs::$gecko as i32, )+
+                        $( $ty::$servo => structs::$gecko as i32, )+
                     })
                 }
             }
@@ -124,23 +148,11 @@ macro_rules! map_enum {
 }
 
 map_enum! {
-    font_style {
+    ComputedFontStyle {
         Normal => NS_FONT_STYLE_NORMAL,
         Italic => NS_FONT_STYLE_ITALIC,
         Oblique => NS_FONT_STYLE_OBLIQUE,
     }
-
-    font_stretch {
-        Normal          => NS_FONT_STRETCH_NORMAL,
-        UltraCondensed  => NS_FONT_STRETCH_ULTRA_CONDENSED,
-        ExtraCondensed  => NS_FONT_STRETCH_EXTRA_CONDENSED,
-        Condensed       => NS_FONT_STRETCH_CONDENSED,
-        SemiCondensed   => NS_FONT_STRETCH_SEMI_CONDENSED,
-        SemiExpanded    => NS_FONT_STRETCH_SEMI_EXPANDED,
-        Expanded        => NS_FONT_STRETCH_EXPANDED,
-        ExtraExpanded   => NS_FONT_STRETCH_EXTRA_EXPANDED,
-        UltraExpanded   => NS_FONT_STRETCH_ULTRA_EXPANDED,
-    }
 }
 
 impl<'a> ToNsCssValue for &'a Vec<Source> {
diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index b6a473477a6..cceea84a705 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -2601,7 +2601,7 @@ fn static_assert() {
     }
 
     pub fn set_font_weight(&mut self, v: longhands::font_weight::computed_value::T) {
-        unsafe { Gecko_FontWeight_SetFloat(&mut self.gecko.mFont.weight, v.0 as f32) };
+        unsafe { Gecko_FontWeight_SetFloat(&mut self.gecko.mFont.weight, v.0) };
     }
     ${impl_simple_copy('font_weight', 'mFont.weight')}
 
@@ -2610,6 +2610,21 @@ fn static_assert() {
         longhands::font_weight::computed_value::T(weight)
     }
 
+    pub fn set_font_stretch(&mut self, v: longhands::font_stretch::computed_value::T) {
+        unsafe { bindings::Gecko_FontStretch_SetFloat(&mut self.gecko.mFont.stretch, (v.0).0) };
+    }
+    ${impl_simple_copy('font_stretch', 'mFont.stretch')}
+
+    pub fn clone_font_stretch(&self) -> longhands::font_stretch::computed_value::T {
+        use values::computed::Percentage;
+        use values::generics::NonNegative;
+
+        let stretch = self.gecko.mFont.stretch as f32 / 100.;
+        debug_assert!(stretch >= 0.);
+
+        NonNegative(Percentage(stretch))
+    }
+
     ${impl_simple_type_with_conversion("font_synthesis", "mFont.synthesis")}
 
     pub fn set_font_size_adjust(&mut self, v: longhands::font_size_adjust::computed_value::T) {
diff --git a/components/style/properties/helpers/animated_properties.mako.rs b/components/style/properties/helpers/animated_properties.mako.rs
index fa87f1b43fb..e2d15139128 100644
--- a/components/style/properties/helpers/animated_properties.mako.rs
+++ b/components/style/properties/helpers/animated_properties.mako.rs
@@ -19,7 +19,6 @@ use num_traits::Zero;
 use properties::{CSSWideKeyword, PropertyDeclaration};
 use properties::longhands;
 use properties::longhands::font_weight::computed_value::T as FontWeight;
-use properties::longhands::font_stretch::computed_value::T as FontStretch;
 use properties::longhands::visibility::computed_value::T as Visibility;
 use properties::PropertyId;
 use properties::{LonghandId, ShorthandId};
@@ -880,61 +879,6 @@ impl ToAnimatedZero for FontWeight {
     }
 }
 
-/// <https://drafts.csswg.org/css-fonts/#font-stretch-prop>
-impl Animate for FontStretch {
-    #[inline]
-    fn animate(&self, other: &Self, procedure: Procedure) -> Result<Self, ()> {
-        let from = f64::from(*self);
-        let to = f64::from(*other);
-        let normal = f64::from(FontStretch::Normal);
-        let (this_weight, other_weight) = procedure.weights();
-        let result = (from - normal) * this_weight + (to - normal) * other_weight + normal;
-        Ok(result.into())
-    }
-}
-
-impl ComputeSquaredDistance for FontStretch {
-    #[inline]
-    fn compute_squared_distance(&self, other: &Self) -> Result<SquaredDistance, ()> {
-        f64::from(*self).compute_squared_distance(&(*other).into())
-    }
-}
-
-impl ToAnimatedZero for FontStretch {
-    #[inline]
-    fn to_animated_zero(&self) -> Result<Self, ()> { Err(()) }
-}
-
-/// We should treat font stretch as real number in order to interpolate this property.
-/// <https://drafts.csswg.org/css-fonts-3/#font-stretch-animation>
-impl From<FontStretch> for f64 {
-    fn from(stretch: FontStretch) -> f64 {
-        use self::FontStretch::*;
-        match stretch {
-            UltraCondensed => 1.0,
-            ExtraCondensed => 2.0,
-            Condensed => 3.0,
-            SemiCondensed => 4.0,
-            Normal => 5.0,
-            SemiExpanded => 6.0,
-            Expanded => 7.0,
-            ExtraExpanded => 8.0,
-            UltraExpanded => 9.0,
-        }
-    }
-}
-
-impl Into<FontStretch> for f64 {
-    fn into(self) -> FontStretch {
-        use properties::longhands::font_stretch::computed_value::T::*;
-        let index = (self + 0.5).floor().min(9.0).max(1.0);
-        static FONT_STRETCH_ENUM_MAP: [FontStretch; 9] =
-            [ UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal,
-              SemiExpanded, Expanded, ExtraExpanded, UltraExpanded ];
-        FONT_STRETCH_ENUM_MAP[(index - 1.0) as usize]
-    }
-}
-
 /// <https://drafts.csswg.org/css-fonts-4/#font-variation-settings-def>
 impl Animate for FontVariationSettings {
     #[inline]
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index dd4c6e84789..a89101550d9 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -81,17 +81,16 @@ ${helpers.predefined_type("font-synthesis",
                           flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
                           spec="https://drafts.csswg.org/css-fonts/#propdef-font-synthesis")}
 
-${helpers.single_keyword_system("font-stretch",
-                                "normal ultra-condensed extra-condensed condensed \
-                                 semi-condensed semi-expanded expanded extra-expanded \
-                                 ultra-expanded",
-                                gecko_ffi_name="mFont.stretch",
-                                gecko_constant_prefix="NS_FONT_STRETCH",
-                                cast_type='i16',
-                                spec="https://drafts.csswg.org/css-fonts/#propdef-font-stretch",
-                                flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
-                                animation_value_type="ComputedValue",
-                                servo_restyle_damage="rebuild_and_reflow")}
+${helpers.predefined_type(
+    "font-stretch",
+    "FontStretch",
+    initial_value="computed::NonNegativePercentage::hundred()",
+    initial_specified_value="specified::FontStretch::normal()",
+    animation_value_type="Percentage",
+    flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
+    spec="https://drafts.csswg.org/css-fonts/#propdef-font-stretch",
+    servo_restyle_damage="rebuild_and_reflow",
+)}
 
 ${helpers.single_keyword_system("font-kerning",
                                 "auto none normal",
@@ -290,11 +289,11 @@ ${helpers.predefined_type("-x-text-zoom",
                               -moz-window -moz-document -moz-workspace -moz-desktop
                               -moz-info -moz-dialog -moz-button -moz-pull-down-menu
                               -moz-list -moz-field""".split()
-            kw_font_props = """font_style font_variant_caps font_stretch
+            kw_font_props = """font_style font_variant_caps
                                font_kerning font_variant_position font_variant_ligatures
                                font_variant_east_asian font_variant_numeric
                                font_optical_sizing""".split()
-            kw_cast = """font_style font_variant_caps font_stretch
+            kw_cast = """font_style font_variant_caps
                          font_kerning font_variant_position
                          font_optical_sizing""".split()
         %>
@@ -330,7 +329,9 @@ ${helpers.predefined_type("-x-text-zoom",
                 use gecko_bindings::bindings;
                 use gecko_bindings::structs::{LookAndFeel_FontID, nsFont};
                 use std::mem;
+                use values::computed::Percentage;
                 use values::computed::font::{FontSize, FontFamilyList};
+                use values::generics::NonNegative;
 
                 let id = match *self {
                     % for font in system_fonts:
@@ -349,7 +350,8 @@ ${helpers.predefined_type("-x-text-zoom",
                         cx.device().pres_context()
                     )
                 }
-                let weight = longhands::font_weight::computed_value::T::from_gecko_weight(system.weight);
+                let font_weight = longhands::font_weight::computed_value::T::from_gecko_weight(system.weight);
+                let font_stretch = NonNegative(Percentage(system.stretch as f32));
                 let ret = ComputedSystemFont {
                     font_family: longhands::font_family::computed_value::T(
                         FontFamilyList(
@@ -360,7 +362,8 @@ ${helpers.predefined_type("-x-text-zoom",
                             size: Au(system.size).into(),
                             keyword_info: None
                     },
-                    font_weight: weight,
+                    font_weight,
+                    font_stretch,
                     font_size_adjust: longhands::font_size_adjust::computed_value
                                                ::T::from_gecko_adjust(system.sizeAdjust),
                     % for kwprop in kw_font_props:
diff --git a/components/style/values/computed/font.rs b/components/style/values/computed/font.rs
index 55d99de8932..4a7b02be450 100644
--- a/components/style/values/computed/font.rs
+++ b/components/style/values/computed/font.rs
@@ -29,6 +29,7 @@ use values::specified::length::{FontBaseSize, NoCalcLength};
 
 pub use values::computed::Length as MozScriptMinSize;
 pub use values::specified::font::{FontSynthesis, MozScriptSizeMultiplier, XLang, XTextZoom};
+pub use values::computed::NonNegativePercentage as FontStretch;
 
 /// A value for the font-weight property per:
 ///
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 67529efb06f..296eb5d9c25 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -39,7 +39,7 @@ pub use self::angle::Angle;
 pub use self::background::{BackgroundRepeat, BackgroundSize};
 pub use self::border::{BorderImageRepeat, BorderImageSideWidth, BorderImageSlice, BorderImageWidth};
 pub use self::border::{BorderCornerRadius, BorderRadius, BorderSpacing};
-pub use self::font::{FontSize, FontSizeAdjust, FontSynthesis, FontVariantAlternates, FontWeight};
+pub use self::font::{FontSize, FontSizeAdjust, FontStretch, FontSynthesis, FontVariantAlternates, FontWeight};
 pub use self::font::{FontFamily, FontLanguageOverride, FontVariantEastAsian, FontVariationSettings};
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
@@ -66,7 +66,7 @@ pub use self::list::Quotes;
 #[cfg(feature = "gecko")]
 pub use self::list::ListStyleType;
 pub use self::outline::OutlineStyle;
-pub use self::percentage::Percentage;
+pub use self::percentage::{Percentage, NonNegativePercentage};
 pub use self::pointing::{CaretColor, Cursor};
 #[cfg(feature = "gecko")]
 pub use self::pointing::CursorImage;
diff --git a/components/style/values/computed/percentage.rs b/components/style/values/computed/percentage.rs
index ee881a22019..9f214e9651d 100644
--- a/components/style/values/computed/percentage.rs
+++ b/components/style/values/computed/percentage.rs
@@ -6,7 +6,9 @@
 
 use std::fmt;
 use style_traits::{CssWriter, ToCss};
+use values::animated::ToAnimatedValue;
 use values::{serialize_percentage, CSSFloat};
+use values::generics::NonNegative;
 
 /// A computed percentage.
 #[cfg_attr(feature = "servo", derive(Deserialize, Serialize))]
@@ -48,3 +50,34 @@ impl ToCss for Percentage {
         serialize_percentage(self.0, dest)
     }
 }
+
+/// A wrapper over a `Percentage`, whose value should be clamped to 0.
+pub type NonNegativePercentage = NonNegative<Percentage>;
+
+impl NonNegativePercentage {
+    /// 0%
+    #[inline]
+    pub fn zero() -> Self {
+        NonNegative(Percentage::zero())
+    }
+
+    /// 100%
+    #[inline]
+    pub fn hundred() -> Self {
+        NonNegative(Percentage::hundred())
+    }
+}
+
+impl ToAnimatedValue for NonNegativePercentage {
+    type AnimatedValue = Percentage;
+
+    #[inline]
+    fn to_animated_value(self) -> Self::AnimatedValue {
+        self.0
+    }
+
+    #[inline]
+    fn from_animated_value(animated: Self::AnimatedValue) -> Self {
+        NonNegative(animated.clamp_to_non_negative())
+    }
+}
diff --git a/components/style/values/specified/font.rs b/components/style/values/specified/font.rs
index 3b39f9224b2..539370fab11 100644
--- a/components/style/values/specified/font.rs
+++ b/components/style/values/specified/font.rs
@@ -17,11 +17,13 @@ use properties::longhands::system_font::SystemFont;
 use std::fmt::{self, Write};
 use style_traits::{CssWriter, ParseError, StyleParseErrorKind, ToCss};
 use values::CustomIdent;
+use values::computed::Percentage as ComputedPercentage;
 use values::computed::{font as computed, Context, Length, NonNegativeLength, ToComputedValue};
 use values::computed::font::{FamilyName, FontFamilyList, SingleFontFamily};
+use values::generics::NonNegative;
 use values::generics::font::{FeatureTagValue, FontSettings, FontTag};
 use values::generics::font::{KeywordInfo as GenericKeywordInfo, KeywordSize, VariationValue};
-use values::specified::{AllowQuirks, Integer, LengthOrPercentage, NoCalcLength, Number};
+use values::specified::{AllowQuirks, Integer, LengthOrPercentage, NoCalcLength, Number, Percentage};
 use values::specified::length::{FontBaseSize, AU_PER_PT, AU_PER_PX};
 
 const DEFAULT_SCRIPT_MIN_SIZE_PT: u32 = 8;
@@ -189,6 +191,120 @@ impl Parse for AbsoluteFontWeight {
     }
 }
 
+/// A value for the `font-stretch` property.
+///
+/// https://drafts.csswg.org/css-fonts-4/#font-stretch-prop
+#[allow(missing_docs)]
+#[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToCss)]
+pub enum FontStretch {
+    Stretch(Percentage),
+    Keyword(FontStretchKeyword),
+    System(SystemFont),
+}
+
+/// A keyword value for `font-stretch`.
+#[derive(Clone, Copy, Debug, MallocSizeOf, Parse, PartialEq, ToCss)]
+#[allow(missing_docs)]
+pub enum FontStretchKeyword {
+    Normal,
+    Condensed,
+    UltraCondensed,
+    ExtraCondensed,
+    SemiCondensed,
+    SemiExpanded,
+    Expanded,
+    ExtraExpanded,
+    UltraExpanded,
+}
+
+impl FontStretchKeyword {
+    /// Resolves the value of the keyword as specified in:
+    ///
+    /// https://drafts.csswg.org/css-fonts-4/#font-stretch-prop
+    pub fn compute(&self) -> ComputedPercentage {
+        use self::FontStretchKeyword::*;
+        ComputedPercentage(match *self {
+            UltraCondensed => 0.5,
+            ExtraCondensed => 0.625,
+            Condensed => 0.75,
+            SemiCondensed => 0.875,
+            Normal => 1.,
+            SemiExpanded => 1.125,
+            Expanded => 1.25,
+            ExtraExpanded => 1.5,
+            UltraExpanded => 2.,
+        })
+    }
+}
+
+impl FontStretch {
+    /// `normal`.
+    pub fn normal() -> Self {
+        FontStretch::Keyword(FontStretchKeyword::Normal)
+    }
+
+    /// Get a specified FontStretch from a SystemFont.
+    ///
+    /// FIXME(emilio): All this system font stuff is copy-pasta. :(
+    pub fn system_font(f: SystemFont) -> Self {
+        FontStretch::System(f)
+    }
+
+    /// Retreive a SystemFont from FontStretch.
+    pub fn get_system(&self) -> Option<SystemFont> {
+        if let FontStretch::System(s) = *self {
+            Some(s)
+        } else {
+            None
+        }
+    }
+}
+
+impl Parse for FontStretch {
+    fn parse<'i, 't>(
+        context: &ParserContext,
+        input: &mut Parser<'i, 't>,
+    ) -> Result<Self, ParseError<'i>> {
+        // From https://drafts.csswg.org/css-fonts-4/#font-stretch-prop:
+        //
+        //    Values less than 0% are not allowed and are treated as parse
+        //    errors.
+        if let Ok(percentage) = input.try(|input| Percentage::parse_non_negative(context, input)) {
+            return Ok(FontStretch::Stretch(percentage));
+        }
+
+        Ok(FontStretch::Keyword(FontStretchKeyword::parse(input)?))
+    }
+}
+
+impl ToComputedValue for FontStretch {
+    type ComputedValue = NonNegative<ComputedPercentage>;
+
+    fn to_computed_value(&self, context: &Context) -> Self::ComputedValue {
+        match *self {
+            FontStretch::Stretch(ref percentage) => {
+                NonNegative(percentage.to_computed_value(context))
+            },
+            FontStretch::Keyword(ref kw) => {
+                NonNegative(kw.compute())
+            },
+            #[cfg(feature = "gecko")]
+            FontStretch::System(_) => context
+                .cached_system_font
+                .as_ref()
+                .unwrap()
+                .font_stretch
+                .clone(),
+            #[cfg(not(feature = "gecko"))]
+            FontStretch::System(_) => unreachable!(),
+        }
+    }
+
+    fn from_computed_value(computed: &Self::ComputedValue) -> Self {
+        FontStretch::Stretch(Percentage::from_computed_value(&computed.0))
+    }
+}
+
 #[derive(Clone, Debug, MallocSizeOf, PartialEq, ToCss)]
 /// A specified font-size value
 pub enum FontSize {
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 0fa01d23db8..d54dda71253 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -34,7 +34,7 @@ pub use self::border::{BorderCornerRadius, BorderImageSlice, BorderImageWidth};
 pub use self::border::{BorderImageRepeat, BorderImageSideWidth};
 pub use self::border::{BorderRadius, BorderSideWidth, BorderSpacing};
 pub use self::column::ColumnCount;
-pub use self::font::{FontSize, FontSizeAdjust, FontSynthesis, FontVariantAlternates, FontWeight};
+pub use self::font::{FontSize, FontSizeAdjust, FontStretch, FontSynthesis, FontVariantAlternates, FontWeight};
 pub use self::font::{FontFamily, FontLanguageOverride, FontVariantEastAsian, FontVariationSettings};
 pub use self::font::{FontFeatureSettings, FontVariantLigatures, FontVariantNumeric};
 pub use self::font::{MozScriptLevel, MozScriptMinSize, MozScriptSizeMultiplier, XLang, XTextZoom};
diff --git a/ports/geckolib/glue.rs b/ports/geckolib/glue.rs
index 2f979bb5fc9..d3daed6b402 100644
--- a/ports/geckolib/glue.rs
+++ b/ports/geckolib/glue.rs
@@ -5407,7 +5407,7 @@ pub extern "C" fn Servo_ParseFontShorthandForMatching(
     stretch: nsCSSValueBorrowedMut,
     weight: nsCSSValueBorrowedMut
 ) -> bool {
-    use style::properties::longhands::{font_stretch, font_style};
+    use style::properties::longhands::font_style;
     use style::properties::shorthands::font;
     use style::values::specified::font::{FontFamily, FontWeight};
 
@@ -5438,10 +5438,11 @@ pub extern "C" fn Servo_ParseFontShorthandForMatching(
         font_style::SpecifiedValue::Keyword(ref kw) => kw,
         font_style::SpecifiedValue::System(_) => return false,
     });
-    stretch.set_from(match font.font_stretch {
-        font_stretch::SpecifiedValue::Keyword(ref kw) => kw,
-        font_stretch::SpecifiedValue::System(_) => return false,
-    });
+
+    if font.font_stretch.get_system().is_some() {
+        return false;
+    }
+    stretch.set_from(&font.font_stretch);
 
     match font.font_weight {
         FontWeight::Absolute(w) => weight.set_font_weight(w.compute().0),