Google Fonts bei Laravel App selbst hosten

Laravel Jetstream nutzt im Standard Google Fonts. Im Hinblick auf die DSGVO kann die Nutzung von Google Fonts jedoch problematisch sein. Aus diesem Grund beschreibt dieses Tutorial, wie du die entsprechenden Fonts lokal einbinden kannst, so dass keine Anfrage an die Google-Server stattfindet.

Im ersten Schritt rufst du den Google Webfonts Helper auf, um die gewünschten Schriftarten in den gewünschten Varianten zu laden. In diesem Tutorial wird exemplarisch die Schriftart Nunito genutzt.

Folgende Schritte durchführen:

  1. Schriftarten auswählen
  2. Wunsch-Ausgabeverzeichnis angeben (z.B. ../fonts/)
  3. „Modern Browsers“ auswählen
  4. Schrift-Dateien herunterladen und CSS-Code kopieren

In meinem Fall sieht der generierte CSS-Code wie folgt aus:

/* 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+ */
}

Dieser Code muss nun in die Datei resources/css/app.css eingefügt werden, und zwar direkt nach:

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

Im nächsten Schritt werden die geladenen Schrift-Dateien in das Verzeichnis resources/fonts abgelegt. Dieser Ordner muss manuell angelegt werden, er ist im Standard nicht vorhanden.

Anschließend per npm run prod die CSS-Datei neu erstellen lassen. In diesem Zuge werden auch die Schriften nach public/fonts kopiert, um zukünftig von dort geladen zu werden.

Der Aufruf von Google Fonts im <head>-Teil deines Templates kann nun entfernt werden.

Schreibe einen Kommentar