Using Bunny Fonts in Laravel

Table of Contents

I've been using Bunny Fonts for quite a while now, after switching away from Google Fonts due to GDPR requirements and concerns.

But here's something that has always bothered me – adding a new font to an existing <link /> tag. You either need to reselect your existing fonts in Bunny's web interface or merge the two generated URLs manually.

So I've built a new package for Laravel to solve this problem and make things a whole lot simpler.


You can install the package via Composer:

composer require ryangjchandler/laravel-bunny-fonts

After installing the package, you have access to a nice "builder" API for registering your Bunny Fonts and rendering the necessary HTML tags.

Inside of a ServiceProvider, you can do the following:

use RyanChandler\BunnyFonts\Facades\BunnyFonts;
use RyanChandler\BunnyFonts\FontFamily;

BunnyFonts::add(FontFamily::Inter, [400, 500, 700]);

Then inside of a Blade template, you can use a Blade component or directive to render the relevant HTML.

<x-bunny-fonts />
<!-- or -->

I sometimes use different fonts in different places within the same Laravel application. Instead of loading all of the fonts all of the time, you can create different "font sets".

    ->add(FontFamily::Inter, [400, 500, 700]);

Then inside of the relevant Blade template:

<x-bunny-fonts set="shop" />
<!-- or -->

You might have noticed a FontFamily enumeration being used in the example above. This is an enum provided by the package.

Don't worry, I didn't sit there and write out all of the font families supported by Bunny. The code is actually generated ahead of time using a small script inside of the package and some data from Bunny Fonts.

If you're interested in the code, you can find it here.

Enjoyed this post or found it useful? Please consider sharing it on Twitter.