Stratford: migrate to use font-family mixin

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Poppins\"\, sans-serif",
-			"secondary": "\"Lato\"\, sans-serif",
+			"primary": (
+				"fallback": "\"Poppins\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Lato\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "\"Inconsolata\"\, 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": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// Fonts
 		"font": (
-			"family": map-deep-get($config-global, "font", "family", "secondary"),
+			"family": (
+				"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"),
 			"weight": bold,
@@ -169,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", "sm"),
 		"weight": 700,
 		"line-height": 1.44,
@@ -202,7 +217,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", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+		),
 		// Size
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "md"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
+			"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+		),
 	),
 );
 
@@ -251,7 +272,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 +294,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"),
+		),
 	),
 );
 
@@ -298,7 +325,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", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "lg"),
 				"weight": 700,
 				"line-height": 1.2,
@@ -308,7 +338,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", "fallback"),
+					"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+				),
 				"size": map-deep-get($config-global, "font", "size", "sm"),
 			),
 		),
@@ -323,8 +356,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", "fallback"),
+				"css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": 700,
 			"line-height": 1.5,
@@ -354,7 +389,10 @@ $config-footer: (
 	),
 	// Fonts
 	"font": (
-		"family": map-deep-get($config-global, "font", "family", "secondary"),
+		"family": (
+			"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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

stratford/sass/_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);

stratford/sass/_extra-child-theme.scss

@@ -31,12 +31,10 @@ $font_size_md: #{map-deep-get($config-global, "font", "size", "md")};
 $font_size_base: #{map-deep-get($config-global, "font", "size", "base")};
 $font_size_lg: #{map-deep-get($config-global, "font", "size", "lg")};
 $font_size_xl: #{map-deep-get($config-global, "font", "size", "xl")};
-$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
 $font_family_code: #{map-deep-get($config-global, "font", "family", "code")};
 $font_line_height_body: #{map-deep-get($config-global, "font", "line-height", "body")};
 $button_line_height: #{map-deep-get($config-button, "font", "line-height")};
 $button_font_weight: #{map-deep-get($config-button, "font", "weight")};
-$button_font_family: #{map-deep-get($config-button, "font", "family")};
 $button_font_size: #{map-deep-get($config-button, "font", "size")};
 $button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")};
 $button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
@@ -312,8 +310,7 @@ a {
 		}
 	}
 	p {
-		font-family: $font_family_secondary; // For browsers without CSS custom properties support.
-		font-family: var( --font-base, $font_family_secondary );
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		font-size: $font_size_md;
 		line-height: $font_line_height_body;
 	}
@@ -337,8 +334,7 @@ a {
 			line-height: $button_line_height;
 			cursor: pointer;
 			font-weight: $button_font_weight;
-			font-family: $button_font_family;
-			font-family: var( --font-base, $button_font_family );
+			@include font-family( map-deep-get($config-button, "font", "family") );
 			// font-size: $button_font_size;
 			padding: $button_spacing_vertical $button_spacing_horizontal;
 			display: inline-block;
@@ -357,8 +353,7 @@ a {
  */
 .wp-block-latest-comments {
 	.wp-block-latest-comments__comment-meta {
-		font-family: $font_family_secondary; // For browsers without CSS custom properties support.
-		font-family: var( --font-base, $font_family_secondary );
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 	}
 }
 
@@ -408,8 +403,7 @@ input[type="submit"],
 			> a {
 				font-size: $font_size_base;
 				font-weight: normal;
-				font-family: $font_family_secondary; // For browsers without CSS custom properties support.
-				font-family: var( --font-base, $font_family_secondary );
+				@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 				line-height: $font_line_height_body;
 			}
 			> time {

stratford/sass/style-child-theme-editor.scss

@@ -47,13 +47,10 @@ $font_size_xs: #{map-deep-get($config-global, "font", "size", "xs")};
 $font_size_md: #{map-deep-get($config-global, "font", "size", "md")};
 $font_size_base: #{map-deep-get($config-global, "font", "size", "base")};
 $font_size_xl: #{map-deep-get($config-global, "font", "size", "xl")};
-$font_family_primary: #{map-deep-get($config-global, "font", "family", "primary")};
-$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
 $font_family_code: #{map-deep-get($config-global, "font", "family", "code")};
 $font_line_height_body: #{map-deep-get($config-global, "font", "line-height", "body")};
 $button_line_height: #{map-deep-get($config-button, "font", "line-height")};
 $button_font_weight: #{map-deep-get($config-button, "font", "weight")};
-$button_font_family: #{map-deep-get($config-button, "font", "family")};
 $button_font_size: #{map-deep-get($config-button, "font", "size")};
 $button_spacing_vertical: #{map-deep-get($config-button, "padding", "vertical")}; 
 $button_spacing_horizontal: #{map-deep-get($config-button, "padding", "horizontal")};
@@ -122,8 +119,7 @@ h6 {
 			> a {
 				font-size: $font_size_base;
 				font-weight: normal;
-				font-family: $font_family_secondary; // For browsers without CSS custom properties support.
-				font-family: var( --font-base, $font_family_secondary );
+				@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 				line-height: $font_line_height_body;
 			}
 			> time {
@@ -144,8 +140,7 @@ h6 {
 	border: 1px solid $color_background_light;
 	padding: $spacing_horizontal;
 	p {
-		font-family: $font_family_secondary; // For browsers without CSS custom properties support.
-		font-family: var( --font-base, $font_family_secondary );
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		font-size: $font_size_md;
 		line-height: $font_line_height_body;
 	}
@@ -164,8 +159,7 @@ h6 {
 			line-height: $button_line_height;
 			cursor: pointer;
 			font-weight: $button_font_weight;
-			font-family: $button_font_family;
-			font-family: var( --font-base, $button_font_family );
+			@include font-family( map-deep-get($config-button, "font", "family") );
 			background-color: $button_background;
 			font-size: $button_font_size;
 			padding: $button_spacing_vertical $button_spacing_horizontal;
@@ -236,8 +230,7 @@ h6 {
 		color: $button_color;
 		cursor: pointer;
 		font-weight: $button_font_weight;
-		font-family: $button_font_family;
-		font-family: var( --font-base, $button_font_family );
+		@include font-family( map-deep-get($config-button, "font", "family") );
 		font-size: $button_font_size;
 		background-color: $button_background;
 		border-radius: 5em;

stratford/style-editor.css

@@ -115,6 +115,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.
+ */
 /**
  * Child Theme Name
  */

stratford/style-rtl.css

@@ -136,6 +136,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.
+ */
 /**
  * Child Theme Deep
  */
@@ -2650,7 +2654,7 @@ body:not(.fse-enabled) .main-navigation a {
 .site-info {
 	color: #767676;
 	font-family: "Lato", sans-serif;
-	font-family: var(--font-headings, "Lato", sans-serif);
+	font-family: var(--font-base, "Lato", sans-serif);
 	font-size: 0.83333rem;
 }
 

stratford/style.css

@@ -136,6 +136,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.
+ */
 /**
  * Child Theme Deep
  */
@@ -2667,7 +2671,7 @@ body:not(.fse-enabled) .main-navigation a {
 .site-info {
 	color: #767676;
 	font-family: "Lato", sans-serif;
-	font-family: var(--font-headings, "Lato", sans-serif);
+	font-family: var(--font-base, "Lato", sans-serif);
 	font-size: 0.83333rem;
 }