Merge pull request #14 from brainstormforce/css-embed

Version 1.0.9

- Improvement: Use CSS embed method for enqueueing TypeKit fonts. This should remove the slight delay in displaying the TypeKit fonts on the page,
- Fix: Post URL in the Block Editor goes behind the Editor Top Bar.

Author: Nikschavan

README.md

@@ -4,7 +4,7 @@
 **Tags:** custom typekit fonts, theme custom fonts, unlimited typekit custom fonts  
 **Requires at least:** 4.4  
 **Tested up to:** 5.0  
-**Stable tag:** 1.0.8  
+**Stable tag:** 1.0.9  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -49,6 +49,10 @@ If you're not using any of the supported plugins and theme, you can write the cu
 
 ## Changelog ##
 
+### v1.0.9 ###
+- Improvement: Use CSS embed method for enqueueing TypeKit fonts. This should remove the slight delay in displaying the TypeKit fonts on the page,
+- Fix: Post URL in the Block Editor goes behind the Editor Top Bar.
+
 ### v1.0.8 ###
 - Fixed: A few TypeKit fonts not being rendered correctly.
 

classes/class-custom-typekit-fonts-render.php

@@ -15,6 +15,8 @@
 	 */
 	class Custom_Typekit_Fonts_Render {
 
+		const TYPEKIT_EMBED_BASE = 'https://use.typekit.net/%s.css';
+
 		/**
 		 * Instance of Custom_Typekit_Fonts_Render
 		 *
@@ -62,7 +64,7 @@ public static function get_instance() {
 		 */
 		public function __construct() {
 
-			add_action( 'wp_head', array( $this, 'typekit_embed_head' ) );
+			add_action( 'wp_enqueue_scripts', array( $this, 'typekit_embed_css' ) );
 			// add Custom Font list into Astra customizer.
 			add_action( 'astra_customizer_font_list', array( $this, 'add_customizer_font_list' ) );
 			add_action( 'astra_render_fonts', array( $this, 'render_fonts' ) );
@@ -74,7 +76,7 @@ public function __construct() {
 			add_filter( 'elementor/fonts/groups', array( $this, 'elementor_group' ) );
 			add_filter( 'elementor/fonts/additional_fonts', array( $this, 'add_elementor_fonts' ) );
 
-			add_action( 'enqueue_block_editor_assets', array( $this, 'typekit_embed_head' ) );
+			add_action( 'enqueue_block_editor_assets', array( $this, 'typekit_embed_css' ) );
 		}
 
 		/**
@@ -115,28 +117,30 @@ public function add_elementor_fonts( $fonts ) {
 		}
 
 		/**
-		 * Add Script into wp head
+		 * Enqueue Typekit CSS.
 		 *
-		 * @since  1.0.0
+		 * @return void
 		 */
-		function typekit_embed_head() {
+		public function typekit_embed_css() {
+
+			if ( false !== $this->get_typekit_embed_url() ) {
+				wp_enqueue_style( 'custom-typekit-css', $this->get_typekit_embed_url(), array() );
+			}
+
+		}
+
+		/**
+		 * Get Typekit CSS embed URL
+		 *
+		 * @return String|Boolean If Kit ID is available the URL for typekit embed is returned.
+		 */
+		private function get_typekit_embed_url() {
 			$kit_info = get_option( 'custom-typekit-fonts' );
 			if ( empty( $kit_info['custom-typekit-font-details'] ) ) {
-				return;
+				return false;
 			}
-			?>
-			<script type="text/javascript">
-			(function(d) {
-				var config = {
-				kitId         : '<?php echo esc_js( $kit_info['custom-typekit-font-id'] ); ?>',
-				scriptTimeout : 3000,
-				async         : true
-				},
-				h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
-			})(document);
-			</script>
-
-			<?php
+
+			return sprintf( self::TYPEKIT_EMBED_BASE, $kit_info['custom-typekit-font-id'] );
 		}
 
 		/**

custom-typekit-fonts.php

@@ -6,7 +6,7 @@
  * Author:          Brainstorm Force
  * Author URI:      http://www.brainstormforce.com
  * Text Domain:     custom-typekit-fonts
- * Version:         1.0.8
+ * Version:         1.0.9
  *
  * @package         Typekit_Custom_Fonts
  */
@@ -25,7 +25,7 @@
 define( 'CUSTOM_TYPEKIT_FONTS_BASE', plugin_basename( CUSTOM_TYPEKIT_FONTS_FILE ) );
 define( 'CUSTOM_TYPEKIT_FONTS_DIR', plugin_dir_path( CUSTOM_TYPEKIT_FONTS_FILE ) );
 define( 'CUSTOM_TYPEKIT_FONTS_URI', plugins_url( '/', CUSTOM_TYPEKIT_FONTS_FILE ) );
-define( 'CUSTOM_TYPEKIT_FONTS_VER', '1.0.8' );
+define( 'CUSTOM_TYPEKIT_FONTS_VER', '1.0.9' );
 /**
  * BSF Custom Fonts
  */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "custom-typekit-fonts",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "main": "Gruntfile.js",
   "author": "YOUR NAME HERE",
   "devDependencies": {

readme.txt

@@ -4,7 +4,7 @@ Donate link: https://wpastra.com/
 Tags: custom typekit fonts, theme custom fonts, unlimited typekit custom fonts
 Requires at least: 4.4
 Tested up to: 5.0
-Stable tag: 1.0.8
+Stable tag: 1.0.9
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -49,6 +49,10 @@ If you're not using any of the supported plugins and theme, you can write the cu
 
 == Changelog ==
 
+= v1.0.9 =
+- Improvement: Use CSS embed method for enqueueing TypeKit fonts. This should remove the slight delay in displaying the TypeKit fonts on the page,
+- Fix: Post URL in the Block Editor goes behind the Editor Top Bar.
+
 = v1.0.8 =
 - Fixed: A few TypeKit fonts not being rendered correctly.