Merge pull request #1516 from Automattic/add/global-styles-support-varia-themes

Add/global styles support to all varia-based themes

alves/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

alves/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alves",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Alves",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

alves/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Lora\"\, Georgia\, sans-serif",
-			"secondary": "\"Karla\"\, Arial\, sans-serif",
+			"primary": (
+				"fallback": "\"Lora\"\, Georgia\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Karla\"\, Arial\, sans-serif",
+				"css-var": '--font-base',
+			),
 			"code": "Monaco\, Consolas\, \"Andale Mono\"\, \"DejaVu Sans Mono\"\, 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", "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"),
 		"weight": bold,
 		"line-height": 1,
@@ -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", "base"),
@@ -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")},
+		),
 	),
 );
 
@@ -297,7 +324,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": bold,
 				"line-height": 1,
@@ -307,7 +337,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"),
 			),
 		),
@@ -322,7 +355,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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
 			"line-height": 1,
@@ -352,7 +388,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

alves/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);

alves/sass/_extra-child-theme.scss

@@ -37,13 +37,11 @@ $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_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_family: #{map-deep-get($config-button, "font", "family", "fallback")};
 $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")};
@@ -117,11 +115,11 @@ input[type="submit"],
 }
 
 .widget-title {
-	font-family: $font_family_primary;
+	@include font-family( map-deep-get($config-global, "font", "family", "primary" ) );
 }
 
 blockquote cite {
-	font-family: $font_family_secondary;
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary" ) );
 }
 
 .wp-block-quote p,
@@ -407,7 +405,7 @@ blockquote p {
 
 		a {
 			color: $color_foreground;
-			font-family: $font_family_secondary;
+			@include font-family( map-deep-get( $config-global, "font", "family", "secondary" ) );
 			padding: 0;
 			text-decoration: none;
 

alves/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

alves/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

alves/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #394d55;
 	background-color: #ffffff;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 16px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #ffffff;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167em;
 	line-height: 1;
 	background-color: #3E7D98;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 2.16em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	font-size: 2.592em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104em);
 	font-weight: normal;
 }

alves/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 13.33333px;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167rem;
 	background-color: #3E7D98;
 	border-radius: 160px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104rem);
 	font-weight: normal;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 1.8rem;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.8rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.04167rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #394d55;
 	display: block;
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.04167rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.04167rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #2f5f74;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 1.04167rem;
+}
+
 .entry-title {
 	font-size: 2.592rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3E7D98;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -3636,10 +3675,12 @@ input[type="submit"],
 
 .widget-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 }
 
 .wp-block-quote p,
@@ -3876,6 +3917,7 @@ blockquote p {
 .site-footer #footer-info-wrapper a {
 	color: #394d55;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	padding: 0;
 	text-decoration: none;
 }

alves/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Convincing design for your charity or organization’s online presence. Highlight your actions, causes and projects, Alves is versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: alves
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 13.33333px;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-size: 1.04167rem;
 	background-color: #3E7D98;
 	border-radius: 160px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: normal;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: normal;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: calc(2 * 3.1104rem);
 	font-weight: normal;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #394d55;
 	font-family: "Lora", Georgia, sans-serif;
-	font-size: 1.8rem;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.8rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.04167rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #394d55;
 	display: block;
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.04167rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #4d6974;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.04167rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Karla", Arial, sans-serif;
-	font-size: 1.04167rem;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #2f5f74;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 1.04167rem;
+}
+
 .entry-title {
 	font-size: 2.592rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.8rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1.25rem;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3E7D98;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-size: 1.5rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #ffffff;
 	background-color: #3E7D98;
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 	font-weight: bold;
 	font-size: 1.04167rem;
 	line-height: 1;
@@ -3665,10 +3704,12 @@ input[type="submit"],
 
 .widget-title {
 	font-family: "Lora", Georgia, sans-serif;
+	font-family: var(--font-headings, "Lora", Georgia, sans-serif);
 }
 
 blockquote cite {
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 }
 
 .wp-block-quote p,
@@ -3905,6 +3946,7 @@ blockquote p {
 .site-footer #footer-info-wrapper a {
 	color: #394d55;
 	font-family: "Karla", Arial, sans-serif;
+	font-family: var(--font-base, "Karla", Arial, sans-serif);
 	padding: 0;
 	text-decoration: none;
 }

balasana/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "balasana",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

balasana/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balasana",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Balasana",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

balasana/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Roboto Condensed\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"primary": (
+				"fallback": "\"Roboto Condensed\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "Roboto\, -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": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "Roboto\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-base',
+			),
 		),
 		/* Font Size */
 		"size": (
@@ -137,7 +146,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", "sm"),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": bold,
@@ -164,7 +176,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,
@@ -197,7 +212,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"),
@@ -236,7 +254,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"),
+		),
 	),
 );
 
@@ -246,7 +267,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": (
@@ -265,7 +289,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")},
+		),
 	),
 );
 
@@ -292,7 +319,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,
@@ -302,7 +332,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"),
 			),
 		),
@@ -317,7 +350,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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": 400,
 			"line-height": 1,
@@ -347,7 +383,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"),
 	),

balasana/sass/_extra-child-theme.scss

@@ -38,6 +38,7 @@ input[type="submit"] {
 
 dt {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 .entry-header,
@@ -329,6 +330,7 @@ dt {
 	border-radius: $border_radius_sm;
 	color: $color_foreground;
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 	padding: #{0.5 * $spacing_unit} $spacing_unit;
 }
 
@@ -337,6 +339,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var( --font-headings, inherit );
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -373,6 +376,7 @@ dt {
 .comment-navigation {
 	a {
 		font-family: inherit;
+		font-family: var( --font-headings, inherit );
 		font-size: inherit;
 		font-weight: 400;
 	}
@@ -385,6 +389,7 @@ dt {
 	.comment-author {
 		.fn {
 			font-family: inherit;
+			font-family: var( --font-headings, inherit );
 
 			a {
 				color: inherit;
@@ -417,6 +422,7 @@ dt {
 .trackback {
 	.url {
 		font-family: inherit;
+		font-family: var( --font-headings, inherit );
 	}
 }
 
@@ -439,6 +445,7 @@ dt {
 // Latest Comments
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var( --font-headings, inherit );
 }
 
 // Pullquote

balasana/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without support for CSS custom properties.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

balasana/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

balasana/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #303030;
 	background-color: white;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
 	background-color: #19744C;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 700;
 }

balasana/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #19744C;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.44rem;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.44rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #303030;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #19744C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #D0D0D0;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3590,6 +3629,7 @@ input[type="submit"]:hover {
 
 dt {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 .entry-header,
@@ -3865,6 +3905,7 @@ dt {
 	border-radius: 4px;
 	color: #303030;
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 	padding: 8px 16px;
 }
 
@@ -3873,6 +3914,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3906,6 +3948,7 @@ dt {
  */
 .comment-navigation a {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3915,6 +3958,7 @@ dt {
  */
 .comment-meta .comment-author .fn {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .comment-meta .comment-author .fn a {
@@ -3942,6 +3986,7 @@ dt {
 .pingback .url,
 .trackback .url {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 /**
@@ -3959,6 +4004,7 @@ dt {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .wp-block-pullquote blockquote {

balasana/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Balasana is a clean and minimalist business theme designed with health and wellness-focused sites in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.3
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: balasana
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #19744C;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.44rem;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.44rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #303030;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 400;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #19744C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #D0D0D0;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: white;
 	background-color: #19744C;
 	font-family: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3619,6 +3658,7 @@ input[type="submit"]:hover {
 
 dt {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 .entry-header,
@@ -3894,6 +3934,7 @@ dt {
 	border-radius: 4px;
 	color: #303030;
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 	padding: 8px 16px;
 }
 
@@ -3902,6 +3943,7 @@ dt {
  */
 .pagination .nav-links > * {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3935,6 +3977,7 @@ dt {
  */
 .comment-navigation a {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 	font-size: inherit;
 	font-weight: 400;
 }
@@ -3944,6 +3987,7 @@ dt {
  */
 .comment-meta .comment-author .fn {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .comment-meta .comment-author .fn a {
@@ -3971,6 +4015,7 @@ dt {
 .pingback .url,
 .trackback .url {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 /**
@@ -3988,6 +4033,7 @@ dt {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: inherit;
+	font-family: var(--font-headings, inherit);
 }
 
 .wp-block-pullquote blockquote {

barnsbury/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

barnsbury/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barnsbury",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Barnsbury",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

barnsbury/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
-			"secondary": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+			"primary": (
+				"fallback": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Rubik\"\, Trebuchet MS\, Lucida Grande\, Lucida Sans Unicode\, Lucida Sans\, Tahoma\, 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", "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", "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", "base"),
 		"weight": bold,
 		"line-height": 1,
@@ -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")},
+		),
 	),
 );
 
@@ -297,7 +324,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", "xl"),
 				"weight": bold,
 				"line-height": 1,
@@ -307,7 +337,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", "xs"),
 			),
 		),
@@ -322,7 +355,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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": bold,
 			"line-height": 1,
@@ -352,7 +388,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

barnsbury/sass/_extra-child-theme.scss

@@ -347,6 +347,7 @@ a {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 /**

barnsbury/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without support for CSS custom properties.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

barnsbury/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

barnsbury/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #3C2323;
 	background-color: #FFFDF6;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #FFFDF6;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #20603C;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303em;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.93878em;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #3C2323;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 2.28776em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955em);
 	font-weight: bold;
 }

barnsbury/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.94915px;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1rem;
 	background-color: #20603C;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #0D1B24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1.64303rem;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.64303rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.71818rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #3C2323;
 	display: block;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #133a24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 0.84746rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 0.84746rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #20603C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.84746rem;
+}
+
 .entry-title {
 	font-size: 2.28776rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.3924rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.15;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3C2323;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -3918,6 +3957,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

barnsbury/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Barnsbury is an earthy and friendly theme design with farming and agriculture businesses in mind.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: barnsbury
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.94915px;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1rem;
 	background-color: #20603C;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	font-weight: bold;
 	line-height: 1.15;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.64303rem;
 	letter-spacing: normal;
 	line-height: 1.15;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: calc(2 * 2.69955rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #0D1B24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1.64303rem;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.64303rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.71818rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #3C2323;
 	display: block;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #133a24;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 0.84746rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
-	font-size: 0.84746rem;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #20603C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.84746rem;
+}
+
 .entry-title {
 	font-size: 2.28776rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.3924rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-base, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	letter-spacing: normal;
 	line-height: 1.15;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #3C2323;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-size: 1.18rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFDF6;
 	background-color: #20603C;
 	font-family: "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
+	font-family: var(--font-headings, "Rubik", Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif);
 	font-weight: bold;
 	font-size: 0.84746rem;
 	line-height: 1;
@@ -3947,6 +3986,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

brompton/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "brompton",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

brompton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brompton",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Brompton",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

brompton/print.css

@@ -28,6 +28,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "Lora, Cambria, \"Hoefler Text\"\, Utopia, \"Liberation Serif\"\, \"Nimbus Roman No9 L Regular\"\, Times, \"Times New Roman\"\, serif",
+			"primary": (
+				"fallback": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "Lora, Cambria, \"Hoefler Text\"\, Utopia, \"Liberation Serif\"\, \"Nimbus Roman No9 L Regular\"\, Times, \"Times New Roman\"\, serif",
+				"css-var": '--font-base',
+			),
 			"code": "monospace, monospace",
-			"ui": "\"Nunito Sans\"\, -apple-system, BlinkMacSystemFont, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "\"Nunito Sans\"\, -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", "base"),
 		"weight": 900,
 		"line-height": 1,
@@ -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-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"),
+		),
 	),
 	// Border
 	"color": (
@@ -270,7 +294,10 @@ $config-pullquote: (
 $config-quote: (
 	// Font
 	"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"),
+		),
 	),
 );
 
@@ -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", "xl"),
 				"weight": 900,
 				"line-height": 1,
@@ -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,7 +356,10 @@ $config-header: (
 		),
 		// 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"),
 			"weight": 900,
 			"line-height": 1,
@@ -353,7 +389,10 @@ $config-footer: (
 	),
 	// 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", "xs"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "xs"),
 	),

brompton/sass/_extra-child-theme.scss

@@ -292,7 +292,7 @@ article .entry-header .entry-title,
 // Quote block
 .wp-block-quote {
   p {
-    font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
   }
 }
 
@@ -393,14 +393,14 @@ table,
 
 	.meta-nav {
 		color: #{map-deep-get($config-global, "color", "foreground", "default")};
-		font-family: #{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", "sm")};
 		font-weight: 900;
 		text-transform: uppercase;
 	}
 
 	.post-title {
-		font-family: #{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: normal;
 	}
@@ -511,7 +511,7 @@ table,
 
 	.reply {
 		color: #{map-deep-get($config-global, "color", "foreground", "light")};;
-		font-family: #{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", "base")};
 		font-weight: 900;
 		text-align: center;

brompton/sass/print.scss

@@ -35,6 +35,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 
   body {
     font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

brompton/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

brompton/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #252E36;
 	background-color: #E8E4DD;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -299,6 +304,7 @@ object {
 	color: #E8E4DD;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #252E36;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 900;
 }

brompton/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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 Name
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #252E36;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2197,6 +2212,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 900;
 	line-height: 0.66;
@@ -2343,7 +2359,7 @@ table th,
 .site-title {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2364,6 +2380,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2521,7 +2545,7 @@ table th,
 	color: #FFFFFF;
 	display: block;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 8px 0;
 }
@@ -2579,6 +2603,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2626,6 +2654,7 @@ table th,
 .site-info {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.69444rem;
 }
 
@@ -2700,7 +2729,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 16px;
 	color: currentColor;
@@ -2714,6 +2743,10 @@ table th,
 	color: rgba(255, 255, 255, 0.5);
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2838,6 +2871,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2865,6 +2899,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2927,6 +2962,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3046,6 +3082,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3148,6 +3185,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3179,6 +3217,7 @@ img#wpstats {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3828,6 +3867,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 }
 
 table td,
@@ -3913,6 +3953,7 @@ table th,
 .post-navigation .meta-nav {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	font-weight: 900;
 	text-transform: uppercase;
@@ -3920,6 +3961,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 0.83333rem;
 	font-weight: normal;
 }
@@ -4025,6 +4067,7 @@ table th,
 .comments-area .reply {
 	color: #666666;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	font-weight: 900;
 	text-align: center;

brompton/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Running a business is no small task. But with the right tools and support, creating a website doesn’t have to be another chore on your to-do list: enter Brompton, a simple yet powerful theme for small-business owners and entrepreneurs.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: brompton
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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 Name
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 900;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #252E36;
 	border-radius: 4px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.728rem;
 	font-weight: 900;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2202,6 +2217,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 900;
 	line-height: 0.66;
@@ -2360,7 +2376,7 @@ table th,
 .site-title {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2381,6 +2397,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2538,7 +2562,7 @@ table th,
 	color: #FFFFFF;
 	display: block;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 8px 0;
 }
@@ -2596,6 +2620,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2643,6 +2671,7 @@ table th,
 .site-info {
 	color: #FFFFFF;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.69444rem;
 }
 
@@ -2717,7 +2746,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 900;
 	padding: 16px;
 	color: currentColor;
@@ -2731,6 +2760,10 @@ table th,
 	color: rgba(255, 255, 255, 0.5);
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2855,6 +2888,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2882,6 +2916,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2944,6 +2979,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -3063,6 +3099,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3165,6 +3202,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3196,6 +3234,7 @@ img#wpstats {
 	color: #E8E4DD;
 	background-color: #C04239;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3857,6 +3896,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 
 .wp-block-quote p {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 }
 
 table td,
@@ -3942,6 +3982,7 @@ table th,
 .post-navigation .meta-nav {
 	color: #252E36;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	font-weight: 900;
 	text-transform: uppercase;
@@ -3949,6 +3990,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
+	font-family: var(--font-base, Lora, Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif);
 	font-size: 0.83333rem;
 	font-weight: normal;
 }
@@ -4054,6 +4096,7 @@ table th,
 .comments-area .reply {
 	color: #666666;
 	font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	font-weight: 900;
 	text-align: center;

coutoire/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "coutoire",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

coutoire/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coutoire",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Coutoire",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

coutoire/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"EB Garamond\", serif",
-			"secondary": "\"Work Sans\", sans-serif",
+			"primary": (
+				"fallback": "\"EB Garamond\", serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Work Sans\", 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", "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": 600,
 		"line-height": 1,
@@ -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", "xxxl"),
 				"weight": normal,
 				"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", "xxxl"),
 			),
 		),
@@ -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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "sm"),
 			"weight": 600,
 			"line-height": 1,
@@ -353,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"),
 	),

coutoire/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);

coutoire/sass/_extra-child-theme.scss

@@ -77,7 +77,7 @@ a {
 
 .sticky-post {
 	text-transform: uppercase;
-	font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+	@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 }
 
 #main .page-header {
@@ -86,7 +86,7 @@ a {
 
 	.page-title {
 		font-size: #{map-deep-get($config-global, "font", "size", "base")};
-		font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 		font-weight: 500;
 		text-transform: uppercase;
 		line-height: 1;

coutoire/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

coutoire/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

coutoire/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #444444;
 	background-color: white;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 17px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 600;
 	font-family: -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.83333em;
 	line-height: 1;
 	background-color: black;
@@ -398,6 +404,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -476,6 +483,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -573,6 +581,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 	line-height: 1;
@@ -632,6 +641,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728em;
 	letter-spacing: normal;
 }
@@ -643,6 +653,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 2.0736em;
 	letter-spacing: normal;
 	line-height: 1;
@@ -712,6 +723,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -728,6 +740,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #444444;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	font-size: 2.48832em;
 	letter-spacing: normal;
@@ -843,6 +856,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598em);
 	font-weight: 200;
 }

coutoire/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.16667px;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: -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;
 	background-color: black;
 	border-width: 0;
@@ -1423,6 +1429,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -1514,6 +1521,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1547,6 +1555,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -1631,6 +1640,7 @@ img {
 ul,
 ol {
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1645,6 +1655,7 @@ ol {
 
 dt {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 }
 
@@ -1718,6 +1729,7 @@ p.has-background {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1791,6 +1803,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -1870,6 +1883,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -2002,6 +2016,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -2196,6 +2211,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
@@ -2342,7 +2358,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.48832rem;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2363,6 +2379,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 2.48832rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 2.48832rem;
 }
 
@@ -2520,7 +2544,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 5px 0;
 }
@@ -2578,6 +2602,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2625,6 +2653,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2699,7 +2728,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2713,6 +2742,10 @@ table th,
 	color: #FF7A5C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2837,6 +2870,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2864,6 +2898,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2926,6 +2961,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2945,19 +2981,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3045,6 +3081,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 /**
@@ -3147,6 +3184,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3178,6 +3216,7 @@ img#wpstats {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3629,6 +3668,7 @@ a:hover, a:focus {
 .sticky-post {
 	text-transform: uppercase;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 }
 
 #main .page-header {
@@ -3638,6 +3678,7 @@ a:hover, a:focus {
 #main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 500;
 	text-transform: uppercase;
 	line-height: 1;

coutoire/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: coutoire
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.16667px;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: -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;
 	background-color: black;
 	border-width: 0;
@@ -1423,6 +1429,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: 200;
 	clear: both;
 }
@@ -1514,6 +1521,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1547,6 +1555,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	font-weight: 200;
 	line-height: 1;
@@ -1631,6 +1640,7 @@ img {
 ul,
 ol {
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1645,6 +1655,7 @@ ol {
 
 dt {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 }
 
@@ -1718,6 +1729,7 @@ p.has-background {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1791,6 +1803,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -1870,6 +1883,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.728rem;
 	letter-spacing: normal;
 	line-height: 1;
@@ -2002,6 +2016,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 table td,
@@ -2201,6 +2216,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: calc(2 * 2.98598rem);
 	font-weight: 200;
 	line-height: 0.66;
@@ -2359,7 +2375,7 @@ table th,
 .site-title {
 	color: black;
 	font-family: "EB Garamond", serif;
-	font-size: 2.48832rem;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2380,6 +2396,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 2.48832rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 2.48832rem;
 }
 
@@ -2537,7 +2561,7 @@ table th,
 	color: black;
 	display: block;
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 5px 0;
 }
@@ -2595,6 +2619,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 0.83333rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2642,6 +2670,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2716,7 +2745,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Work Sans", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 600;
 	padding: 10px;
 	color: currentColor;
@@ -2730,6 +2759,10 @@ table th,
 	color: #FF7A5C;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -2854,6 +2887,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2881,6 +2915,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2943,6 +2978,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2962,19 +2998,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3062,6 +3098,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 }
 
 /**
@@ -3164,6 +3201,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3195,6 +3233,7 @@ img#wpstats {
 	color: white;
 	background-color: black;
 	font-family: "EB Garamond", serif;
+	font-family: var(--font-headings, "EB Garamond", serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3658,6 +3697,7 @@ a:hover, a:focus {
 .sticky-post {
 	text-transform: uppercase;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 }
 
 #main .page-header {
@@ -3667,6 +3707,7 @@ a:hover, a:focus {
 #main .page-header .page-title {
 	font-size: 1rem;
 	font-family: "Work Sans", sans-serif;
+	font-family: var(--font-base, "Work Sans", sans-serif);
 	font-weight: 500;
 	text-transform: uppercase;
 	line-height: 1;

dalston/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -383,6 +383,15 @@
       "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==",
       "dev": true
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
@@ -3345,6 +3354,7 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -3352,7 +3362,8 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
         }
       }
     },
@@ -3410,6 +3421,7 @@
         "request": "^2.87.0",
         "rimraf": "2",
         "semver": "~5.3.0",
+        "tar": "^2.0.0",
         "which": "1"
       },
       "dependencies": {
@@ -3418,15 +3430,6 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
-        },
-        "tar": {
-          "version": "4.4.10",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.10.tgz",
-          "integrity": "sha512-g2SVs5QIxvo6OLp0GudTqEf05maawKUxXru104iaayWA09551tFCTI8f1Asb4lPfkBr91k07iL4c11XO3/b0tA==",
-          "requires": {
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2"
-          }
         }
       }
     },
@@ -4385,7 +4388,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -4820,6 +4824,17 @@
         "has-flag": "^3.0.0"
       }
     },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "dev": true,
+      "requires": {
+        "block-stream": "*",
+        "fstream": "^1.0.12",
+        "inherits": "2"
+      }
+    },
     "to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",

dalston/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalston",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Dalston",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

dalston/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
-			"secondary": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+			"primary": (
+				"fallback": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Crimson Text\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\"\, serif",
+				"css-var": '--font-base',
+			),
 			"code": "Menlo\, monaco\, Consolas\, Lucida Console\, 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": 600,
@@ -169,7 +181,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", "base"),
 		"weight": 600,
 		"line-height": 1,
@@ -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"),
+		),
 	),
 );
 
@@ -297,7 +324,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", "xxl"),
 				"weight": 600,
 				"line-height": 1,
@@ -307,7 +337,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", "xxl"),
 			),
 		),
@@ -322,7 +355,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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": 600,
 			"line-height": 1,
@@ -352,7 +388,10 @@ $config-footer: (
 	),
 	// 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", "xs"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

dalston/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);

dalston/sass/_extra-child-theme.scss

@@ -203,6 +203,7 @@ a {
 .site-description {
 	color: #{map-deep-get($config-header, "branding", "color", "text")};
 	line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
+	@include font-family( map-deep-get($config-header, "branding", "description", "font", "family") );
 }
 
 .site-title + .site-description {

dalston/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

dalston/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

dalston/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #1e1e1e;
 	background-color: #FFFFFF;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 19px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: #FFFFFF;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #0073AA;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.74901em;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #1e1e1e;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	font-size: 2.01136em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306em);
 	font-weight: 600;
 }

dalston/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.52174px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1rem;
 	background-color: #0073AA;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: 600;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.74901rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #0073AA;
 	display: block;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 0.75614rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #005177;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -3728,6 +3767,8 @@ a {
 .site-description {
 	color: #000000;
 	line-height: 1.2;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .site-title + .site-description {

dalston/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online portfolio impressively awesome with Dalston. With the ability to beautifully highlight your illustration and other projects, Dalston is also versatile enough to be your personal site too.
 Requires at least: WordPress 4.9.6
-Version: 1.0.1
+Version: 1.1.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: dalston
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.52174px;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 600;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1rem;
 	background-color: #0073AA;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	font-weight: 600;
 	line-height: 1.2;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.2;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: 600;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #000000;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 1.74901rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #0073AA;
 	display: block;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #767676;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 0.75614rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: 600;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #005177;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.2;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #0073AA;
 	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-headings, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -3757,6 +3796,8 @@ a {
 .site-description {
 	color: #000000;
 	line-height: 1.2;
+	font-family: "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Crimson Text", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 }
 
 .site-title + .site-description {

exford/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "exford",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

exford/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exford",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Exford",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

exford/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "\"Source Serif Pro\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\", serif",
+			"primary": (
+				"fallback": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Source Serif Pro\"\, \"Baskerville Old Face\"\, Garamond\, \"Times New Roman\", serif",
+				"css-var": '--font-base',
+			),
 			"code": "Monaco, Consolas, Lucida Console, monospace",
-			"ui": "\"Source Sans Pro\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "\"Source Sans Pro\"\, -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", "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", "sm"),
 		"weight": 700,
 		"line-height": 1,
@@ -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", "sm"),
@@ -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-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"),
+		),
 	),
 );
 
@@ -297,7 +324,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", "xl"),
 				"weight": 700,
 				"line-height": 1,
@@ -307,7 +337,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"),
 			),
 		),
@@ -322,7 +355,10 @@ $config-header: (
 		),
 		// 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", "base"),
 			"weight": 700,
 			"line-height": 1,
@@ -352,7 +388,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

exford/sass/_extra-child-theme.scss

@@ -320,6 +320,7 @@ a {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }
 
 /**

exford/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif ) ;
     line-height: 1.3;
     background: #fff !important;
     color: #000;

exford/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

exford/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #111111;
 	background-color: #FFFFFF;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333em;
 	line-height: 1;
 	background-color: #23883D;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	font-size: 1.728em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736em);
 	font-weight: 700;
 }

exford/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #23883D;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2193,6 +2208,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2339,7 +2355,7 @@ table th,
 .site-title {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2376,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2517,7 +2541,7 @@ table th,
 	color: #23883D;
 	display: block;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 8px 0;
 }
@@ -2575,6 +2599,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2622,6 +2650,7 @@ table th,
 .site-info {
 	color: #6E6E6E;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2696,7 +2725,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 16px;
 	color: currentColor;
@@ -2710,6 +2739,10 @@ table th,
 	color: #195f2b;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -2834,6 +2867,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2861,6 +2895,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2923,6 +2958,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2942,19 +2978,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3042,6 +3078,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3144,6 +3181,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3175,6 +3213,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3912,6 +3951,7 @@ p:not(.site-title) a:hover {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

exford/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Make your online presence as striking and stylish as your business with Exford.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: exford
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 16.66667px;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 	background-color: #23883D;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1999,6 +2013,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2198,6 +2213,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.0736rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2356,7 +2372,7 @@ table th,
 .site-title {
 	color: #111111;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.728rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2393,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.728rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2534,7 +2558,7 @@ table th,
 	color: #23883D;
 	display: block;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 8px 0;
 }
@@ -2592,6 +2616,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2639,6 +2667,7 @@ table th,
 .site-info {
 	color: #6E6E6E;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.83333rem;
 }
 
@@ -2713,7 +2742,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: 700;
 	padding: 16px;
 	color: currentColor;
@@ -2727,6 +2756,10 @@ table th,
 	color: #195f2b;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -2851,6 +2884,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.44rem;
 	font-weight: 600;
 }
@@ -2878,6 +2912,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2940,6 +2975,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif;
+	font-family: var(--font-base, "Source Serif Pro", "Baskerville Old Face", Garamond, "Times New Roman", serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2959,19 +2995,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #CCCCCC;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3059,6 +3095,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3161,6 +3198,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 }
@@ -3192,6 +3230,7 @@ img#wpstats {
 	color: #FFFFFF;
 	background-color: #23883D;
 	font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.83333rem;
 	line-height: 1;
@@ -3941,6 +3980,7 @@ p:not(.site-title) a:hover {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var(--font-base, inherit);
 }
 
 /**

hever/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

hever/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hever",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Hever",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

hever/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"primary": (
+				"fallback": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"PT Sans\"\, -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": "\"PT Sans\"\, -apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+			"ui": (
+				"fallback": "\"PT Sans\"\, -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", "base"),
 		"weight": bold,
 		"line-height": 1,
@@ -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", "xxl"),
 				"weight": bold,
 				"line-height": 1,
@@ -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", "xs"),
 			),
 		),
@@ -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"),
+			),
 			"size": map-deep-get($config-global, "font", "size", "base"),
 			"weight": bold,
 			"line-height": 1,
@@ -353,7 +389,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

hever/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without CSS custom properties support.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

hever/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: hever
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

hever/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #303030;
 	background-color: white;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 20px;
 	font-weight: normal;
 	line-height: 1.6;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1em;
 	line-height: 1;
 	background-color: #1279BE;
@@ -399,6 +405,7 @@ object {
 .wp-block-heading h5, h5, .h5,
 .wp-block-heading h6, h6, .h6 {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -477,6 +484,7 @@ object {
 
 .wp-block-latest-posts > li > a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087em;
 	letter-spacing: normal;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.74901em;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -713,6 +724,7 @@ hr {
 table th,
 .wp-block-table th {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #303030;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 2.01136em;
 	letter-spacing: normal;
@@ -844,6 +857,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.31306em);
 	font-weight: bold;
 }

hever/style-rtl.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: hever
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 17.3913px;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #1279BE;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #1279BE;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2197,6 +2212,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2343,7 +2359,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2364,6 +2380,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.75614rem;
 }
 
@@ -2521,7 +2545,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2579,6 +2603,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2626,6 +2654,7 @@ table th,
 .site-info {
 	color: #757575;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.86957rem;
 }
 
@@ -2700,7 +2729,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2714,6 +2743,10 @@ table th,
 	color: #303030;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2838,6 +2871,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2865,6 +2899,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2927,6 +2962,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2946,19 +2982,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #C5C5C5;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3046,6 +3082,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3148,6 +3185,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3179,6 +3217,7 @@ img#wpstats {
 	color: white;
 	background-color: #1279BE;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;

hever/style.css

@@ -6,12 +6,12 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A fully responsive theme, ideal for creating a strong — yet beautiful — online presence for your business.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: hever
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 17.3913px;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	line-height: 1.6;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1rem;
 	background-color: #1279BE;
 	border-radius: 5px;
@@ -1424,6 +1430,7 @@ h4, .h4,
 h5, .h5,
 h6, .h6 {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	clear: both;
 }
@@ -1515,6 +1522,7 @@ img {
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -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 {
@@ -1548,6 +1556,7 @@ img {
 
 .wp-block-latest-posts > li > a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	font-weight: bold;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: white;
 	background-color: #1279BE;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.52087rem;
 	letter-spacing: normal;
 	line-height: 1.125;
@@ -2003,6 +2017,7 @@ table,
 table th,
 .wp-block-table th {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 table td,
@@ -2202,6 +2217,7 @@ table th,
 
 .has-drop-cap:not(:focus)::first-letter {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: calc(2 * 2.31306rem);
 	font-weight: bold;
 	line-height: 0.66;
@@ -2360,7 +2376,7 @@ table th,
 .site-title {
 	color: #303030;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.74901rem;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2381,6 +2397,14 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.74901rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.75614rem;
 }
 
@@ -2538,7 +2562,7 @@ table th,
 	color: #303030;
 	display: block;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2596,6 +2620,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2643,6 +2671,7 @@ table th,
 .site-info {
 	color: #757575;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 0.86957rem;
 }
 
@@ -2717,7 +2746,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.86957rem;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2731,6 +2760,10 @@ table th,
 	color: #303030;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.86957rem;
+}
+
 .entry-title {
 	font-size: 2.01136rem;
 	letter-spacing: normal;
@@ -2855,6 +2888,7 @@ table th,
 
 .post-navigation .post-title {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.3225rem;
 	font-weight: 600;
 }
@@ -2882,6 +2916,7 @@ table th,
 
 .pagination .nav-links > * {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2944,6 +2979,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-base, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2963,19 +2999,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #C5C5C5;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3063,6 +3099,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 }
 
 /**
@@ -3165,6 +3202,7 @@ table th,
  */
 .comment-navigation a {
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-size: 1.15rem;
 	font-weight: 600;
 }
@@ -3196,6 +3234,7 @@ img#wpstats {
 	color: white;
 	background-color: #1279BE;
 	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	font-family: var(--font-headings, "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	font-size: 0.86957rem;
 	line-height: 1;

leven/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "leven",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

leven/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leven",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Leven",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

leven/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
-			"secondary": "\"Crimson Text\", sans-serif",
+			"primary": (
+				"fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "\"Crimson Text\", 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", "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", "md"),
 		"weight": 700,
 		"line-height": 1,
@@ -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", "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-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", "md"),
 				"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", "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", "base"),
 			"weight": bold,
 			"line-height": 1,
@@ -353,7 +389,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

leven/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);

leven/sass/_extra-child-theme.scss

@@ -7,7 +7,7 @@ html {
 }
 
 .has-small-font-size {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 }
 
 a {

leven/sass/print.scss

@@ -34,7 +34,8 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
   /* Fonts */
 
   body {
-    font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt Georgia, "Times New Roman", Times, serif; // For browsers without support for CSS custom properties.
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;

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

@@ -38,5 +38,5 @@
  */
 
 .has-small-font-size {
-	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 }

leven/sass/style-child-theme.scss

@@ -5,12 +5,12 @@ Author: the WordPress team
 Author URI: https://wordpress.org/
 Description: A colorful, typography driven, Gutenberg-ready theme meant to grab the attention of potential customers and market or sell products to them.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: leven
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.

leven/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
  */
@@ -163,6 +167,7 @@ body {
 	color: #444444;
 	background-color: #f7f7f6;
 	font-family: "Crimson Text", sans-serif;
+	font-family: var(--font-base, "Crimson Text", sans-serif);
 	font-size: 18px;
 	font-weight: normal;
 	line-height: 1.78;
@@ -299,6 +304,7 @@ object {
 	color: white;
 	font-weight: 700;
 	font-family: -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.2125em;
 	line-height: 1;
 	background-color: #ff302c;
@@ -399,6 +405,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-weight: 700;
 	clear: both;
 }
@@ -477,6 +484,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-size: 1.78256rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -574,6 +582,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-pullquote p {
 	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-size: 1.78256em;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -633,6 +642,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote p {
 	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-size: 1.78256em;
 	letter-spacing: -0.02em;
 }
@@ -644,6 +654,7 @@ p.has-background:not(.has-background-background-color) a {
 
 .wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
 	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-size: 2.16136em;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -713,6 +724,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);
 }
 
 table td,
@@ -729,6 +741,7 @@ table th,
 .editor-post-title__block .editor-post-title__input {
 	color: #444444;
 	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-weight: 700;
 	font-size: 2.62065em;
 	letter-spacing: -0.02em;
@@ -844,6 +857,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-size: calc(2 * 3.17754em);
 	font-weight: 700;
 }
@@ -982,4 +996,5 @@ table th,
  */
 .has-small-font-size {
 	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);
 }

leven/style-rtl.css

@@ -6,12 +6,12 @@ Author: the WordPress team
 Author URI: https://wordpress.org/
 Description: A colorful, typography driven, Gutenberg-ready theme meant to grab the attention of potential customers and market or sell products to them.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: leven
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.84536px;
 	font-family: "Crimson Text", sans-serif;
+	font-family: var(--font-base, "Crimson Text", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: -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.2125rem;
 	background-color: #ff302c;
 	border-radius: 9px;
@@ -1424,6 +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-weight: 700;
 	clear: both;
 }
@@ -1515,6 +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);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +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-size: 1.78256rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	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);
 	margin: 0;
 	padding-right: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	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-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #f7f7f6;
 	background-color: #ff302c;
 	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-weight: bold;
 	font-size: 0.82474rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	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-size: 1.78256rem;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	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-size: 1.78256rem;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -2003,6 +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);
 }
 
 table td,
@@ -2197,6 +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-size: calc(2 * 3.17754rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2343,7 +2359,7 @@ table th,
 .site-title {
 	color: #eea01a;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2125rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2364,6 +2380,14 @@ table th,
 .site-description {
 	color: currentColor;
 	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);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2125rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.82474rem;
 }
 
@@ -2521,7 +2545,7 @@ table th,
 	color: #1285ce;
 	display: block;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2579,6 +2603,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2626,6 +2654,7 @@ table th,
 .site-info {
 	color: #767676;
 	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-size: 0.82474rem;
 }
 
@@ -2700,7 +2729,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.82474rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2714,6 +2743,10 @@ table th,
 	color: #1285ce;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.82474rem;
+}
+
 .entry-title {
 	font-size: 2.62065rem;
 	letter-spacing: -0.02em;
@@ -2838,6 +2871,7 @@ table th,
 
 .post-navigation .post-title {
 	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-size: 1.47016rem;
 	font-weight: 600;
 }
@@ -2865,6 +2899,7 @@ table th,
 
 .pagination .nav-links > * {
 	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-size: 1.2125rem;
 	font-weight: 600;
 	padding-right: calc(0.66 * 16px);
@@ -2927,6 +2962,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", sans-serif;
+	font-family: var(--font-base, "Crimson Text", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2946,19 +2982,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-right: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-right: 32px;
 	}
 }
@@ -3046,6 +3082,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	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);
 }
 
 /**
@@ -3148,6 +3185,7 @@ table th,
  */
 .comment-navigation 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-size: 1.2125rem;
 	font-weight: 600;
 }
@@ -3179,6 +3217,7 @@ img#wpstats {
 	color: #f7f7f6;
 	background-color: #ff302c;
 	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-weight: bold;
 	font-size: 0.82474rem;
 	line-height: 1;
@@ -3566,6 +3605,7 @@ html {
 
 .has-small-font-size {
 	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);
 }
 
 a {

leven/style.css

@@ -6,12 +6,12 @@ Author: the WordPress team
 Author URI: https://wordpress.org/
 Description: A colorful, typography driven, Gutenberg-ready theme meant to grab the attention of potential customers and market or sell products to them.
 Requires at least: WordPress 4.9.6
-Version: 1.1.2
+Version: 1.2.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
 Text Domain: leven
-Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage
+Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, a8c-global-styles
 
 This theme, like WordPress, is licensed under the GPL.
 Use it to make something cool, have fun, and share what you've learned with others.
@@ -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
  */
@@ -582,6 +586,7 @@ html {
 html {
 	font-size: 14.84536px;
 	font-family: "Crimson Text", sans-serif;
+	font-family: var(--font-base, "Crimson Text", sans-serif);
 	line-height: 1.78;
 }
 
@@ -1081,6 +1086,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: 700;
 	font-family: -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.2125rem;
 	background-color: #ff302c;
 	border-radius: 9px;
@@ -1424,6 +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-weight: 700;
 	clear: both;
 }
@@ -1515,6 +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);
 }
 
 .wp-block-latest-comments .wp-block-latest-comments__comment-date {
@@ -1548,6 +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-size: 1.78256rem;
 	font-weight: 700;
 	line-height: 1.125;
@@ -1632,6 +1641,7 @@ img {
 ul,
 ol {
 	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);
 	margin: 0;
 	padding-left: 32px;
 }
@@ -1646,6 +1656,7 @@ ol {
 
 dt {
 	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-weight: bold;
 }
 
@@ -1719,6 +1730,7 @@ p.has-background {
 	color: #f7f7f6;
 	background-color: #ff302c;
 	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-weight: bold;
 	font-size: 0.82474rem;
 	line-height: 1;
@@ -1792,6 +1804,7 @@ p.has-background {
 
 .wp-block-pullquote p {
 	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-size: 1.78256rem;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -1871,6 +1884,7 @@ p.has-background {
 
 .wp-block-quote p {
 	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-size: 1.78256rem;
 	letter-spacing: -0.02em;
 	line-height: 1.125;
@@ -2003,6 +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);
 }
 
 table td,
@@ -2202,6 +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-size: calc(2 * 3.17754rem);
 	font-weight: 700;
 	line-height: 0.66;
@@ -2360,7 +2376,7 @@ table th,
 .site-title {
 	color: #eea01a;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2125rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2381,6 +2397,14 @@ table th,
 .site-description {
 	color: currentColor;
 	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);
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2125rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.82474rem;
 }
 
@@ -2538,7 +2562,7 @@ table th,
 	color: #1285ce;
 	display: block;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 4px 0;
 }
@@ -2596,6 +2620,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2643,6 +2671,7 @@ table th,
 .site-info {
 	color: #767676;
 	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-size: 0.82474rem;
 }
 
@@ -2717,7 +2746,7 @@ table th,
 
 .footer-navigation .footer-menu a {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.82474rem;
+	font-family: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
 	font-weight: bold;
 	padding: 8px;
 	color: currentColor;
@@ -2731,6 +2760,10 @@ table th,
 	color: #1285ce;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.82474rem;
+}
+
 .entry-title {
 	font-size: 2.62065rem;
 	letter-spacing: -0.02em;
@@ -2855,6 +2888,7 @@ table th,
 
 .post-navigation .post-title {
 	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-size: 1.47016rem;
 	font-weight: 600;
 }
@@ -2882,6 +2916,7 @@ table th,
 
 .pagination .nav-links > * {
 	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-size: 1.2125rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -2944,6 +2979,7 @@ table th,
 .comment-reply-title small {
 	font-size: 1rem;
 	font-family: "Crimson Text", sans-serif;
+	font-family: var(--font-base, "Crimson Text", sans-serif);
 	letter-spacing: normal;
 	line-height: 1.125;
 }
@@ -2963,19 +2999,19 @@ table th,
 	margin-bottom: 32px;
 }
 
-.children {
+.comment-list .children {
 	list-style: none;
 	padding-left: 16px;
 }
 
-.children > li {
+.comment-list .children > li {
 	border-top: 1px solid #DDDDDD;
 	margin-top: 32px;
 	margin-bottom: 32px;
 }
 
 @media only screen and (min-width: 560px) {
-	.children {
+	.comment-list .children {
 		padding-left: 32px;
 	}
 }
@@ -3063,6 +3099,7 @@ table th,
 .pingback .url,
 .trackback .url {
 	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);
 }
 
 /**
@@ -3165,6 +3202,7 @@ table th,
  */
 .comment-navigation 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-size: 1.2125rem;
 	font-weight: 600;
 }
@@ -3196,6 +3234,7 @@ img#wpstats {
 	color: #f7f7f6;
 	background-color: #ff302c;
 	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-weight: bold;
 	font-size: 0.82474rem;
 	line-height: 1;
@@ -3595,6 +3634,7 @@ html {
 
 .has-small-font-size {
 	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);
 }
 
 a {

mayland/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "mayland",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

mayland/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayland",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "mayland",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

mayland/print.css

@@ -27,6 +27,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 	/* Fonts */
 	body {
 		font: 13pt Georgia, "Times New Roman", Times, serif;
+		font: 13pt var(--font-base, Georgia, "Times New Roman", Times, serif);
 		line-height: 1.3;
 		background: #fff !important;
 		color: #000;

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

@@ -20,10 +20,19 @@ $config-global: (
 	"font": (
 		/* Font Family */
 		"family": (
-			"primary": "Poppins\, sans-serif",
-			"secondary": "Poppins\, serif",
+			"primary": (
+				"fallback": "Poppins\, sans-serif",
+				"css-var": '--font-headings',
+			),
+			"secondary": (
+				"fallback": "Poppins\, 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", "md"),
 			"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", "sm"),
 		"weight": 600,
 		"line-height": 1,
@@ -201,7 +216,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", "sm"),
@@ -240,7 +258,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"),
+		),
 	),
 );
 
@@ -250,7 +271,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": (
@@ -269,7 +293,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"),
+		),
 	),
 );
 
@@ -296,7 +323,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": 600,
 				"line-height": 1,
@@ -306,7 +336,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"),
 			),
 		),
@@ -321,7 +354,10 @@ $config-header: (
 		),
 		// 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"),
 			"weight": 400,
 			"line-height": 1,
@@ -351,7 +387,10 @@ $config-footer: (
 	),
 	// 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"),
 		"line-height": map-deep-get($config-global, "font", "line-height", "sm"),
 	),

mayland/sass/_extra-child-theme.scss

@@ -291,4 +291,5 @@ a {
 .widget_jp_blogs_i_follow li,
 .widget_rss_links li {
 	font-family: inherit;
+	font-family: var( --font-base, inherit );
 }

mayland/sass/print.scss

@@ -35,6 +35,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
 
   body {
     font: 13pt Georgia, "Times New Roman", Times, serif;
+    font: 13pt var( --font-base, Georgia, "Times New Roman", Times, serif );
     line-height: 1.3;
     background: #fff !important;
     color: #000;