Spatie introduced an awesome package called laravel-google-fonts, which can easily manage self-hosted Google Fonts in Laravel applications. This package makes self-hosting Google Fonts as frictionless as possible for Laravel users. To load fonts in your application, you've to register a Google Fonts embed URL and load it with the
@googlefonts Blade directive.
Google Fonts hosts an impressive catalog of fonts, but relying on it has its costs. By hosting fonts on an external domain, browsers need to perform an additional DNS lookup. This slows down the initial page load. In addition, you're directing your visitors to Google property, which privacy-minded users might not appreciate.
You can download fonts from Google Fonts and self-host them, but it's more work than embedding a code. Keeping up with the latest font version can also be a chore.
You can install the package via composer:
composer require spatie/laravel-google-fonts
You may optionally publish the config file:
php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"
Next, you've to add fonts to your application, So grab an embed code from Google fonts, register it in the config and use the
@googlefonts Blade directive.
// config/google-fonts.php return [ 'fonts' => [ 'default' => 'https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400;1,700&display=swap', 'code' => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap', ], ];
Next, You've to add
@googlefonts in the
head section of
//Loads Inter @googlefonts() //Loads IBM Plex Mono @googlefonts('code')
When fonts are requested the first time, this package will scrape the CSS, fetch the assets from Google's servers, store them locally, and render the CSS inline. This will inline the CSS, so the browser needs to do one less round-trip. If you prefer an external CSS file, you may disable the inline option in the package configuration.
Fonts are stored in a fonts folder on the public disk. You'll need to run php artisan
storage:link to ensure the files can be served over HTTP. If you wish to store fonts in the git repository, make sure
storage/app/public is not ignored.
If you want to serve fonts from a CDN, you may set up a different disk configuration.
If you want to make sure fonts are ready to go before anyone visits your site, you can prefetch them with this artisan command.
php artisan google-fonts:fetch
Google Fonts' servers sniff the visitor's user-agent header to determine which font format to serve. This means fonts work in all modern and legacy browsers. This package isn't able to tailor to different user agents. With the default configuration, only browsers that can handle WOFF 2.0 font files are supported. At the time of writing, this is >95% of all users according to caniuse. Most notably, IE doesn't support WOFF 2.0.
If you need to serve fonts to a legacy browser, you may specify a different user agent string in the configuration. Keep in mind that makes the page load heavier for all visitors, including modern browsers.
For more details, you can visit its documentation & source code on Github.
Published at : 17-12-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.