It was co-developed by Google and Typekit, and released as open source. The WebFont Loader is a JavaScript library that gives you extra control over font loading. Whatever your preference, the WebFont Loader can make all browsers behave the same way. Some people prefer Safari’s approach as it eliminates FOUT, others think the Firefox way is more appropriate as content can be read whilst fonts download. Opera and Firefox show text with the default font which switches over when the web font has loaded, resulting in the so-called Flash of Unstyled Text (aka FOUT). Safari, Chrome and Internet Explorer leave a blank space in place of the styled text while the web font is loading. However, browsers handle the loading of web fonts in different ways, and this can lead to inconsistent user experiences. If you have questions, please leave those below as well.Web fonts give us designers a whole new typographic palette with which to work. Thank you for reading and let me know about how you use the Web Font Loader library. If you are looking into fixing or improving the FOUT, you can look at this article. In my opinion, getting content to users is far more important than some unstyled content. You will have a bit of FOUT, flash of unstyled content, because the content will render with a fallback font and as soon as the Google Fonts are loaded they will be switched to the correct fonts. This does come with a small price to pay. Now that your Google Fonts are loading asynchronously, they will no longer be render-blocking. You can add more families by simply adding another array value. Notice how in the array families we have the family name, followed by the selected font weights. It would look like this: wp_add_inline_script( 'fontloader_js', 'WebFont.load() ', 'after' ) Otherwise, you would put the inline script as a string. If you are interested in seeing that full solution let me know in the comments. This is a solution I use for clients who may want to change what font families without editing the theme files. The inline script data as a string: get_font_loader()Īfter all that, our complete function call looks like this: wp_add_inline_script( 'fontloader_js', get_font_loader(), 'after' ) Īs you can see I use a function call to get the fonts to load.We call the wp_add_inline_script function directly after our enqueue function with the following parameters: For example, on this site I am currently using Assistant font from Google Fonts with weights of 400, 700 and 800. This is very easy to do in WordPress with the wp_add_inline_script function.ĭirectly after the function call we made to enqueue the JavaScript library, we need to add our custom script to tell the loader what fonts to load. All we need is to include an inline script below where we enqueued our Web Font Loader library. While looking at the documentation, it is very simple to load Google Fonts. '/js/webfont.js', NULL, '', true ) Īs long as your wp_footer action is placed correctly in your theme, you should see the script right before the tag. '/js/webfont.js'Īfter all that, our complete function call looks like this: wp_enqueue_script( 'fontloader_js', get_template_directory_uri(). Source (file location): get_template_directory_uri().We call the wp_enqueue_script function with the following parameters: Inside a function that is hooked into the wp_enqueue_scripts action, we will place our wp_enqueue_script function call. Now that the file is in our theme, we need to enqueue it in the footer. To do this we need to download the Web Font Loader library and host it in our theme. We want to load this file in the footer for best results. Enqueuing The Web Font Loader In WordPressįirstly, you have to enqueue the JavaScript library. I was able to completely eliminate render-blocking JavaScript and CSS in above-the-fold content. Since you can’t control how fast external resources load I would get inconsistent load times on different networks. In my experience, including the use of the Web Font Loader on my clients sites had the biggest improvement on Google Page Speed and mobile tests. This library also allows us to load fonts asynchronously, which allows the page content to load without waiting for fonts to load. The Web Font Loader is a JavaScript library that allows websites to load web fonts such as Google Fonts, TypeKit, and FontDeck. Improving WordPress Page Speed With The Web Font Loader
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |