How to host font files locally and preload them

Steven     14.03.2021

Custom fonts are a great way to improve your online visual appearance. In order to make sure that custom fonts don’t slow down your website, make sure you (i) host the font files locally and (ii) preload them. This article describes the process of obtaining and serving font files from your own server, as well as preloading the right font file for faster website loading.

Host font files locally

Google Fonts contains over 1000 font families that can be put to use. Make your pick, and remember the font family you go with. There is an excellent helper app that serves you the files you need to host your font locally.

Besides offering you all files for local hosting, also the needed CSS snippet is included:

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/assistant-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/assistant-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/assistant-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/assistant-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/assistant-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/assistant-v6-latin-regular.svg#Assistant') format('svg'); /* Legacy iOS */
}

Preload font files in WordPress

Here, we advice to make a choice and not to load all files. Your visitor only needs one, and it makes most sense to only include the most modern / popular format, which is the *.woff2 format (WOFF 2 browser support info here). This does have the downsize it will be preloaded in old browsers, only not to be used afterwards. In our view, this does not compensate the huge gain in loading time for all newer browsers. Add the below code (adjust the font file path according to your needs) in your functions.php file.

// add any speed optimizations here - preload most important resources
function assistancy_add_preload(){
    echo '<link rel="preload" href="'. get_template_directory_uri() . '/fonts/assistant-v6-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">';
}
add_action( 'wp_head', 'assistancy_add_preload', 5);

The biggest gain in performance (and uptime reliability) comes from hosting the font files locally. Preloading them has a much smaller effect, mainly dependent on file size.

Comment

Related

Enforce strong passwords in WordPress, optimize password strength estimator

A very easy way to enforce strong passwords in Wordpress, is to disable the 'confirm weak password' checkbox. On top of this, we optimize the loading of the password strength estimator, zxcvbn.

The right way to serve responsive images (srcset and sizes attribute) with WordPress and Bootstrap 5

The most confusing thing when you inspect responsive images is the fact that the browser takes into account the DPR (Device Pixel Ratio) in order to download the most appropriate image size. Find out here how to serve your visitors responsive images.

WordPress 403 Forbidden after using WordPress app

Wordpress 403 Forbidden errors typically happen with corrupt .htaccess or faulty file/folder permissions. A third common cause is often overlooked: the use of the Wordpress app through XML-RPC.