![]() ![]() When using the asynchronous approach, you must define the global variable WebFontConfig before the code that loads the Web Font Loader (as in the example above). It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events. The Web Font Loader configuration is defined by a global variable named WebFontConfig, or passed directly to the WebFont.load method. #WEBFONT LOADER INSTALL#Just npm install webfontloader and then require it in your code. ![]() Web Font Loader is also available on npm as a CommonJS module. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided. The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the wf-loading class on the HTML element as soon as Webfont.load has been called. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a Flash of Unstyled Text (FOUT). ![]() Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Var wf = d.createElement( 'script'), s = d.scripts For example, to load Typekit fonts asynchronously, you could use the following code. It is also possible to use the Web Font Loader asynchronously. Web Font Loader is also available on the jsDelivr & CDNJS CDNs. #WEBFONT LOADER UPDATE#You can manually update the Web Font Loader version number in the url when you want to adopt a new version. For performance reasons, we recommend using an explicit version number (such as 1.6.26) in urls when using the Web Font Loader in production. It will always load the latest 1.x version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. Note that the version in this url is less specific. Īlternatively, you can link to the latest 1.x version of the Web Font Loader by using as the script source. For example, you could load fonts from Google Fonts using the Web Font Loader hosted on Google Hosted Libraries using the following code. To use the Web Font Loader library, just include it in your page and tell it which fonts to load. It is co-developed by Google and Typekit. The Web Font Loader is able to load fonts from Google Fonts, Typekit,, and Fontdeck, as well as self-hosted web fonts. Wp_add_inline_style( 'my-theme-google-fonts', wptt_get_webfont_url(' subset=latin,latin-ext') ) Īfter using the webfont-loader performance improved as: After – Saved 1.Web Font Loader gives you added control when using linked fonts via It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. Wp_enqueue_style( 'my-theme-google-fonts', wptt_get_webfont_styles(' subset=latin,latin-ext'), array(), null ) Īdd the web-fonts with wp_add_inline_style() to load them inline. Same as typical example we can load the webfotns as below: // Load theme CORE css. Top ↑ # Load webfonts with wptt_get_webfont_styles() Load webfonts with wptt_get_webfont_styles() Its pretty simple with webfont-loader PHP class.īelow is the screenshot of my performance before using webfont-loader. #WEBFONT LOADER DOWNLOAD#We can download the fonts from Google and host them on our website. $fonts_url = add_query_arg( $query_args, "///css" ) īut, When I check it with Google Page Speed Insights then I found that it is render blocking asset which affects on performance. 'subset' => urlencode( 'latin,latin-ext' ), 'family' => urlencode( implode( '|', $font_families ) ), Genereate and return the Google fonts url. Wp_enqueue_style( 'my-theme-google-fonts', my_theme_google_fonts_url(), array(), null ) Wp_enqueue_style( 'my-theme-google-fonts', ' subset=latin,latin-ext', array(), null ) Wp_enqueue_style( 'my-theme', get_stylesheet_directory_uri(). Top ↑ # Typically load Webfonts Typically load Webfonts // Load theme CORE css. Here, I’m showing the demo for Google fonts. NOTE: It works for any web fonts in including the Google Fonts. To avoid the CDN links like Google fonts we can now use the function wptt_get_webfont_styles() to load the webfonts fonts. The only exception to that rule is Google-Fonts. Load webfonts with wptt_get_webfont_styles() # Information InformationĪccording to current WordPress Theme review guidelines for themes prohibit the use of CDNs to load assets due to privacy/tracking concerns. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |