Removing Google Fonts and self-host it locally in Laravel projects

Read more about this decision on the website of the blog of noyb. It is also counterintuitively faster in most cases. One of the main arguments why using the Google Fonts CDN used to be a good idea was that many websites are using Google Fonts, so it was very likely that the font you are using for your website was already in the browser cache of the user. For privacy reasons, all major browsers stopped this form of caching between websites of different origin, so this is no longer an advantage. You can read more about the performance implications in this blog post from Simon Wicki.

Step 1: Find out where Google Fonts is embedded

Google Fonts in default error templates

Laravel uses Google Fonts in the default error template. Laravel not only uses the error templates for server error, but also for hopefully more commonly seen "404 Not Found" pages. To edit the default templates, run the following artisan command:

php artisan vendor:publish --tag=laravel-errors

The command copies the blade template file used for the error page into resources/views/errors. The following files in this directory contain Google Fonts:

• illustrated-layout.blade.php
• layout.blade.php
• minimal.blade.php

Laravel Nova default templates

Note: This chapter is only relevant if you use Laravel Nova.

Nova v4

Copy the default layout blade files from the vendor folder into your project directory.

mkdir resources/views/vendor/nova
cp vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php

Nova v3

Copy the default layout blade files from the vendor folder into your project directory.

mkdir resources/views/vendor/nova
cp vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php

mkdir resources/views/vendor/nova/auth
cp vendor/laravel/nova/resources/views/auth/layout.blade.php resources/views/vendor/nova/auth/layout.blade.php

Laravel Jetstream default templates

Note: This chapter is only relevant if you use Laravel Jetstream.

Livewire + Blade

After publishing the views, the layout file that contains the Google Font link can be found in resources/views/app.blade.php.

Inertia + Vue

After the installation, the following files contain a Google Fonts link tag:

• resources/views/layouts/app.blade.php
• resources/views/layouts/guest.blade.php

Find Google Fonts in your own code

Search for fonts.googleapis.com in all blade templates (folder resources/views).

Step 2: Replace it with a local self-hosted version of the font

There are multiple ways you can replace the just found Google Fonts with a locally hosted version. I will demonstrate two ways.

Version 1: Download with Google Webfonts Helper

The first method doesn't require installing a package. Just downloading a matching bundle from the Google Webfonts Helper.

Just search for the font, select the styles and charsets that you want and the path that you want to save the fonts in. I will take path /fonts/ in the example. Then the ZIP must be downloaded and unpacked in the appropriate folder. In the example this is the public/fonts folder.

After the fonts are stored in a public folder, replace the found Google Fonts CDN link tags with the downloaded CSS file.

Before:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

After:

<link rel="stylesheet" href="&#123;&#123; asset('fonts/nunito.css') &#125;&#125;">

Version 2: Use the laravel-google-fonts package from Spatie

If you do not want to download the fonts manually, you can use a package from Spatie that automates that process.

First, install the package with composer and publish the config file:

composer require spatie/laravel-google-fonts
php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"

Now add the href attribute of the fonts that you found to the fonts array in the google-fonts.php config file.

For the following font the config could look like this:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

// config/google-fonts.php

return [

	 // ...
	
    'fonts' => [
        'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700',
        'nunito' => 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap',
    ],
    
    // ...
];

To make sure that the font is never loaded directly from the Google Fonts CDN you have to set the fallback config to false.

// config/google-fonts.php

return [

	 // ...
	
    'fallback' => false,
    
    // ...
];

There are a few more configuration options. You can read more about those in the README of the package.

If you want to store the fonts in a object storage with a CDN in front, you can set the disk config option to an object storage file system.