Google Fonts entfernen und lokal in Laravel-Projekten selbst hosten
Google Fonts selbst zu hosten hat, wenn es richtig gemacht wird, viele Vorteile. Erstens ist Google Fonts (der CDN-Dienst, nicht die Schriftarten selbst) in der EU für illegal erklärt worden. Wenn Sie als Website-Betreiber diese Verordnung einhalten wollen, ist es also eine gute Idee, selbst zu hosten.
Lesen Sie mehr über diese Entscheidung auf dem Blog von noyb. Außerdem ist es in den meisten Fällen wider Erwarten schneller, selbst zu hosten. Eines der Hauptargumente, warum die Verwendung des Google Fonts CDN eine gute Idee war, war, dass viele Websites Google Fonts verwenden, so dass es sehr wahrscheinlich war, dass die Schriftart, die Sie für Ihre Website verwenden, bereits im Browser-Cache des Benutzers war. Aus Gründen des Datenschutzes haben alle großen Browser diese Form der Zwischenspeicherung zwischen Websites unterschiedlicher Herkunft unterbunden, so dass dies nicht länger ein Vorteil ist. Weitere Informationen über die Auswirkungen auf die Leistung finden Sie in diesem Blogbeitrag von Simon Wicki.
Schritt 1: Finden Sie heraus, wo Google Fonts eingebettet ist
Google Fonts in Standard-Fehlermeldungs-Templates
Laravel verwendet Google Fonts in dem Standard-Fehlermeldungs-Template. Laravel verwendet das Fehlermeldungs-Template nicht nur für Serverfehler, sondern auch für die hoffentlich häufiger auftretenden "404 Nicht gefunden"-Seiten. Um die Standardvorlagen zu bearbeiten, führen Sie den folgenden artisan-Befehl aus:
php artisan vendor:publish --tag=laravel-errors
Der Befehl kopiert die für die Fehlerseite verwendete Blade-Template-Datei in resources/views/errors.
Die folgenden Dateien in diesem Ordner enthalten Google Fonts:
-
illustrated-layout.blade.php -
layout.blade.php -
minimal.blade.php
Laravel Nova Standard-Templates
Hinweis: Dieses Kapitel ist nur relevant, wenn Sie Laravel Nova verwenden.
Nova v4
Kopieren Sie die Standard-Layout-Blade-Dateien aus dem Ordner vendor in Ihr Projektverzeichnis.
mkdir resources/views/vendor/nova
cp vendor/laravel/nova/resources/views/layout.blade.php resources/views/vendor/nova/layout.blade.php
Nova v3
Kopieren Sie die Standard-Layout-Blade-Dateien aus dem Ordner vendor in Ihr Projektverzeichnis.
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 Standard-Templates
Hinweis: Dieses Kapitel ist nur relevant, wenn Sie Laravel Jetstream verwenden.
Livewire + Blade
Nach der Veröffentlichung der Views ist die Layout-Datei, die den Google Font-Link enthält, in resources/views/app.blade.php zu finden.
Inertia + Vue
Nach der Installation enthalten die folgenden Dateien einen Google Fonts link Tag:
-
resources/views/layouts/app.blade.php -
resources/views/layouts/guest.blade.php
Find Google Fonts in your own code
Suchen Sie in allen Blade-Vorlagen (Ordner resources/views) nach fonts.googleapis.com.
Schritt 2: Ersetzen Sie sie durch eine lokale, selbst gehostete Version der Schriftart
Es gibt mehrere Möglichkeiten, die gerade gefundenen Google Fonts durch eine lokal gehostete Version zu ersetzen. Ich werde zwei Wege demonstrieren.
Version 1: Herunterladen mit Google Webfonts Helper
Bei der ersten Methode muss kein Paket installiert werden. Sie laden einfach ein passendes Paket vom Google Webfonts Helper herunter.
Suchen Sie einfach nach der Schriftart, wählen Sie die gewünschten Stile und Zeichensätze aus und geben Sie den Pfad an, in dem Sie die Schriftarten speichern möchten. In diesem Beispiel nehme ich den Pfad /fonts/. Dann muss die ZIP-Datei heruntergeladen und in den entsprechenden Ordner entpackt werden. In diesem Beispiel ist dies der Ordner public/fonts.
Nachdem die Schriftarten in einem öffentlichen Ordner gespeichert wurden, ersetzen Sie die gefundenen Google Fonts CDN link-Tags durch die heruntergeladene CSS-Datei.
Davor:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
Danach:
<link rel="stylesheet" href="{{ asset('fonts/nunito.css') }}">
Version 2: Verwenden des Pakets laravel-google-fonts von Spatie
Wenn Sie die Schriftarten nicht manuell herunterladen möchten, können Sie ein Paket von Spatie verwenden, das diesen Vorgang automatisiert.
Installieren Sie zunächst das Paket mit Composer und veröffentlichen Sie die Konfigurationsdatei:
composer require spatie/laravel-google-fonts
php artisan vendor:publish --provider="Spatie\GoogleFonts\GoogleFontsServiceProvider" --tag="google-fonts-config"
Fügen Sie nun das Attribut href der gefundenen Schriftarten in das Array fonts in der Konfigurationsdatei google-fonts.php ein.
Für die folgende Schriftart könnte die Konfiguration wie folgt aussehen:
<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',
],
// ...
];
Um sicherzustellen, dass die Schriftart niemals direkt vom Google Fonts CDN geladen wird, müssen Sie die Konfiguration fallback auf false setzen.
// config/google-fonts.php
return [
// ...
'fallback' => false,
// ...
];
Es gibt noch ein paar weitere Konfigurationsoptionen. Sie können mehr über diese in der README des Pakets lesen.
Wenn Sie die Schriften in einem Object-Storage mit einem davor geschalteten CDN speichern wollen, können Sie die Konfigurationsoption disk auf ein Objektspeicher-Dateisystem setzen.