How to host font files locally and preload them

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.

google webfonts helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

https://google-webfonts-helper.herokuapp.com/fonts

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.