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

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.

Package.json for Bootstrap WordPress theme

Here are the basics to get started with a fully customizable Wordpress theme based on the Bootstrap framework. It uses Yarn as package manager, Esbuild and SASS for JS and SCSS compilation respectively.

Fontawesome performance 2 tips: better host locally and include only icons you actually use

Choose the right way to load and use Fontawesome icons. In this article we explain how to host the icons locally to minimize the number of external requests. Also, we optimize performance by only including used icons.