Add self hosted Google Fonts to your Laravel App

Laravel Jetstream uses Google Fonts by default. That can be a problem in regard of GDPR. This short tutorial describes, how to self host your desired Google Fonts.

The first step is to use the Google Webfonts Helper to download the desired Google Fonts. In this tutorial, we use the default Nunito fonts. Select the desired font weights, select the default folder prefix (../fonts/), select “Modern Browsers”, download the font files and copy the CSS code.

In my case, the CSS looks like this:

/* nunito-regular - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Regular'), local('Nunito-Regular'),
       url('../fonts/nunito-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-600 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
       url('../fonts/nunito-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* nunito-700 - latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: local('Nunito Bold'), local('Nunito-Bold'),
       url('../fonts/nunito-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nunito-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

This CSS code should be added to your resources/css/app.css, right after:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

The next step is to add the downloaded font files to resources/fonts. You have to create this folder, it is not a default folder.

And that’s all. When you now run npm run prod, the font files are copied to public/fonts and the CSS file loads them from there.

I just found a better way to add self hosted fonts to Laravel, using GitHub - spatie/laravel-google-fonts: Cache & serve Google Fonts from your application

You can register the desired fonts and the package handels the rest. Great and simple!