Redhill: migrate to use font-family mixin

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "Palatino\, \"Palatino Linotype\"\, \"Palatino LT STD\"\, \"Book Antiqua\"\, Times, \"Times New Roman\"\, serif",
-			"secondary": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"primary": (
+				"fallback": "Palatino\, \"Palatino Linotype\"\, \"Palatino LT STD\"\, \"Book Antiqua\"\, Times, \"Times New Roman\"\, serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-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": (
@@ -140,7 +149,10 @@ $config-elements: (
 
 		// 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"),
+			),
 			"line-height": map-deep-get($config-global, "font", "line-height", "base"),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"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", "base"),
 		"weight": bold,
 		"line-height": 1,
@@ -202,7 +217,10 @@ $config-heading: (
 	// Fonts & Typography
 	"font": (
 		// Family
-		"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
 		"size": (
 			"h6": map-deep-get($config-global, "font", "size", "base"),
@@ -241,7 +259,10 @@ $config-heading: (
 $config-list: (
 	// 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"),
+		),
 	),
 );
 
@@ -251,7 +272,10 @@ $config-list: (
 $config-pullquote: (
 	// Font
 	"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"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"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"),
+		),
 	),
 );
 
@@ -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", "xxxxl"),
 				"weight": bold,
 				"line-height": 1,
@@ -308,7 +338,10 @@ $config-header: (
 		"description": (
 			// 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", "sm"),
 			),
 		),
@@ -323,7 +356,10 @@ $config-header: (
 		),
 		// 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"),
+			),
 			"family-css-variable": '--font-base',
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
@@ -354,7 +390,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"),
 	),
 );

redhill/sass/_extra-child-theme.scss

@@ -4,8 +4,7 @@
 
 // HTML reset
 html {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-	font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family (map-deep-get($config-global, "font", "family", "primary") );
 }
 
 // Link style
@@ -242,8 +241,7 @@ a {
 // Quote block
 .wp-block-quote {
   p {
-    font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-    font-family: var( --font-headings, #{map-deep-get($config-global, "font", "family", "primary")} );
+    @include font-family( map-deep-get($config-global, "font", "family", "primary") );
   }
 }
 
@@ -270,8 +268,7 @@ table,
 
 .entry-footer {
 	border-top: 1px solid #{map-deep-get($config-global, "color", "border", "default")};
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-	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", "xs")};
 	padding-top: #{map-deep-get($config-global, "spacing", "unit")};
 }
@@ -279,8 +276,7 @@ table,
 article .entry-header .entry-title,
 .page-title,
 .a8c-posts-list-item__title {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-	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", "xxxl")};
 	margin-bottom: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};
 
@@ -296,8 +292,7 @@ article .entry-header .entry-title,
 }
 
 .entry-content {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-	font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "primary")} );
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 }
 
 // Pagination
@@ -306,8 +301,7 @@ article .entry-header .entry-title,
 
   .nav-links > * {
     color: map-deep-get($config-global, "color", "foreground", "light");
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-    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", "base")};
     text-transform: uppercase;
 
@@ -352,8 +346,7 @@ article .entry-header .entry-title,
 
 	.meta-nav {
 		color: map-deep-get($config-global, "color", "foreground", "light");
-		font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-		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", "sm")};
 		font-weight: bold;
 		text-transform: uppercase;
@@ -411,16 +404,14 @@ article .entry-header .entry-title,
 
 .comments-title,
 .comment-reply-title {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-	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-heading, "font", "size", "h3")};
 }
 
 .comment-meta {
   .comment-metadata {
     color: map-deep-get($config-global, "color", "foreground", "light");
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-    font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "secondary")} );
+    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 
     a {
       color: inherit;
@@ -438,8 +429,7 @@ article .entry-header .entry-title,
 .comment-navigation {
     a {
     color: map-deep-get($config-global, "color", "foreground", "light");
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-    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", "sm")};
     text-transform: uppercase;
 
@@ -461,8 +451,7 @@ article .entry-header .entry-title,
 
   .widget-title,
   .widgettitle {
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")}; // For browsers without CSS custom properties support.
-    font-family: var( --font-headings, #{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", "base")};
     margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
     text-transform: uppercase;

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

@@ -21,14 +21,12 @@
 
 // Reset the font-family override on html to make editor fonts match front-end
 html {
-  font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-  font-family: var( --font-base, #{map-deep-get($config-global, "font", "family", "primary")} );
+  @include font-family( map-deep-get($config-global, "font", "family", "primary") );
 }
 
 // Set the correct font family/size for the title
 .editor-post-title .editor-post-title__block .editor-post-title__input {
-  font-family: #{map-deep-get($config-global, "font", "family", "primary")}; // For browsers without CSS custom properties support.
-  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", "xxxl")};
   text-align: center;
 }

redhill/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 Deep
  */
@@ -195,7 +199,7 @@ a {
 
 html {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 .editor-post-title .editor-post-title__block .editor-post-title__input {
@@ -413,7 +417,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -492,7 +496,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -732,7 +736,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -749,7 +753,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #222222;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 2.0736em;
 	letter-spacing: normal;
@@ -865,7 +869,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.48832em);
 	font-weight: bold;
 }

redhill/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
  */
@@ -1426,7 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1518,7 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1552,7 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -1637,7 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -2013,7 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2208,7 +2212,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.48832rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2376,7 +2380,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 body:not(.fse-enabled) .site-title {
@@ -2650,7 +2654,7 @@ body:not(.fse-enabled) .main-navigation a {
 .site-info {
 	color: #666666;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -3597,7 +3601,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  */
 html {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 a {
@@ -3881,7 +3885,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .entry-content {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 .pagination {
@@ -4025,7 +4029,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget-area .widget-title,
 .widget-area .widgettitle {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	margin-bottom: 16px;
 	text-transform: uppercase;

redhill/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
  */
@@ -1426,7 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1518,7 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1552,7 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -1637,7 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -2013,7 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2213,7 +2217,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.48832rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2393,7 +2397,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 body:not(.fse-enabled) .site-title {
@@ -2667,7 +2671,7 @@ body:not(.fse-enabled) .main-navigation a {
 .site-info {
 	color: #666666;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -3626,7 +3630,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  */
 html {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 a {
@@ -3910,7 +3914,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .entry-content {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
-	font-family: var(--font-base, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
 }
 
 .pagination {
@@ -4054,7 +4058,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .widget-area .widget-title,
 .widget-area .widgettitle {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+	font-family: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	margin-bottom: 16px;
 	text-transform: uppercase;