Varia: migrate config-heading to font-family mixin

config-quote and config-pullquote use config-heading
so they are also migrated

varia/sass/blocks/heading/_config.scss

@@ -5,7 +5,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary"),
+			"css-var": '--font-headings',
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),

varia/sass/blocks/heading/_editor.scss

@@ -4,8 +4,7 @@
 .wp-block-heading h4, h4, .h4,
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
-	font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers that don't support CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+	@include font-family( map-deep-get($config-heading, "font", "family") );
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
 	clear: both;
 }

varia/sass/blocks/heading/_style.scss

@@ -4,8 +4,7 @@ h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-	font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+	@include font-family( map-deep-get($config-heading, "font", "family") );
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
 	clear: both;
 }

varia/sass/blocks/latest-comments/_style.scss

@@ -19,8 +19,7 @@
 	}
 
 	.wp-block-latest-comments__comment-meta {
-		font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+		@include font-family( map-deep-get($config-heading, "font", "family") );
 	}
 
 	.wp-block-latest-comments__comment-date {

varia/sass/blocks/latest-posts/_editor.scss

@@ -2,8 +2,7 @@
 	padding-left: 0;
 
 	& > li > a {
-		font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+		@include font-family( map-deep-get($config-heading, "font", "family") );
 		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
 		font-weight: #{map-deep-get($config-heading, "font", "weight")};
 		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};

varia/sass/blocks/latest-posts/_style.scss

@@ -16,8 +16,7 @@
 	}
 
 	& > li > a {
-		font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+		@include font-family( map-deep-get($config-heading, "font", "family") );
 		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
 		font-weight: #{map-deep-get($config-heading, "font", "weight")};
 		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};

varia/sass/blocks/pullquote/_config.scss

@@ -4,7 +4,10 @@
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 	// Border
 	"color": (

varia/sass/blocks/pullquote/_editor.scss

@@ -15,8 +15,7 @@
 	}
 
 	p {
-		font-family: #{map-deep-get($config-pullquote, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-pullquote, "font", "family")} );
+		@include font-family( map-deep-get($config-pullquote, "font", "family") );
 		font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h4")) + 0em);
 		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
 		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};

varia/sass/blocks/pullquote/_style.scss

@@ -11,8 +11,7 @@
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 
 	p {
-		font-family: #{map-deep-get($config-pullquote, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-pullquote, "font", "family")} );
+		@include font-family( map-deep-get($config-pullquote, "font", "family") );
 		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
 		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
 		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};

varia/sass/blocks/quote/_config.scss

@@ -4,6 +4,9 @@
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 );

varia/sass/blocks/quote/_editor.scss

@@ -4,8 +4,7 @@
 	padding-left: #{map-deep-get($config-global, "spacing", "horizontal")};
 
 	p {
-		font-family: #{map-deep-get($config-quote, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-quote, "font", "family")} );
+		@include font-family( map-deep-get($config-quote, "font", "family") );
 		font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h4")) + 0em);
 		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
 		line-height: #{map-deep-get($config-global, "font", "line-height", "h4")};
@@ -17,8 +16,7 @@
 		padding: 0;
 
 		p {
-			font-family: #{map-deep-get($config-quote, "font", "family")}; // For browsers without support for CSS variables.
-			font-family: var( --font-headings, #{map-deep-get($config-quote, "font", "family")} );
+			@include font-family( map-deep-get($config-quote, "font", "family") );
 			font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h3")) + 0em);
 			letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h3")};
 			line-height: #{map-deep-get($config-heading, "font", "line-height", "h3")};

varia/sass/blocks/quote/_style.scss

@@ -18,8 +18,7 @@
 	}
 
 	p {
-		font-family: #{map-deep-get($config-quote, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-quote, "font", "family")} );
+		@include font-family( map-deep-get($config-quote, "font", "family") );
 		font-size: #{map-deep-get($config-heading, "font", "size", "h4")};
 		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h4")};
 		line-height: #{map-deep-get($config-heading, "font", "line-height", "h4")};

varia/sass/blocks/table/_editor.scss

@@ -2,8 +2,7 @@ table,
 .wp-block-table {
 
 	th {
-		font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+		@include font-family( map-deep-get($config-heading, "font", "family") );
 	}
 
 	td,

varia/sass/blocks/table/_style.scss

@@ -5,8 +5,7 @@ table,
     border-collapse: collapse;
 
 	th {
-		font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+		@include font-family( map-deep-get($config-heading, "font", "family") );
 	}
 
 	td,

varia/sass/blocks/utilities/_editor.scss

@@ -5,8 +5,7 @@
 
 .editor-post-title__block .editor-post-title__input {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
-	font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+	@include font-family( map-deep-get($config-heading, "font", "family") );
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
 	font-size: (strip-unit(map-deep-get($config-heading, "font", "size", "h2")) + 0em);
 	letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
@@ -129,8 +128,7 @@
 
 // Drop cap
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+	@include font-family( map-deep-get($config-heading, "font", "family") );
 	font-size: calc(2 * #{strip-unit(map-deep-get($config-heading, "font", "size", "h1")) + 0em});
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
 }

varia/sass/blocks/utilities/_style.scss

@@ -212,8 +212,7 @@
 
 // Drop caps
 .has-drop-cap:not(:focus)::first-letter {
-	font-family: #{map-deep-get($config-heading, "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-heading, "font", "family")} );
+	@include font-family( map-deep-get($config-heading, "font", "family") );
 	font-size: calc(2 * #{map-deep-get($config-heading, "font", "size", "h1")} );
 	font-weight: #{map-deep-get($config-heading, "font", "weight")};
 	line-height: 0.66;

varia/sass/child-theme/_config-child-theme-deep.scss

@@ -202,7 +202,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary"),
+			"css-var": '--font-headings',
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -251,7 +254,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +276,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"font": (
-		"family": #{map-deep-get($config-heading, "font", "family")},
+		"family": (
+			"fallback": #{map-deep-get($config-heading, "font", "family", "fallback")},
+			"css-var": #{map-deep-get($config-heading, "font", "family", "css-var")},
+		),
 	),
 );