Enqueue fonts separately.

seedlet/assets/css/fonts-editor.css

@@ -0,0 +1,43 @@
+/**
+ * Font imports for the editor
+ */
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 400;
+  src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: bold;
+  font-weight: 500 900;
+  src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: italic;
+  src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 400;
+  src: url("../fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: bold;
+  font-weight: 500 900;
+  src: url("../fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  src: url("../fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype"); }

seedlet/assets/css/fonts.css

@@ -0,0 +1,43 @@
+/**
+ * Font imports for the editor
+ */
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 400;
+  src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: bold;
+  font-weight: 500 900;
+  src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Playfair Display';
+  font-display: swap;
+  font-style: italic;
+  src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 400;
+  src: url("./assets/fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: bold;
+  font-weight: 500 900;
+  src: url("./assets/fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype"); }
+
+@font-face {
+  font-family: 'Fira Sans';
+  font-display: swap;
+  font-style: italic;
+  font-weight: 100 900;
+  src: url("./assets/fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype"); }

seedlet/assets/css/ie.css

@@ -2009,53 +2009,6 @@ footer {
 	background-color: #EBF2F0;
 }
 
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: italic;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: italic;
-	font-weight: 100 900;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype");
-}
-
 /**
  * Elements
  * - Styles for basic HTML elemants

seedlet/assets/css/style-editor.css

@@ -288,53 +288,6 @@ body {
 /**
  * Output
  */
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: italic;
-	src: url("../fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("../fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("../fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: italic;
-	font-weight: 100 900;
-	src: url("../fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype");
-}
-
 body {
 	--wp--typography--line-height: var(--global--line-height-body);
 	color: var(--global--color-foreground);

seedlet/assets/sass/base/_editor.scss

@@ -1,6 +1,4 @@
 @import '../structure/responsive-logic';
-@import "fonts";
-@include add_fonts( '..' );
 
 body {
 	--wp--typography--line-height: var(--global--line-height-body);

seedlet/assets/sass/base/_style.scss

@@ -9,6 +9,4 @@
 @import "accessibility";
 @import "clearings";
 @import "measure";
-@import "text-selection";
-@import "fonts";
-@include add_fonts( './assets' );
+@import "text-selection";

seedlet/assets/sass/base/fonts/fonts-editor.scss

@@ -0,0 +1,6 @@
+/**
+ * Font imports for the editor
+ */
+
+@import "mixin";
+@include add_fonts( '..' );

seedlet/assets/sass/base/fonts/fonts.scss

@@ -0,0 +1,6 @@
+/**
+ * Font imports for the editor
+ */
+
+@import "mixin";
+@include add_fonts( './assets' );

seedlet/functions.php

@@ -107,7 +107,12 @@ if ( ! function_exists( 'seedlet_setup' ) ) :
 		add_theme_support( 'editor-styles' );
 
 		// Enqueue editor styles.
-		add_editor_style( './assets/css/style-editor.css' );
+		add_editor_style( 
+			array(
+				apply_filters( 'seedlet_editor_fonts', './assets/css/fonts-editor.css' ),
+				'./assets/css/style-editor.css',
+			)
+		);
 
 		// Add custom editor font sizes.
 		add_theme_support(
@@ -306,6 +311,9 @@ add_action( 'after_setup_theme', 'seedlet_content_width', 0 );
  * Enqueue scripts and styles.
  */
 function seedlet_scripts() {
+	// Fonts 
+	wp_enqueue_style( 'seedlet-fonts', get_template_directory_uri() . '/assets/css/fonts.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
+
 	// Theme styles
 	if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
 		// If IE 11 or below, use a flattened stylesheet with static values replacing CSS Variables
@@ -331,6 +339,14 @@ function seedlet_scripts() {
 }
 add_action( 'wp_enqueue_scripts', 'seedlet_scripts' );
 
+/**
+ * Allow the editor fonts to be filterable for child themes.
+ */
+function seedlet_filter_fonts_url( $editor_fonts_url ){
+	return $editor_fonts_url;
+}
+add_filter( 'seedlet_editor_fonts', 'seedlet_filter_fonts_url' );
+
 /**
  * Fix skip link focus in IE11.
  *

seedlet/package.json

@@ -39,6 +39,7 @@
   ],
   "scripts": {
     "start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
+    "build:fonts": "node-sass assets/sass/base/fonts -o assets/css",
     "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1",
     "build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1",
     "build:woocommerce": "node-sass assets/sass/style-woocommerce.scss assets/css/style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1",

seedlet/style-rtl.css

@@ -984,7 +984,7 @@ a:hover, a:focus {
 }
 
 a:active {
-	color: var(--wp--style--color--link);
+	color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 p.has-background.has-link-color:not(.has-background-background-color) a {

seedlet/style.css

@@ -1109,53 +1109,6 @@ footer {
 	background-color: var(--global--color-text-selection);
 }
 
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Playfair Display';
-	font-display: swap;
-	font-style: italic;
-	src: url("./assets/fonts/Playfair_Display/static/PlayfairDisplay-Italic.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: normal;
-	font-weight: 100 400;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: bold;
-	font-weight: 500 900;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Bold.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: 'Fira Sans';
-	font-display: swap;
-	font-style: italic;
-	font-weight: 100 900;
-	src: url("./assets/fonts/Fira_Sans/FiraSans-Italic.ttf") format("truetype");
-}
-
 /**
  * Elements
  * - Styles for basic HTML elemants