Varia: site title and description uses font-family mixin

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

@@ -297,7 +297,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary"),
+					"css-var": '--font-headings',
+				),
 				"size": map-deep-get($config-global, "font", "size", "md"),
 				"weight": normal,
 				"line-height": 1,
@@ -307,7 +310,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary"),
+					"css-var": '--font-base',
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),

varia/sass/components/header/_config.scss

@@ -10,7 +10,10 @@ $config-header: (
 		"title": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "primary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "primary"),
+					"css-var": '--font-headings',
+				),
 				"size": map-deep-get($config-global, "font", "size", "md"),
 				"weight": bold,
 				"line-height": 1,
@@ -20,7 +23,10 @@ $config-header: (
 		"description": (
 			// Fonts
 			"font": (
-				"family": map-deep-get($config-global, "font", "family", "secondary"),
+				"family": (
+					"fallback": map-deep-get($config-global, "font", "family", "secondary"),
+					"css-var": '--font-base',
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),

varia/sass/components/header/_site-branding.scss

@@ -15,8 +15,7 @@
 .site-title {
 
 	color: #{map-deep-get($config-header, "branding", "color", "link")};
-	font-family: #{map-deep-get($config-header, "branding", "title", "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-header, "branding", "title", "font", "family")} );
+	@include font-family( map-deep-get( $config-header, "branding", "title", "font", "family" ) );
 	letter-spacing: normal;
 	line-height: #{map-deep-get($config-header, "branding", "title", "font", "line-height")};
 
@@ -39,8 +38,7 @@
 
 .site-description {
 	color: currentColor;
-	font-family: #{map-deep-get($config-header, "branding", "description", "font", "family")}; // For browsers without support for CSS variables.
-	font-family: var( --font-base, #{map-deep-get($config-header, "branding", "description", "font", "family")} );
+	@include font-family( map-deep-get($config-header, "branding", "description", "font", "family") );
 }
 
 // Prevent overruling the user defined font size value set inside Gutenberg