Getting your website fonts to display correctly can be tricky. Just because there’s a little more to learn when working with online fonts, however, doesn’t mean you can’t have beautiful typography on your website. The thing is, online fonts only display correctly if the computer (or other devices) viewing the site has access to the same fonts. With print graphics and PowerPoint presentations, you have a little bit of control over whether the end-user will also have the same fonts; you can also convert fonts to outlines or present from your own laptop.
With web typography, however, you don’t have that level of control. Your site may be viewed by (hopefully) thousands if not millions of viewers who do not have the same fancy fonts installed on their systems as you do.
Therefore, in order to get the font to display correctly, you will have to give access to the font
when the website loads. This, unfortunately, requires resources to accomplish and can cause
the site to slow significantly which affects SEO. Here are four ways to get your fonts to load
quickly and efficiently.
Use the correct font format
There are many font formats that can be used on the web, but only two formats are really
needed if you don’t have to support Internet Explorer (IE) 8 or lower: woff and woff2. These are the only two file types you should use because they are compressed in the gzip format by
default (so they are very small), are optimised for the web, and are fully supported by IE 9+ and all other evergreen browsers.
Preload Fonts
By default, your site will delay font requests until after the render tree has already been
constructed.
I know that’s a little technical, so let me try and break it down into more human-friendly terms.
Basically, the browser waits to load a font until it is ready to “paint” the screen with elements.
The page tries to lazy load the font. In other words, the page tries to only load the font only
when it knows it’s needed. The problem is that once the page knows the font is needed it is too late, it has to wait to download the font. This increases the page load time significantly.
With font preloading, you can force a visitor’s browser to load important fonts early on so that the browser can start painting text as soon as it’s ready, rather than potentially waiting to load the font.
To preload a font all you need to do is add the rel = “preload” to the font declaration:
<link rel=”preload” href=”/assets/Pacifico-Bold.woff2″ as=”font” type=”font/woff2″ crossorigin>
Only load needed fonts
This should go without saying but if you are only using a 400 weight font on your site there is no reason to load the 500-700 weights that are never used. Only use the required fonts. By loading the other fonts you are needlessly using resources and making the size of your page needlessly large.
If you are using Google fonts this can be done when selecting the font.
As you can see in the right hand side you have an option to remove styles that are not needed.
Take full advantage of it to keep the page size as low as possible.
Avoid invisible text during font loading
Fonts are often large files that take a while to load even when gzipped. To deal with this, some browsers hide text until the font loads (the “flash of invisible text”). You can avoid the “flash” and show content to users immediately using a system font initially, then replacing it.
To do this you need to use the “swap” attribute. When declaring your font you can simply add the “swap” attribute to the declaration:
@font-face { font-family: ‘Custom Font’; font-weight: 400; font-style: normal; font-display:
swap; src: local(‘Custom Font’),url(‘/fonts/custom-font.woff2’) format(‘woff2’),
url(‘/fonts/custom-font.woff’) format(‘woff’);}
By using these four methods you can reduce your web page loading time significantly. This will have a tremendous effect on your site’s SEO. Google loves a fast site and the faster the better.
Fonts are often the cause of a slow site. They are often misunderstood how they affect a site.
Don’t let it baffle you further. Using these four methods will solve 90% of your font problems.
