Varia: migrate sass/components/header

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

@@ -16,6 +16,7 @@
 
 	color: #{map-deep-get($config-header, "branding", "color", "link")};
 	font-family: #{map-deep-get($config-header, "branding", "title", "font", "family")};
+	font-family: var( --font-headings, #{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,6 +40,7 @@
 .site-description {
 	color: currentColor;
 	font-family: #{map-deep-get($config-header, "branding", "description", "font", "family")};
+	font-family: var( --font-base, #{map-deep-get($config-header, "branding", "description", "font", "family")} );
 }
 
 // Prevent overruling the user defined font size value set inside Gutenberg

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

@@ -147,6 +147,7 @@
 		color: #{map-deep-get($config-header, "main-nav", "color", "link")};
 		display: block;
 		font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
+		font-family: var( --font-headings, #{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

@@ -955,6 +955,7 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -975,6 +976,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+	font-family: var(--font-base, serif);
 }
 
 body:not(.fse-enabled) .site-title {
@@ -1139,6 +1141,7 @@ body:not(.fse-enabled) .site-description {
 	color: blue;
 	display: block;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }

varia/style-rtl.css

@@ -2314,6 +2314,7 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2334,6 +2335,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+	font-family: var(--font-base, serif);
 }
 
 body:not(.fse-enabled) .site-title {
@@ -2498,6 +2500,7 @@ body:not(.fse-enabled) .site-description {
 	color: blue;
 	display: block;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }

varia/style.css

@@ -2331,6 +2331,7 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2351,6 +2352,7 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+	font-family: var(--font-base, serif);
 }
 
 body:not(.fse-enabled) .site-title {
@@ -2515,6 +2517,7 @@ body:not(.fse-enabled) .site-description {
 	color: blue;
 	display: block;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }