Add `$display-font-family` and `$display-font-style` (#36711)

diff --git a/scss/_type.scss b/scss/_type.scss
index b2d524ca1443466e483836bca225d58f76b15800..37d64bf89c5578ee14759a04aaf65e2a1a93f097 100644 (file)
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -35,6 +35,8 @@
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
     @include font-size($font-size);
+    font-family: $display-font-family;
+    font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 761bb455dc539b2eca3543f0b842860dd7fde657..75205c39a7668e7fceaa58212ebf2a74bfb1b767 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -604,6 +604,8 @@ $display-font-sizes: (
   6: 2.5rem
 ) !default;
 
+$display-font-family: null !default;
+$display-font-style:  null !default;
 $display-font-weight: 300 !default;
 $display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings

diff --git a/site/content/docs/5.2/content/typography.md b/site/content/docs/5.2/content/typography.md
index 3c71df7d11f8b2549ef1916eed30556a731e1a26..7330132810ef2154e2131a7895591f34e4cc6a3e 100644 (file)
--- a/site/content/docs/5.2/content/typography.md
+++ b/site/content/docs/5.2/content/typography.md
@@ -88,6 +88,8 @@ Traditional heading elements are designed to work best in the meat of your page
 
 Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
 
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
 {{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
 
 ## Lead