Die Auswahl einer Schriftart ist ein wichtiger Aspekt, der einen einzigartigen Stil und eine einzigartige Atmosphäre auf einer Website definiert. Manchmal reichen Standardschriftarten nicht aus, um das beabsichtigte Design zu verwirklichen. In diesem Fall können Sie die geladenen Schriftarten verwenden. Dieser Artikel bietet eine schrittweise Anleitung zum Installieren einer heruntergeladenen Schriftart auf der Website.
Der erste Schritt ist, die Schriftart auf Ihren Computer herunterzuladen oder einen Link von einer Online-Ressource zu erhalten. Als nächstes müssen Sie einen Ordner mit dem Namen "fonts" auf Ihrem Webserver erstellen und die heruntergeladene Schriftart darin platzieren. Danach fügen Sie den CSS-Code hinzu, um die neue Schriftart an die Website anzuhängen.
In der CSS-Datei müssen Sie die spezielle @font-Face-Regel verwenden, die es dem Browser ermöglicht, die Schriftart vom Server herunterzuladen. In dieser Regel müssen Sie den Pfad der Schriftdatei, den Namen der Schriftdatei sowie die Formate ttf und woff angeben. Als nächstes müssen Sie Regeln für die Verwendung dieser Schriftart auf den gewünschten Seitenelementen festlegen, z. B. für Überschriften oder Textblöcke.
Denken Sie daran, dass das Anschließen einer heruntergeladenen Schriftart einige Zeit in Anspruch nehmen kann, daher wird empfohlen, alternative Schriftarten für die Zuverlässigkeit zu installieren. Es ist auch hilfreich zu überprüfen, wie die Schriftart auf verschiedenen Browsern und Geräten angezeigt wird.
Das Installieren einer heruntergeladenen Schriftart auf einer Website ist eine einfache und effektive Technik, mit der Sie einen einzigartigen Stil Ihres Webprojekts erstellen können. Wenn Sie diese Schritt-für-Schritt-Anleitung befolgen, können Sie die heruntergeladene Schriftart erfolgreich auf Ihrer Website verwenden und ihr ein ansprechendes Aussehen verleihen.
Festlegen der Zielschriftart einer Website
Bevor Sie eine Schriftart auswählen, überlegen Sie, welchen Stil und welche Emotionen Sie über Ihre Website vermitteln möchten. Möchten Sie moderne und stilvolle Schriftarten, traditionelle und formale Schriftarten oder verspielte und nicht standardmäßige Schriftarten verwenden?
Nachdem Sie sich für den Stil und die Emotionen entschieden haben, die Sie vermitteln möchten, untersuchen Sie die verschiedenen verfügbaren Schriftarten. Es gibt viele kostenlose und kostenpflichtige Schriftbibliotheken im Internet, die eine große Auswahl an Schriftarten in verschiedenen Stilen und Stimmungen bieten.
Analysieren Sie verschiedene Schriftarten, achten Sie auf ihre Lesbarkeit, ob sie für den Kontext Ihrer Website geeignet sind und auf verschiedenen Geräten und Browsern unterstützt werden.
Nachdem Sie eine bestimmte Schriftart ausgewählt haben, laden Sie sie auf Ihre Website hoch, indem Sie den restlichen Schritten dieser Anleitung folgen.
Laden einer Schriftdatei
- Wählen Sie die zu ladende Schriftdatei aus. Dies sind normalerweise Dateien mit Erweiterungen .otf, .ttf oder .woff.
- Speichern Sie die ausgewählte Schriftartdatei auf Ihrem Computer.
- Laden Sie die Schriftartdatei auf Ihren Server hoch oder verwenden Sie Dienste von Drittanbietern, um die Dateien zu speichern.
Nachdem Sie die Schriftdatei auf den Server heruntergeladen haben, sind Sie bereit, mit dem nächsten Schritt zur Installation der Schriftart auf Ihrer Website fortzufahren.
Erstellen eines Verzeichnisses für die Schriftarten auf dem Server
Um die heruntergeladene Schriftart auf der Website zu installieren, müssen Sie ein Verzeichnis auf dem Server erstellen, in das die Schriftdateien heruntergeladen werden. Befolgen Sie die Anweisungen:
- Öffnen Sie einen FTP-Client und stellen Sie eine Verbindung zu Ihrem Server her.
- Navigieren Sie zum Stammordner Ihrer Website.
- Erstellen Sie einen neuen Ordner, in den Sie Schriftarten herunterladen möchten. Klicken Sie dazu mit der rechten Maustaste und wählen Sie "Ordner erstellen".
- Geben Sie dem neuen Ordner einen aussagekräftigen Namen, z. B. "fonts".
- Öffnen Sie den erstellten Ordner "fonts".
- Laden Sie die Schriftdateien in diesen Ordner hoch. Sie können dazu Dateien vom Computer in das FTP-Clientfenster ziehen.
- Stellen Sie sicher, dass alle Schriftdateien erfolgreich heruntergeladen wurden.
- Die Installation der heruntergeladenen Schriftart auf der Website erfordert einige zusätzliche Schritte, die in den folgenden Abschnitten beschrieben werden.
Ändern der CSS-Datei, um die Schriftart zu verbinden
Um eine geladene Schriftart anzuhängen, müssen Sie der CSS-Datei eine spezielle Regel hinzufügen. Diese Regel gibt dem Browser an, wo die Datei mit der Schriftart gesucht werden soll und wie sie sie auf einer Webseite verwenden soll.
Öffnen Sie zunächst die CSS-Datei, die Sie für die Gestaltung Ihrer Website verwenden. Normalerweise heißt diese Datei style.css oder hat einen anderen Namen, den Sie beim Erstellen der Website verwendet haben.
Fügen Sie der CSS-Datei den folgenden Code hinzu:
| @font-face | |
| font-family: 'Schriftname'; | |
| src: url('Schreibdateipfad.Dateierweiterung'); | |
| > |
In diesem Code verwenden wir den @font-face-Selektor , um eine neue Schriftart zu definieren, die auf einer Webseite verwendet werden soll. Innerhalb des Selektors geben wir den gewünschten Schriftnamen in der font-family-Eigenschaft und den Pfad zur geladenen Schriftdatei in der src-Eigenschaft an.
Nachdem Sie diesen Code hinzugefügt haben, speichern Sie die CSS-Datei.
Die Schriftart wurde jetzt heruntergeladen und mit Ihrer Website verbunden. Um es jedoch auf einer bestimmten Webseite zu verwenden, müssen Sie Code hinzufügen, der auf die Verwendung dieser Schriftart hinweist.
Überprüfen der erfolgreichen Verbindung der Schriftart auf der Website
Nachdem Sie die heruntergeladene Schriftart auf Ihrer Website installiert haben, ist es wichtig zu überprüfen, ob die Verbindung erfolgreich hergestellt wurde. Dies kann mit den Webbrowser-Entwicklertools erfolgen.
Um die Schriftverbindung zu überprüfen, werden die folgenden Anweisungen für verschiedene Webbrowser angezeigt:
Google Chrome:
- Öffnen Sie die Entwicklertools, indem Sie mit der rechten Maustaste auf die Website klicken und "Code anzeigen" auswählen.
- Klicken Sie in den Entwicklertools auf die Registerkarte "Netzwerk".
- Aktualisieren Sie die Seite, um die Website neu zu laden.
- Suchen Sie die Schriftartanforderung in der Anforderungsliste und stellen Sie sicher, dass ihr Status für die erfolgreiche Verbindung 200 OK ist. Sie können auch den Namen der geladenen Schrift neben der Anforderung sehen.
Mozilla Firefox:
- Öffnen Sie die Entwicklertools, indem Sie mit der rechten Maustaste auf die Website klicken und "Element untersuchen" auswählen.
- Klicken Sie in den Entwicklertools auf die Registerkarte "Netzwerk".
- Aktualisieren Sie die Seite, um die Website neu zu laden.
- Suchen Sie die Schriftartanforderung in der Anforderungsliste und stellen Sie sicher, dass ihr Status für die erfolgreiche Verbindung 200 OK ist. Sie können auch den Namen der geladenen Schrift neben der Anforderung sehen.
Microsoft Edge:
- Öffnen Sie die Entwicklertools, indem Sie die Taste F12 auf Ihrer Tastatur drücken.
- Klicken Sie in den Entwicklertools auf die Registerkarte "Netzwerk".
- Aktualisieren Sie die Seite, um die Website neu zu laden.
- Suchen Sie die Schriftartanforderung in der Anforderungsliste und stellen Sie sicher, dass ihr Status für die erfolgreiche Verbindung 200 OK ist. Sie können auch den Namen der geladenen Schrift neben der Anforderung sehen.
Safari:
- Öffnen Sie die Entwicklertools, indem Sie zu Safari-Optionen - Erweitert - Entwicklungs-Menü anzeigen - Webinspektor-Tools anzeigen gehen. Wählen Sie dann die Registerkarte "Ressourcen" aus.
- Aktualisieren Sie die Seite, um die Website neu zu laden.
- Suchen Sie die Schriftanfrage in der Ressourcenliste und stellen Sie sicher, dass ihr Status für die erfolgreiche Verbindung 200 OK ist. Sie können auch den Namen der geladenen Schrift neben der Anforderung sehen.
Wenn Sie die Anforderung und den Verbindungsstatus einer Schriftart erfolgreich gesehen haben, bedeutet dies, dass die Schriftart erfolgreich auf Ihrer Website installiert und verbunden ist. Sie können es jetzt in Ihrem CSS-Code verwenden, um diese Schriftart für die entsprechenden Elemente auf Ihrer Website festzulegen.
