Initial try.

seedlet/assets/css/ie.css

@@ -1279,7 +1279,7 @@ button {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1292,7 +1292,7 @@ button {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1305,7 +1305,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1318,7 +1318,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1331,7 +1331,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1344,7 +1344,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -1357,7 +1357,7 @@ button[data-load-more-btn] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -2338,7 +2338,7 @@ object {
  * Block Options
  */
 .wp-block-button {
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	font-weight: normal;
 	line-height: 1;
@@ -5540,7 +5540,7 @@ nav a {
 	border-bottom: none;
 	color: #FFFFFF;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	line-height: 1;
 	padding: 23px 25px;
@@ -6188,7 +6188,7 @@ button {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6202,7 +6202,7 @@ button {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6216,7 +6216,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6230,7 +6230,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6244,7 +6244,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6258,7 +6258,7 @@ input[type="submit"] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;
@@ -6272,7 +6272,7 @@ button[data-load-more-btn] {
 	color: #FFFFFF;
 	cursor: pointer;
 	font-weight: normal;
-	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-family: --global--font-secondary;
 	font-size: 1em;
 	background-color: #3C8067;
 	border-radius: 4px;

seedlet/assets/css/variables-editor.css

@@ -4,10 +4,10 @@
 body {
 	/* Globals */
 	/* Font Family */
-	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
-	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
+	--global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
 	--global--font-code: monospace, monospace;
-	--global--font-ui: var(--global--font-secondary);
+	--global--font-ui: var(--font-base, --global--font-secondary);
 	/* Font Size */
 	--global--font-size-root: 18px;
 	--global--font-size-ratio: 1.2;

seedlet/assets/sass/abstracts/_config.scss

@@ -8,10 +8,10 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
 
 @mixin global-variables() {
 	/* Font Family */
-	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
-	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
+	--global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
 	--global--font-code: monospace, monospace;
-	--global--font-ui: var(--global--font-secondary);
+	--global--font-ui: var(--font-base, --global--font-secondary);
 
 	/* Font Size */
 	--global--font-size-root: #{$typescale-root};

seedlet/functions.php

@@ -254,6 +254,14 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 
 		// Add support for responsive embedded content.
 		add_theme_support( 'responsive-embeds' );
+
+		// Add support for WordPress.com Global Styles.
+		add_theme_support(
+			'jetpack-global-styles',
+			[
+				'enable_theme_default' => true,
+			]
+		);
 	}
 endif;
 add_action( 'after_setup_theme', 'seedlet_setup' );

seedlet/style-rtl.css

@@ -70,10 +70,10 @@ Included in theme screenshot.
 */
 :root {
 	/* Font Family */
-	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
-	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
+	--global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
 	--global--font-code: monospace, monospace;
-	--global--font-ui: var(--global--font-secondary);
+	--global--font-ui: var(--font-base, --global--font-secondary);
 	/* Font Size */
 	--global--font-size-root: 18px;
 	--global--font-size-ratio: 1.2;

seedlet/style.css

@@ -70,10 +70,10 @@ Included in theme screenshot.
 */
 :root {
 	/* Font Family */
-	--global--font-primary: 'Playfair Display', Georgia, Times, serif;
-	--global--font-secondary: 'Fira Sans', Helvetica, Arial, sans-serif;
+	--global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
+	--global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
 	--global--font-code: monospace, monospace;
-	--global--font-ui: var(--global--font-secondary);
+	--global--font-ui: var(--font-base, --global--font-secondary);
 	/* Font Size */
 	--global--font-size-root: 18px;
 	--global--font-size-ratio: 1.2;