diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index 1f13ee06f0d..4defee919a8 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -1199,30 +1199,14 @@ variation_spec = """\
 https://drafts.csswg.org/css-fonts-4/#low-level-font-variation-settings-control-the-font-variation-settings-property\
 """
 %>
-<%helpers:longhand name="font-variation-settings" products="gecko"
-                   animation_value_type="ComputedValue"
-                   flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER"
-                   spec="${variation_spec}">
-    use values::generics::FontSettings;
 
-    pub type SpecifiedValue = computed_value::T;
-
-    pub mod computed_value {
-        use values::generics::{FontSettings, FontSettingTagFloat};
-        pub type T = FontSettings<FontSettingTagFloat>;
-    }
-
-    #[inline]
-    pub fn get_initial_value() -> computed_value::T {
-        FontSettings::Normal
-    }
-
-    /// normal | <feature-tag-value>#
-    pub fn parse<'i, 't>(context: &ParserContext, input: &mut Parser<'i, 't>)
-                         -> Result<SpecifiedValue, ParseError<'i>> {
-        computed_value::T::parse(context, input)
-    }
-</%helpers:longhand>
+${helpers.predefined_type("font-variation-settings",
+                          "FontVariantSettings",
+                          products="gecko",
+                          initial_value="specified::FontVariantSettings::normal()",
+                          animation_value_type="ComputedValue",
+                          flags="APPLIES_TO_FIRST_LETTER APPLIES_TO_FIRST_LINE APPLIES_TO_PLACEHOLDER",
+                          spec="${variation_spec}")}
 
 ${helpers.predefined_type("font-language-override",
                           "FontLanguageOverride",
diff --git a/components/style/values/computed/font.rs b/components/style/values/computed/font.rs
index d2b9dd618c8..cc3487f7a12 100644
--- a/components/style/values/computed/font.rs
+++ b/components/style/values/computed/font.rs
@@ -15,7 +15,7 @@ use values::specified::font as specified;
 use values::specified::length::{FontBaseSize, NoCalcLength};
 
 pub use values::computed::Length as MozScriptMinSize;
-pub use values::specified::font::{XTextZoom, FontSynthesis};
+pub use values::specified::font::{XTextZoom, FontSynthesis, FontVariantSettings};
 
 /// As of CSS Fonts Module Level 3, only the following values are
 /// valid: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
diff --git a/components/style/values/computed/mod.rs b/components/style/values/computed/mod.rs
index 862287f1973..ccafa97a1dc 100644
--- a/components/style/values/computed/mod.rs
+++ b/components/style/values/computed/mod.rs
@@ -37,7 +37,7 @@ pub use self::background::{BackgroundSize, BackgroundRepeat};
 pub use self::border::{BorderImageSlice, BorderImageWidth, BorderImageSideWidth};
 pub use self::border::{BorderRadius, BorderCornerRadius, BorderSpacing};
 pub use self::font::{FontSize, FontSizeAdjust, FontSynthesis, FontWeight, FontVariantAlternates};
-pub use self::font::{FontLanguageOverride, MozScriptLevel, MozScriptMinSize, XTextZoom};
+pub use self::font::{FontLanguageOverride, FontVariantSettings, MozScriptLevel, MozScriptMinSize, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, ScrollSnapType, VerticalAlign};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};
diff --git a/components/style/values/specified/font.rs b/components/style/values/specified/font.rs
index a59fad9ec07..a078283565e 100644
--- a/components/style/values/specified/font.rs
+++ b/components/style/values/specified/font.rs
@@ -17,6 +17,7 @@ use std::fmt;
 use style_traits::{ToCss, StyleParseErrorKind, ParseError};
 use values::CustomIdent;
 use values::computed::{font as computed, Context, Length, NonNegativeLength, ToComputedValue};
+use values::generics::{FontSettings, FontSettingTagFloat};
 use values::specified::{AllowQuirks, LengthOrPercentage, NoCalcLength, Number};
 use values::specified::length::{AU_PER_PT, AU_PER_PX, FontBaseSize};
 
@@ -1035,6 +1036,17 @@ impl Parse for FontLanguageOverride {
     }
 }
 
+/// This property provides low-level control over OpenType or TrueType font variations.
+pub type FontVariantSettings = FontSettings<FontSettingTagFloat>;
+
+impl FontVariantSettings {
+    #[inline]
+    /// Default value of `font-variant-settings`
+    pub fn normal() -> FontVariantSettings {
+        FontSettings::Normal
+    }
+}
+
 #[derive(Clone, Debug, MallocSizeOf, PartialEq, ToComputedValue)]
 /// text-zoom. Enable if true, disable if false
 pub struct XTextZoom(pub bool);
diff --git a/components/style/values/specified/mod.rs b/components/style/values/specified/mod.rs
index 013b6b803b4..50138c5db76 100644
--- a/components/style/values/specified/mod.rs
+++ b/components/style/values/specified/mod.rs
@@ -31,7 +31,7 @@ pub use self::background::{BackgroundRepeat, BackgroundSize};
 pub use self::border::{BorderCornerRadius, BorderImageSlice, BorderImageWidth};
 pub use self::border::{BorderImageSideWidth, BorderRadius, BorderSideWidth, BorderSpacing};
 pub use self::font::{FontSize, FontSizeAdjust, FontSynthesis, FontWeight, FontVariantAlternates};
-pub use self::font::{FontLanguageOverride, MozScriptLevel, MozScriptMinSize, XTextZoom};
+pub use self::font::{FontLanguageOverride, FontVariantSettings, MozScriptLevel, MozScriptMinSize, XTextZoom};
 pub use self::box_::{AnimationIterationCount, AnimationName, ScrollSnapType, VerticalAlign};
 pub use self::color::{Color, ColorPropertyValue, RGBAColor};
 pub use self::effects::{BoxShadow, Filter, SimpleShadow};