diff --git a/components/style/properties/helpers.mako.rs b/components/style/properties/helpers.mako.rs
index 3c5bb762e1f..2aa93bbb7d3 100644
--- a/components/style/properties/helpers.mako.rs
+++ b/components/style/properties/helpers.mako.rs
@@ -411,6 +411,7 @@
         #[derive(Clone, Copy, Debug, Eq, PartialEq, SpecifiedValueInfo, ToCss)]
         pub enum SpecifiedValue {
             Keyword(computed_value::T),
+            #[css(skip)]
             System(SystemFont),
         }
 
diff --git a/components/style/properties/longhand/font.mako.rs b/components/style/properties/longhand/font.mako.rs
index 3cd10daf96b..112b4b4de54 100644
--- a/components/style/properties/longhand/font.mako.rs
+++ b/components/style/properties/longhand/font.mako.rs
@@ -274,6 +274,11 @@ ${helpers.predefined_type("-x-text-zoom",
         //! detects that a value has a system font, it will resolve it, and
         //! cache it on the ComputedValues. After this, it can be just fetched
         //! whenever a font longhand on the same element needs the system font.
+        //!
+        //! When a longhand property is holding a SystemFont, it's serialized
+        //! to an empty string as if its value comes from a shorthand with
+        //! variable reference. We may want to improve this behavior at some
+        //! point. See also https://github.com/w3c/csswg-drafts/issues/1586.
 
         use app_units::Au;
         use cssparser::{Parser, ToCss};
diff --git a/components/style/values/specified/font.rs b/components/style/values/specified/font.rs
index 3ecc04fcca2..aa41fecaf15 100644
--- a/components/style/values/specified/font.rs
+++ b/components/style/values/specified/font.rs
@@ -86,6 +86,7 @@ pub enum FontWeight {
     /// Lighter variant
     Lighter,
     /// System font variant.
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -338,6 +339,7 @@ impl SpecifiedFontStyle {
 #[allow(missing_docs)]
 pub enum FontStyle {
     Specified(SpecifiedFontStyle),
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -384,6 +386,7 @@ impl Parse for FontStyle {
 pub enum FontStretch {
     Stretch(Percentage),
     Keyword(FontStretchKeyword),
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -525,6 +528,7 @@ pub enum FontSize {
     /// font-size: larger
     Larger,
     /// Derived from a specified system font.
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -541,6 +545,7 @@ pub enum FontFamily {
     #[css(comma)]
     Values(#[css(iterable)] FontFamilyList),
     /// System font
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -632,6 +637,7 @@ pub enum FontSizeAdjust {
     /// Number variant
     Number(Number),
     /// system font
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -1136,6 +1142,7 @@ pub enum FontVariantAlternates {
     /// Use alternative glyph from value
     Value(VariantAlternatesList),
     /// Use system font glyph
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -1389,6 +1396,7 @@ pub enum FontVariantEastAsian {
     /// Value variant with `variant-east-asian`
     Value(VariantEastAsian),
     /// System font variant
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -1617,6 +1625,7 @@ pub enum FontVariantLigatures {
     /// Value variant with `variant-ligatures`
     Value(VariantLigatures),
     /// System font variant
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -1847,6 +1856,7 @@ pub enum FontVariantNumeric {
     /// Value variant with `variant-numeric`
     Value(VariantNumeric),
     /// System font
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -1954,6 +1964,7 @@ pub enum FontFeatureSettings {
     /// Value of `FontSettings`
     Value(SpecifiedFontFeatureSettings),
     /// System font
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -2104,6 +2115,7 @@ pub enum FontLanguageOverride {
     /// the language system implied by the language of the element
     Override(Box<str>),
     /// Use system font
+    #[css(skip)]
     System(SystemFont),
 }
 
@@ -2186,6 +2198,7 @@ pub enum FontVariationSettings {
     /// Value of `FontSettings`
     Value(SpecifiedFontVariationSettings),
     /// System font
+    #[css(skip)]
     System(SystemFont),
 }
 
diff --git a/components/style_derive/to_css.rs b/components/style_derive/to_css.rs
index 148599586ed..722107da0cd 100644
--- a/components/style_derive/to_css.rs
+++ b/components/style_derive/to_css.rs
@@ -78,6 +78,9 @@ fn derive_variant_arm(
     let variant_attrs = cg::parse_variant_attrs_from_ast::<CssVariantAttrs>(&ast);
     let separator = if variant_attrs.comma { ", " } else { " " };
 
+    if variant_attrs.skip {
+        return quote!(Ok(()));
+    }
     if variant_attrs.dimension {
         assert_eq!(bindings.len(), 1);
         assert!(
@@ -223,6 +226,7 @@ pub struct CssVariantAttrs {
     pub dimension: bool,
     pub keyword: Option<String>,
     pub aliases: Option<String>,
+    pub skip: bool,
 }
 
 #[darling(attributes(css), default)]