Varia: use font-family mixin for main-nav font family

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

@@ -322,8 +322,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
-			"family-css-variable": '--font-base',
+			"family": (
+				"fallback": map-deep-get($config-global, "font", "family", "secondary"),
+				"css-var": '--font-base',
+			),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": normal,
 			"line-height": 1,

varia/sass/components/footer/_footer-navigation.scss

@@ -39,8 +39,7 @@
 		}
 
 		a {
-			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")}; // For browsers without support for CSS variables.
-			font-family: var( #{map-deep-get($config-header, "main-nav", "font", "family-css-variable")}, #{map-deep-get($config-header, "main-nav", "font", "family")} );
+			@include font-family( map-deep-get( $config-header, "main-nav", "font", "family" ) );
 			font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
 			padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
 

varia/sass/components/header/_config.scss

@@ -35,8 +35,10 @@ $config-header: (
 		),
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "primary"),
-			"family-css-variable": '--font-headings',
+			"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,

varia/sass/components/header/_site-main-navigation.scss

@@ -146,8 +146,7 @@
 	a {
 		color: #{map-deep-get($config-header, "main-nav", "color", "link")};
 		display: block;
-		font-family: #{map-deep-get($config-header, "main-nav", "font", "family")}; // For browsers without support for CSS variables.
-		font-family: var( #{map-deep-get($config-header, "main-nav", "font", "family-css-variable")}, #{map-deep-get($config-header, "main-nav", "font", "family")} );
+		@include font-family( map-deep-get($config-header, "main-nav", "font", "family" ) );
 		font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
 		padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;
 

varia/style-editor.css

@@ -112,6 +112,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Base
  * - Reset the browser

varia/style-rtl.css

@@ -135,6 +135,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Base
  * - Reset the browser

varia/style.css

@@ -135,6 +135,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * Crop Text Boundry
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
+/**
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
 /**
  * Base
  * - Reset the browser