Varia: use font-family mixin in primary, secondary, and ui

varia/sass/abstracts/_config-global.scss

@@ -11,10 +11,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
+			"primary": (
+				"fallback": "sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (

varia/sass/base/_editor.scss

@@ -1,8 +1,7 @@
 body {
 	color: #{map-deep-get($config-global, "color", "foreground", "default")};
 	background-color: #{map-deep-get($config-global, "color", "background", "default")};
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers that don't support CSS variables.
-	font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "secondary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 	font-size: #{map-deep-get($config-global, "font", "size", "root")};
 	font-weight: normal;
 	line-height: #{map-deep-get($config-global, "font", "line-height", "body")};

varia/sass/base/_reset.scss

@@ -62,8 +62,7 @@ html {
 html {
 	// Set mobile font-size to one step lower for mobile
 	font-size: #{map-deep-get($config-global, "font", "size", "root") / map-deep-get($config-global, "font", "size", "ratio")};
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without support for CSS variables.
-	font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "secondary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 	line-height: #{map-deep-get($config-global, "font", "line-height", "body")};
 
 	// Set mobile and ^ font-size to normal root

varia/sass/blocks/button/_config.scss

@@ -11,7 +11,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "primary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var" ),
+		),
 		"size": map-deep-get($config-global, "font", "size", "md"),
 		"weight": bold,
 		"line-height": 1,

varia/sass/blocks/button/_editor.scss

@@ -4,8 +4,7 @@
 	.wp-block-button__link {
 		color: #{map-deep-get($config-button, "color", "text")};
 		font-weight: #{map-deep-get($config-button, "font", "weight")};
-		font-family: #{map-deep-get($config-button, "font", "family")}; // For browsers that don't support CSS variables.
-		font-family: var( --font-base, #{map-deep-get($config-button, "font", "family")} );
+		@include font-family( map-deep-get($config-button, "font", "family") );
 		font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
 		line-height: #{map-deep-get($config-button, "font", "line-height")};
 		background-color: #{map-deep-get($config-button, "color", "background")};

varia/sass/blocks/button/_style.scss

@@ -9,8 +9,7 @@
 	color: #{map-deep-get($config-button, "color", "text")};
 	cursor: pointer;
 	font-weight: #{map-deep-get($config-button, "font", "weight")};
-	font-family: #{map-deep-get($config-button, "font", "family")}; // For browsers without support for CSS custom properties.
-	font-family: var( --font-base, #{map-deep-get($config-button, "font", "family")} );
+	@include font-family( map-deep-get($config-button, "font", "family") );
 	font-size: #{map-deep-get($config-button, "font", "size")};
 	background-color: #{map-deep-get($config-button, "color", "background")};
 	border-radius: #{map-deep-get($config-button, "border-radius")};

varia/sass/blocks/heading/_config.scss

@@ -6,8 +6,8 @@ $config-heading: (
 	"font": (
 		// Family
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "primary"),
-			"css-var": '--font-headings',
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 		),
 		// Size
 		"size": (

varia/sass/blocks/list/_config.scss

@@ -5,8 +5,8 @@ $config-list: (
 	// Fonts
 	"font": (
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-			"css-var": '--font-base',
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 		)
 	),
 );

varia/sass/blocks/list/_style.scss

@@ -19,8 +19,7 @@ li > ol {
 }
 
 dt {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-weight: bold;
 }
 

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

@@ -11,8 +11,7 @@
 .a8c-posts-list-item__featured span {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-weight: bold;
 	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 	line-height: 1;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "sans-serif",
-			"secondary": "serif",
+			"primary": (
+				"fallback": "sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -141,8 +150,8 @@ $config-elements: (
 		// Fonts
 		"font": (
 			"family": (
-				"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-				"css-var": '--font-base',
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),
@@ -172,7 +181,10 @@ $config-button: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "ui"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
+		),
 		"size": map-deep-get($config-global, "font", "size", "md"),
 		"weight": 600,
 		"line-height": 1,
@@ -206,8 +218,8 @@ $config-heading: (
 	"font": (
 		// Family
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "primary"),
-			"css-var": '--font-headings',
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 		),
 		// Size
 		"size": (
@@ -248,8 +260,8 @@ $config-list: (
 	// Fonts
 	"font": (
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-			"css-var": '--font-base',
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 		),
 	),
 );
@@ -313,8 +325,8 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": (
-					"fallback": map-deep-get($config-global, "font", "family", "primary"),
-					"css-var": '--font-headings',
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 				),
 				"size": map-deep-get($config-global, "font", "size", "md"),
 				"weight": normal,
@@ -326,8 +338,8 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": (
-					"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-					"css-var": '--font-base',
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
@@ -344,8 +356,8 @@ $config-header: (
 		// Fonts
 		"font": (
 			"family": (
-				"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-				"css-var": '--font-base',
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 			),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": normal,
@@ -377,8 +389,8 @@ $config-footer: (
 	// Fonts
 	"font": (
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "primary"),
-			"css-var": '--font-headings',
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),

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

@@ -6,8 +6,8 @@
 // @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Roboto:400,400i,700&display=swap');
 
 $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
-$config-global: map-deep-set($config-global, "font" "family" "primary", "\'Playfair Display\', serif");
-$config-global: map-deep-set($config-global, "font" "family" "secondary", "\'Roboto\', sans-serif");
+$config-global: map-deep-set($config-global, "font" "family" "primary", "fallback", "\'Playfair Display\', serif");
+$config-global: map-deep-set($config-global, "font" "family" "secondary", "fallback", "\'Roboto\', sans-serif");
 $config-global: map-deep-set($config-global, "color" "primary" "default", pink);
 $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 
@@ -15,12 +15,12 @@ $config-global: map-deep-set($config-global, "font" "size" "root", "20px");
 $config-button: map-deep-set($config-button, "color" "background", orange);
 
 // Headings
-$config-heading: map-deep-set($config-heading, "font" "family", "\'Playfair Display\', serif");
+$config-heading: map-deep-set($config-heading, "font" "family", "fallback", "\'Playfair Display\', serif");
 $config-heading: map-deep-set($config-heading, "font" "weight", 200);
 
 // Header
-$config-header: map-deep-set($config-header, "branding" "title" "font" "family", "\'Playfair Display\', serif");
+$config-header: map-deep-set($config-header, "branding" "title" "font" "family", "fallback", "\'Playfair Display\', serif");
 $config-header: map-deep-set($config-header, "branding" "title" "font" "weight", 200);
-$config-header: map-deep-set($config-header, "branding" "description" "font" "family", "\'Roboto\', sans-serif");
+$config-header: map-deep-set($config-header, "branding" "description" "font" "family", "fallback", "\'Roboto\', sans-serif");
 $config-header: map-deep-set($config-header, "branding" "color" "link", orange);
 $config-header: map-deep-set($config-header, "main-nav" "color" "link", orange);

varia/sass/components/comments/_comment-navigation.scss

@@ -1,8 +1,7 @@
 // Comment navigation
 .comment-navigation {
 	a {
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: #{map-deep-get($config-global, "font", "size", "md")};
 		font-weight: 600;
 	}

varia/sass/components/comments/_comments.scss

@@ -34,8 +34,7 @@
 
 	small {
 		font-size: #{map-deep-get($config-global, "font", "size", "base")};
-		font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without support for CSS variables.
-		font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "secondary")} );
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		letter-spacing: normal;
 		line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
 	}
@@ -152,8 +151,7 @@
 .comment-author .fn,
 .pingback .url,
 .trackback .url {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 }
 
 /**

varia/sass/components/footer/_config.scss

@@ -8,8 +8,8 @@ $config-footer: (
 	// Fonts
 	"font": (
 		"family": (
-			"fallback": map-deep-get($config-global, "font", "family", "primary"),
-			"css-var": '--font-headings',
+			"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 		),
 		"size": map-deep-get($config-global, "font", "size", "sm"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),

varia/sass/components/header/_config.scss

@@ -11,8 +11,8 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": (
-					"fallback": map-deep-get($config-global, "font", "family", "primary"),
-					"css-var": '--font-headings',
+					"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 				),
 				"size": map-deep-get($config-global, "font", "size", "md"),
 				"weight": bold,
@@ -24,8 +24,8 @@ $config-header: (
 			// Fonts
 			"font": (
 				"family": (
-					"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-					"css-var": '--font-base',
+					"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
@@ -42,8 +42,8 @@ $config-header: (
 		// Fonts
 		"font": (
 			"family": (
-				"fallback": map-deep-get($config-global, "font", "family", "primary"),
-				"css-var": '--font-headings',
+				"fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
 			),
 			"size": map-deep-get($config-global, "font", "size", "md"),
 			"weight": bold,

varia/sass/components/pagination/_next-previous.scss

@@ -9,8 +9,7 @@
 	}
 
 	.post-title {
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-		font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: #{map-deep-get($config-global, "font", "size", "lg")};
 		font-weight: 600;
 	}
@@ -39,8 +38,7 @@
 		margin: 0 calc(-0.66 * #{map-deep-get($config-global, "spacing", "unit")});
 
 		& > * {
-			font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-			font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+			@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 			font-size: #{map-deep-get($config-global, "font", "size", "md")};
 			font-weight: 600;
 			padding-left: calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")};

varia/sass/elements/_config.scss

@@ -12,8 +12,8 @@ $config-elements: (
 		// Fonts
 		"font": (
 			"family": (
-				"fallback": map-deep-get($config-global, "font", "family", "secondary"),
-				"css-var": '--font-base',
+				"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
 			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "md"),
 			"size": map-deep-get($config-global, "font", "size", "md"),

varia/sass/pages/_posts-and-pages.scss

@@ -5,8 +5,7 @@
 .sticky-post {
 	color: #{map-deep-get($config-global, "color", "background", "default")};
 	background-color: #{map-deep-get($config-global, "color", "primary", "default")};
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without support for CSS variables.
-	font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-weight: bold;
 	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 	line-height: 1;

varia/style-editor.css

@@ -261,7 +261,7 @@ object {
 	color: white;
 	font-weight: bold;
 	font-family: sans-serif;
-	font-family: var(--font-base, sans-serif);
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2em;
 	line-height: 1;
 	background-color: blue;
@@ -1407,7 +1407,7 @@ body:not(.fse-enabled) .footer-menu a {
 	cursor: pointer;
 	font-weight: bold;
 	font-family: sans-serif;
-	font-family: var(--font-base, sans-serif);
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	background-color: blue;
 	border-radius: 9px;

varia/style-rtl.css

@@ -1045,7 +1045,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: sans-serif;
-	font-family: var(--font-base, sans-serif);
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	background-color: blue;
 	border-radius: 9px;

varia/style.css

@@ -1045,7 +1045,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: sans-serif;
-	font-family: var(--font-base, sans-serif);
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	background-color: blue;
 	border-radius: 9px;