Optimising Web Fonts to enhance Web Performance

Ifeoma Nwosu at Lazy Load '22
Sign up for Conffab Pro to watch this and hundreds of other videos for 19.95 a month

Hello, I'll be speaking on optimizing Web fonts to enhance Web performance.

Fonts, or rather typography is a very integral parts in Web development.

Optimization is important because it improves user experience-also contributes to brand consistency, and it also it helps to improve conversion.

For example, BBC confirms losing 10% of their customers because their websites loaded slowly.

And a website loading slowly, one of the contributing factors could be because of poor rendering of fonts.

And to be able to resolve this fonts can be optimized to enhance Web performance.

Fonts usually come either pre-installed, and we refer to this as system fonts, or we have Web fonts, custom Web fonts, and these can usually be self hosted, which is where you download it and you have it in your file, or it can be hosted by third-party for example, Google fonts.

Yeah.

So in situations where Web fonts are not downloadable we make use of these system fonts also refer to as Web 'websafe' fonts and they get displayed by default.

For Web fonts to be rendered properly, for example, and remain sharp while being zoomed into, we have, tgere are certain costs to pay.

And one of which is performance of the Web application.

But certain practices can be ensured so we avoid having Web performance issues.

So why are custom Web fonts important?

Custom Web fonts can be hosted locally.

That is self hosting, which I earlier mentioned, or via third-party hosting.

And I also mentioned that for example, Google fonts or fonts.com and because I've already defined what's custom Web fonts are they are important because well, brand consistency and the aesthetics of an application or a website, and this is why custom Web fonts are important.

So here I have an example of a website with no custom Web fonts and you can see how it looks.

It's not pleasing aesthetically it's doesn't have, it's not consistent.

It's-this is using a pre-installed system font.

This is Times New Roman, like we are all familiar with and you can see this does not look pleasing.

But here we have a website with the custom Web fonts and you see, this is, it, it looks it's readable.

Text is legible and also uniform.

So we have four main Web fonts formats, and by for main Web formats, this is, these are the formats in which a browser interprets fonts.

So we have the true type font, which was developed by Apple and Microsoft.

And it has been in use since the 1980s.

And then we have Web Open Font Format developed in 2009 and used across various major browsers.

For example, Google Chrome, Microsoft Edge.

Safari.

We have Embedded Open Type designed by Microsoft to be used for the embedded font on the Web.

And we have the Web Open Font Format 2, based off the Web Open Font Format, way better compressed version.

And it's the most modern version and can, and is recognized across every browser.

The oldest are true type font formats, and embedded open type font formats.

And Web Open Font Format, and Web Open Font Format 2 and most modern ones, especially Web Open Font Format 2, is the latest font format.

So Web Open Font Format is mostly used by modern Web browsers and helps with extra compression supports.

That is it compresses file sizes, in a situation where our font is being self hosted.

These are the font formats that we can use as opposed to fonts which are already hosted by third-party posting and where this is automatically done.

Where you are going to make your self hosted fonts, the Web font format is very important to take note of.

So how do we optimize Web fonts, right?

Which is the purpose why we are listening to this talk.

So we can optimize Web fonts are to be, They are to be optimized in a way that Web performance is enhanced by improving faster load times, better rendering of fonts and improving user experience.

Of course, while we are aware of popular rules, such as sticking to two fonts, which is one font for the heading and another ontf for the body of our application or the Web, there are other ways we can optimize Web fonts for a better experience.

So one of this is by loading just the font styles needed.

I mean, it's pretty easy to understand, right?

The CSS property for us to be able to make use of this in the code snippet I have here and making use of the CSS property for @font-face.

And so the font-face CSS rule makes it possible for a font to, to be lazy loaded.

And it does this that way only when the font is referenced in the styling sheet, that is when it'll be loaded.

In my code snippet here, I have have referenced a style, with font-family roboto, and referenced that every element with the p tag would be making use of this font roboto.

Now what's going to happen here is that when the Web page is loaded only in a situation where page has the P tag being rendered, and that is when this font is going to be downloaded.

That is when the roboto font is going to be downloaded date.

Remember that this is going to be used if it's a [?]. And that's the importance of the font-face CSS rule.

Roboto will be downloaded only when pages have the P tag.

This way, the font property makes it possible for font requests to be delayed until after page content is downloaded and this in turn enhances speed and performance.

Another way we can optimize Web fonts is by using Web font formats based on browser support.

Remember I stated four types of Web font formats we have, and the two most modern types.

Now WOFF2, which is the Web Open Font Format and the Web two and the Web Open Font Format are usually supported across a lot of browsers like Safari, Google Chrome, Firefox, as opposed to the other two, which are older.

And in the example are both.

We have here, I have the Web Open Font Format 2 specified first.

The Web Open Font Format is specified because it's is supported by a lot of browsers.

Now in a situation where our browser does not support this font format is, the Web, the Web Web Open Font Format is going to serve as a fallback, which is why we have two formats specified here-a situation where this doesn't work, the other works.

And the Web Open Font Format is usually prescribed because it also helps in compression.

Now another way we can optimize Web font formats is by reducing font sizes or reducing font's sizes by, font files, by compression.

And how is this possible?

When it's helping a situation where fonts, where Web fonts are self hosted, because unlke third-party hosted font, self-hosted fonts need to be compressed to improve faster load time and shorter time when rendering on the page.

And this is made possible by specifying the format: Web Open Font Format is recommended as the file format to be used.

As I having the widest browser support, it also reduces, its, it compression of font files by 30%, 30% more than the Web Open Font Format.

So this is why the Web Open Font Format 2 is highly recommended.

And, when making use of self-hosted fonts.

Another way we can optimize Web fonts is by making use of the fonts loading strategy.

Now, when we are, when we are rendering fonts, our, our browser makes use of, it has, its recognizes our fonts in two different with like-either to flash, we can use two different methods.

When we're trying to use font-loading strategy: we can make use of the 'flash of invisible text', of which it's abbreviation is known as FOIT, or we can make use of 'the flash of unstyled text' of it's abbreviation is known as FOUT.

Now what is FOIT?

FOIT is a situation where when it, it, fonts are not shown on the page til everything on the page til it gets rendered.

That way, the original font being used does not get loaded.

It doesn't get loaded til whenever it has been downloaded.

That is when it gets rebdered to this, to our screen, to the browser, because, to when has been downloaded.

But the flash of unstyled text, the situation where we make use of replacement text, usually system fonts, for example, Arial, or the Times New Roman, and pending when the custom Web fonts will be downloaded and rendered, the, the system fonts gets rendred while waiting for the completion of the download of the custom Web fonts.

And the moment the custom Web font has been downloaded it's quickly replaces the system font.

And you may have noticed this when using a website, you notice that when you use a website, the first one that gets rendered usually Times New Roman or something like Arial and then after about a second, because it usually takes just a second for the downloadable form for the custom Web fonts to, to get rendered.

So flash of unstyled text as a loading front loading strategy is usually preferred, over the flash of invisible text because the flash of invisible text does not show any text.

Til the custom Web font has been downloaded.

Now that is not, that is not advice because it doesn't make for a better user experience.

Imagine you open up the Web page and you can't do anything till, for, and takes that takes about three to four seconds till the text show on the page.

It's just a blank, white screen.

And in some cases where the images also might take time to load, you are looking at a blank screen, nothing else gets gets rendered.

But in the situation of the flash of unstyled text, we have some texts that will be rendered and that way it keeps your user more engaged.

Your user gets engaged on your app, on your application or on the screen.

And making use of the flash of invisible text is not exactly good for Web performance.

And because we are all about optimizing Web fonts for a better experience, the flash of unstyled text will be better font loading strategy to make use of.

Another way to optimize Web fonts, will be making use of the CSS font-display property.

And the CSS font-display property allows us to decide if you want to show a text, using the fall back fonts or hide it while the fonts is loading, which is basically what I explained with the flash of the font loading strategy, making use of the flash of invisible text or the flash of unstyled text.

That way you get to control what you want to do once the font has loaded, that is you continue to show the fall back font or replaces it with the custom font.

You can also do so on a per-element basis-specify your own timeout values for each font and even for a specific element.

And so here we have the font-display values.

We have the font-display auto, block, swap, fallback and optional.

And now I'm going to explain all of these values.

When the 'block' value is used, the font-display block value is used, it makes the text invisible for a shorter period, about three seconds.

It's like the flash of invisible text, but it's more effective.

And so here you can see the similarities between the font-display property and the font loading strategy, makings of the font loading strategy.

We also have the value 'swap'-it's similar to the flash of unstyled text, and it gives the font face.

Being loaded a shorter period.

By swapping it with the default back font til the custom Web fonts is loaded.

In this situation you would be making use of-say you have a font, a system font, Times New Roman.

And we would be using it as our fallback font.

And while we have our custom Web font say Roboto, in a situation where we make use of swap for font-display value, swap, what's going to happen is that the Times New Roman is going to be displayed while Roboto is being downloaded.

Maybe from our self-hosting.

Maybe from our self-hosting and our files or from a third-party hosting.

So swap is a lot similar to the flash of unstyled text, and block is a lot similar to the flash of invisible text.

Then we also have the font-display auto.

Just as name implies it's the browser's default behavior, which is the flash of invisible text.

That flash of invisible text is usually the way the browser would operate.

That is, it would try to specify, to render the font that is, that it has been told to render if we do not provide the fallback.

Then we also have the 'fallback' font-display value.

It's a lot similar to 'swap', which is also a lot similar to the flasher on unstyled text.

So fallback is similar to swap.

However, when too much time goes by, without the browser font being loaded, the browser uses the fallback throughout.

The fallback is similar to the swap because when our Web font fails to be loaded our custom Web font fails to be loaded, the browser is going to make use of the fallback.

Say fallback could be the Arial font, and it's going to make use of that font throughout.

Then we also have the 'optional' display value.

It's not mostly, it's usually not used a lot, not used widely.

So the, while, so the optional font-display value, no swapping with custom web fonts or cause if it's not loaded within the initial period.

So if period is going to be specified and when there's no swapping, although the font is downloaded and saved.

It also won't load font if there's a bandwidth limit.

So this is a situation where say whoever is making use of a website, has whoever is making use of a website has a very low bandwidth.

That is a situation where the [?] is making use of an edge and you have a font, and you have make of our custom Web font.

So in a situation where the internet is really slow.

Once it exceeds say three seconds of the webpage loading and the custom Web fonts has not been displayed, what is going to be displayed is the system font.

And once the system font has been displayed, once it's passed three seconds and that webpage has not completely rendered irrespective of whether the page is done rendering, the moment it's within three seconds and the font custom web font is not rendered, what is going to be used throughout is the fallback font.

So that this is the way the optional display value works.

So here is a code snippet that shows how, how the font-display value works.

And here we just have making use of the font face.

And here we are specifying the value of swap, which is a value that replaces the fallback when the font is completely loaded, loaded.

I remember I specified that it also works as the flash of unstyled text.

We also have the import property and can be used as an alternative to the font-display values.

So the imports you are it's usually used when we are making use of third-party hosting for fonts.

And here I have a link that links to Google.

This is at the Google fonts.

And here we are just making our imports property as an alternative.

So once you're making use of third-party a lot of the work to be done on your fonts as regards the format has already been covered-your import property.

So the import property is used when we are trying to make use of, want to display fonts from, and when you're making use of the import property, all you just have to do here-if you take a closer look, add the link.

We can see that here we are making use.

We, it's also provides an attribute that says display=swap.

It has a parameter that points to the fact that we are making use of the swap display.

The swap font-display value.

This is why it's all, this is why it's can also serve as an alternative instead of stating everything as we did earlier.

And so I have, these are all of the ways in which we can optimize Web fonts, and I hope I've been able to properly explain how important fonts are, what purpose they serve, and it's not just about a font being rendered on our pages, or on our screens for us to view.

There is, it's more than just it's being legible and there's other, there are other things involved in fonts being rendered on the page and how important it's to Web performance.

And so with this talk, I would, and this last point I am given, I will be able, I would conclude this talk and I would like to say, thank you for joining, and listening to this.

Hello I’m Ifeoma

Software Engineer (Frontend) at Kuda

Optimizing web fonts to enhance Web Performance

Why are Custom Web Fonts important?

No Custom Web fonts ❌

info.cer.ch

Screenshot of the original web page titled "World Wide Web"

Custom web fonts ✅

Stylised version of a Guthub page.

Four main Web Font Formats

Types of web font format

True Type Font(TTF)

developed by Apple and Microsoft, been in use since the 1980s.

Web Open Font Format 2(WOFF2)

based off WOFF but a better compressed version

Web Open Font Format (WOFF)

developed in 2009 and used across various major browsers eg. Google Chrome, Microsoft edge, Safari.

Embedded Open Type (EOT)

designed by Microsoft to be used for embedded fonts on the web.

So how do we Optimize Web Fonts?

Load Just Fonts Styles Needed

@font-face {
    font-family: 'Roboto', Times New Font;
    font-style: normal;
    font-weight: 700;
    font-display: auto; /* or block, swap, fallback, optional */
    src: local('Roboto'),
         url('/fonts/roboto.woff2') format('woff2'), /* will be preloaded */
         url('/fonts/roboto.woff') format('woff'),
  }

p{
 font-family: “Roboto”
}

Use web fonts format based on browser support

@font-face { font-family: 'Roboto'; src: local('Roboto'), local('Roboto'), url('fonts/roboto.woff2') format('woff2'), url('fonts/roboto.woff') format('woff'); }

Reduce font sizes by compression

Use Font Loading Strategy

BROWSER

FOIT

Flash Of Invisible Text

FOUT

Flash Of Unstyled Text

CSS @font-display Property

Font Display

Allows you Decide if you want to show text using a fallback font or hide it while the font is loading.

Control what you want to do once the font has loaded, i.e., continue to show the fallback font or replace it with the custom font. You can also do so on a per-element basis.

Specify your own timeout values for each font and even for a specific element.

Font Display Values

 /* Keyword values * /
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

Font Display Values

block:

makes the text invisible for a shorter period about 3 seconds. It's like FOIT but more effective.

swap:

Similar to FOUT and gives the font face being loaded a shorter period by swapping with fallback font till the custom web font is loaded

auto:

browser’s default behaviour which is FOIT

fallback:

Similar to swap however when too much time goes by without the web font being loaded browser uses the fallback throughout

optional:

No swapping with custom web fonts occurs if its not loaded within the initial period, although font is downloaded and saved, also wont load font if there’s bandwidth limit

Font Display

@font-face {
	font-family: Lato; src:
	url('/web/css/fonts/lato/lato-regular-webfont.woff2') format('woff2'),
	url('/web/css/fonts/lato/lato-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal; /* This value replaces fallback when font has loaded */
	font-display: swap;
}

body {
	font-family: Lato, sans-serif;
	font-weight: 400;
	font-style: normal;
}

@import Property as an alternative

@import url
	('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');}

Body {
	Font-family: ‘Roboto’, sans-serif;
}

Thanks!!

Any questions?