Jan 23, 2022 by Thibault Debatty | 4590 views
https://cylab.be/blog/159/laravel-optimization-self-hosted-fonts
By default, Laravel (and Bootstrap) applications use fonts (like Nunito or Raleway) that are provided and hosted by Google. This is easy to use for developers, but comes with some drawbacks, including a performance penalty. Luckily, there is an open source project that makes it simple to use self-hosted fonts: fontsource.org
Using self-hosted fonts actually has multiple advantages:
Updated February 2022: A German court sentenced a website that used Google Fonts for transferring a user's personal data (his IP address) to Google without the individual's consent. One more reason to use self-hosted fonts!
Source: https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html
Finally, fontsource.org is a repository that contains fonts from Google, but also provides lots of other open source fonts.
To illustrate the performance impact of using self-hosted fonts, here is the analysis of a simple web application, performed with https://www.webpagetest.org/ For the test we chose to simulate a mobile user, connected through a 3G.
The waterfall diagram below reveals that this page requires to download 2 render blocking resources:
These are render blocking resources. Hence, as long as these 2 resources are not downloaded, the page remains desperately empty and white for the user. This means we can drastically improve the user experience by removing the call to fonts.googleapis.com!
On https://pagespeed.web.dev/ Google itself recommends to get rid of Google Fonts!
Fontsource is actually a collection of npm packages. You can find the list of available fonts at https://fontsource.org/fonts
For this example, we will install the nunito
font from fontsource, and remove the nunito
font from Google Fonts...
First, install the corresponding npm package:
npm install @fontsource/nunito
Then you can import the font in resources/sass/app.scss, and remove (or comment out) the import of the Google Font :
// https://cylab.be/blog/159/laravel-optimization-self-hosted-fonts
// @import url('https://fonts.googleapis.com/css?family=Nunito');
@import "@fontsource/nunito";
@import "~@fontsource/nunito/500.css";
As explained on the documentation page of @fontsource/nunito, @import "@fontsource/nunito";
will only import the font in normal weight. To load the bold version of the font (500), we added the line @import "~@fontsource/nunito/500.css";
Now we can recompile the resources with npm:
npm run prod
Finally, we can remove the lines related to Google fonts in resources/views/layouts/app.blade.php :
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
We can also use our font in any CSS file:
div.example {
font-family: "Nunito";
}
With self-hosted fonts from fontsource, we can see there is only one blocking resource (app.css
) left. This means our application is now rendered after 1.9 second.
And you'll also get a nice performance score on Google PageSpeed:
If it is not done yet, you can also:
This blog post is licensed under CC BY-SA 4.0