feat (perf) remove js font loading. css only

Cocola · Cocola · commit bb3f5de0cb1e · 2020-03-19T09:23:05.000+01:00
diff --git a/header.php b/header.php
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" <?php language_attributes( ); ?>> <![endif]-->
 <!--[if !(IE)]><! -->
-<html class="fonts-loading no-js" <?php language_attributes( ); ?>>
+<html class="no-js" <?php language_attributes( ); ?>>
 <!--<![endif]-->
 <head>
 	<script type="text/javascript">
diff --git a/inc/async/loadfont.php b/inc/async/loadfont.php
@@ -1,15 +1,2 @@
 <!-- Polyfill.io -->
 <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
-
-<script>
-    // inline loadJS
-    function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
-    // then load your JS
-    if (sessionStorage.getItem('fonts-loaded')) {
-        // fonts cached, add class to document
-        document.documentElement.classList.remove('fonts-loading');
-    } else {
-        // load script with font observing logic
-        loadJS('<?php echo get_theme_file_uri( '/src/js/vendor_async/fonts-css-async.js' );?>');
-    }
-</script>
diff --git a/src/js/vendor_async/fonts-css-async.js b/src/js/vendor_async/fonts-css-async.js
diff --git a/src/scss/abstract/_mixins.scss b/src/scss/abstract/_mixins.scss
@@ -279,10 +279,6 @@
 	line-height: $heading-line-height;
 	font-family: $customfont-2;
 
-	.fonts-loading & {
-		font-family: $font-sansserif;
-	}
-
 	@if $size == XXL {
 		font-size: 40px;
 
diff --git a/src/scss/base/_text.scss b/src/scss/base/_text.scss
@@ -30,11 +30,6 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	overflow-x: hidden;
-	//Fonts loading FOUT
-	//Adjust FOUT with tools like https://meowni.ca/font-style-matcher/
-	.fonts-loading & {
-		font-family: $font-sansserif;
-	}
 }
 
 a {
diff --git a/src/scss/wp/_wysiwyg.scss b/src/scss/wp/_wysiwyg.scss
@@ -1,15 +1,15 @@
 .wysiwyg {
 	@include clearfix;
 
-	// * {
-	// 	margin-bottom: $base-spacing;
+	>* {
+		margin-bottom: $base-spacing;
 
-	// 	&:last-child {
-	// 		margin-bottom: 0;
-	// 	}
-	// }
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
 
-	a:not([class]) {
+	>a:not([class]) {
 		text-decoration: underline;
 
 		@include hover {
@@ -27,6 +27,7 @@
 
 	img {
 		@include img__responsive;
+
 		&.alignright,
 		&.alignleft {
 			max-width: 50%;
diff --git a/src/templates/partials/footer.php b/src/templates/partials/footer.php
@@ -29,21 +29,6 @@
 		<!-- Polyfill.io -->
 		<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest,NodeList.prototype.forEach"></script>
 
-
-		<script>
-			// inline loadJS
-			function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
-
-			// then load your JS
-			if (sessionStorage.getItem('fonts-loaded')) {
-				// fonts cached, add class to document
-				document.documentElement.classList.remove('fonts-loading')
-			} else {
-				// load script with font observing logic
-				loadJS('assets/js/vendor_async/fonts-css-async.js')
-			}
-		</script>
-
 		<!-- Theme js -->
 		<?php
 		if ( is_readable( dirname( __FILE__ ) . '/../WebpackBuiltFiles.php' ) ) {
diff --git a/src/templates/partials/header.php b/src/templates/partials/header.php
@@ -2,7 +2,7 @@
 <!doctype html>
 <!--[if lte IE 9 ]> <html class="no-js ie lte-ie9 ie9" lang="fr"> <![endif]-->
 <!--[if !(IE)]><! -->
-<html class="fonts-loading no-js" lang="fr"><!--<![endif]-->
+<html class="no-js" lang="fr"><!--<![endif]-->
 	<head>
 
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
