Web-Entwicklung erfordert heute nicht nur ein ordentliches Design, sondern auch die Verwendung verschiedener Schriftarten, um der Website Einzigartigkeit zu verleihen. Es kann jedoch schwierig sein, die gewünschte Schriftart auszuwählen und anzuschließen. In diesem Artikel erfahren Sie, wie Sie Schriftarten von Google Fonts richtig in CSS einbinden und Ihre Website attraktiver und lesbarer machen.
Google Fonts bietet eine große Auswahl an kostenlosen Schriftarten, die leicht mit Ihrer Website verbunden werden können. Der Vorteil von Google Fonts besteht darin, dass die Schriftarten auf einem Google-Server gehostet werden und von jeder Website heruntergeladen werden können. Dies ist praktisch und effektiv, da die Schriftarten parallel zu anderen Ressourcen der Website geladen werden und die Leistung nicht belasten. Darüber hinaus unterstützt Google Fonts eine Vielzahl von Schriftvarianten, die von einem grundlegenden Satz bis zu einem vollständigen Satz mit zusätzlichen Optionen und Symbolen reichen.
Um eine Schriftart von Google Fonts zu verbinden, müssen Sie die gewünschte Schriftart auf der offiziellen Website von Google Fonts auswählen. Nachdem Sie eine Schriftart ausgewählt haben, werden Sie aufgefordert, Schriftstile und -skalen auszuwählen. Wenn Sie bereits die gewünschten Einstellungen festgelegt haben, stellt Google Fonts Ihnen den Code zur Verfügung, den Sie in die CSS-Datei Ihrer Website einfügen möchten.
Hier ist ein Beispielcode mit einer Schriftart aus Google Fonts:
Warum verwenden Sie Schriftarten von Google Fonts in CSS
Die Verwendung von Schriftarten aus Google Fonts in CSS hat eine Reihe von Vorteilen, die diese Plattform zu einer beliebten Wahl für das Verbinden von Schriftarten auf Webseiten machen.
1. Große Auswahl an Schriftarten: Google Fonts bietet eine große Auswahl an Schriftarten in verschiedenen Stilen und Einstellungen, von klassischen Schriftarten bis hin zu experimentellen Schriftarten. Hier finden Sie die passende Schriftart für jedes Projekt, um die Einzigartigkeit und den visuellen Eindruck Ihrer Website zu verbessern.
2. Schnelles Laden: Schriftarten aus Google Fonts werden vom Cloud-Server von Google heruntergeladen, sodass sie schnell geladen und auf einer Webseite angezeigt werden können. Durch die globale Serververteilung werden die Schriftarten vom nächstgelegenen Server an den Benutzer übermittelt, wodurch die Ladezeit minimiert wird.
3. Einfache Verbindung: Es ist sehr einfach, eine Schriftart von Google Fonts in CSS einzubinden. Sie müssen nur den Schriftverweis in einem Abschnitt Ihrer HTML-Seite kopieren und einfügen und diese Schriftart in der font-family-Eigenschaft in der CSS-Datei angeben. Aus diesem Grund können Sie die Schriftarten auf Ihrer Website einfach mit nur wenigen Zeilen Code ändern.
4. Unterstützung für Mehrsprachigkeit: Google Fonts unterstützt mehrsprachige Schriftarten, sodass Sie Texte in verschiedenen Sprachen anzeigen können, ohne dass Zeichen angezeigt werden müssen, insbesondere bei Verwendung exotischer Alphabete und komplexer Schreibsysteme.
5. Kostenlos: Google Fonts ist eine völlig kostenlose Plattform, die es jedem zugänglich macht, der hochwertige Schriftarten ohne Lizenzbeschränkungen und Anhänge benötigt.
Durch die Verwendung von Schriften aus Google Fonts in CSS können Sie die visuelle Seite Ihrer Website erheblich verbessern und ein einzigartiges Design erstellen, ohne viel Zeit und Ressourcen zu verschwenden.
Wie wähle ich eine passende Schriftart aus
Die Auswahl der richtigen Schriftart für Ihre Website ist für ihre visuelle Gestaltung und die Wahrnehmung durch den Benutzer von großer Bedeutung. Die Schriftart sollte lesbar sein, der Stimmung Ihres Inhalts entsprechen und gut mit dem restlichen Design der Seite übereinstimmen.
Hier sind einige Tipps, mit denen Sie die richtige Schriftart auswählen können:
1. Bestimmen Sie den Zweck Ihrer Website:
Bevor Sie eine Schriftart auswählen, entscheiden Sie, welches Ziel Sie verfolgen. Zum Beispiel, wenn Ihre Website geschäftlich und geschäftlich ausgerichtet ist, werden Ihnen wahrscheinlich klassische und professionelle Schriftarten passen. Wenn Ihre Website unterhaltsam oder kreativ ist, können Sie Experimente mit exotischeren Schriftarten durchführen.
2. Lesbarkeit berücksichtigen:
Eine der wichtigsten Eigenschaften einer Schriftart ist ihre Lesbarkeit. Stellen Sie sicher, dass die ausgewählte Schriftart nicht nur stilvoll, sondern auch lesbar ist. Vermeiden Sie zu kleine oder zu dünne Schriftarten, die möglicherweise schwer lesbar sind. Stellen Sie außerdem sicher, dass die Hintergrundfarbe und die Textfarbe gut miteinander kontrastieren.
3. Stil beachten:
Die ausgewählte Schriftart muss dem Stil Ihrer Website entsprechen. Wenn Ihre Website beispielsweise einen klassischen Stil hat, sollten Sie sich auf Schriftarten mit traditionellem Design konzentrieren. Wenn die Schriftreihenfolge mit der Gesamtstruktur und dem visuellen Konzept der Website übereinstimmt, wird sie harmonischer und professioneller aussehen.
4. Kompatibilität prüfen:
Wenn Sie eine Schriftart auswählen, sollten Sie die Kompatibilität der Schriftart in Ihrem Webprojekt berücksichtigen. Stellen Sie sicher, dass die von Ihnen ausgewählte Schriftart von Ihren Zielbrowsern unterstützt wird. Berücksichtigen Sie auch die Ladezeit der Seite, da einige Schriftarten die Anzeigegeschwindigkeit der Website verlangsamen können.
Wenn Sie die Auswahl einer Schriftart sorgfältig angehen und all diese Faktoren berücksichtigen, können Sie mit Google Fonts eine einzigartige und ansprechende Website erstellen.
Abrufen des Codes zum Verbinden einer Schriftart
Führen Sie die folgenden Schritte aus, um eine Schriftart aus Google Fonts zu verbinden:
- Besuchen Sie die offizielle Google Fonts-Website unter https://fonts.google.com /.
- Suchen und wählen Sie die Schriftart aus, die Ihnen gefällt. Sie können Filter verwenden, um schnell nach einer geeigneten Schriftart zu suchen.
- Wenn Sie eine Schriftart ausgewählt haben, klicken Sie unter dem Namen der Schriftart auf die Schaltfläche "Stile auswählen". Hier können Sie verschiedene Schriftoptionen auswählen und die Schrifteinstellungen anpassen.
- Nachdem Sie die gewünschten Stile und Einstellungen ausgewählt haben, klicken Sie auf die Schaltfläche "Webcode einfügen" in der oberen rechten Ecke des Schriftfensters.
- Es öffnet sich ein Fenster mit dem Code, den Sie in die HTML-Datei Ihres Projekts einfügen möchten.
- Kopieren Sie den gesamten Code und fügen Sie ihn in das Tag in Ihrer HTML-Datei ein. Dies geschieht normalerweise unmittelbar nach dem Tag, das sich öffnet.
Nachdem Sie den Code eingefügt haben, wird die Schriftart mit Ihrem Projekt verbunden und Sie können sie mithilfe von CSS auf Elemente auf der Seite anwenden.
Verbinden einer Schriftart in einer CSS-Datei
Sie können den Google Fonts-Dienst verwenden, um eine Schriftart in einer CSS-Datei zu verbinden. Führen Sie die folgenden Schritte aus, um einer Webseite eine Schriftart hinzuzufügen:
- Öffnen Sie einen Webbrowser und rufen Sie die Google Fonts-Website auf.
- Wählen Sie die gewünschte Schriftart aus, überprüfen Sie die Schriftstile und passen Sie sie nach Belieben an.
- Nachdem Sie die gewünschte Schriftart ausgewählt und die Stile angepasst haben, kopieren Sie den Verbindungscode.
- Öffnen Sie die Datei mit den CSS-Stilen Ihres Projekts und fügen Sie den kopierten Schriftverbindungscode ein.
- Wenden Sie die ausgewählte Schriftart auf das gewünschte Element an, indem Sie den Namen in der font-family-Eigenschaft angeben. Zum Beispiel:
Ihr CSS-Code könnte folgendermaßen aussehen:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');bodyIn diesem Fall wird eine Roboto-Schriftart mit einem Gewicht von 400 und 700 angeschlossen. Als nächstes wird die Schriftart auf das Body-Element angewendet.
Nachdem Sie nun die gewünschte Schriftart eingefügt und angewendet haben, wird sie auf Ihrer Webseite angezeigt.
Überprüfen der Schriftverbindung
Nachdem eine Schriftart aus Google Fonts verbunden wurde, müssen Sie überprüfen, ob sie auf der Webseite korrekt angezeigt wird. Dazu können Sie den folgenden Code verwenden:
Beispiel für eine verbundene Schriftart:
Anstatt Schreibtitelname sie müssen den Namen der Schriftart angeben, die Sie überprüfen möchten. Wenn die Schriftart korrekt angeschlossen ist, sollte der Text mit der neuen Schriftart angezeigt werden. Wenn die Schriftart nicht angezeigt wird, wurde der Schriftname möglicherweise falsch angegeben oder es ist ein anderer Verbindungsfehler aufgetreten.
Erweiterte Verbindungsoptionen für Schriftart
Sie können die Verbindung einer Schriftart von Google Fonts zu CSS mit zusätzlichen Optionen anpassen. Sie bieten die Möglichkeit, verschiedene Schrifteinstellungen wie Gewicht, Schriftart und Stil zu ändern.
Einer der Parameter ist das Schriftgewicht, das mit Werten zwischen 100 und 900 angegeben werden kann, wobei 100 die dünnste Schriftart und 900 die fetteste ist. Um beispielsweise eine Schriftart mit mittlerem Gewicht zu verbinden, können Sie den Wert 500 verwenden:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');Wenn Sie mehrere Schriftarten verwenden möchten, können Sie die Schriftartoption durch kommagetrennte Werte mit mehreren Zeichen angeben. Um beispielsweise eine Schriftart mit den Zeichen "italic" und "regular" einzufügen, verwenden Sie den folgenden Code:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700&display=swap');Sie können den Schriftstil auch ändern, indem Sie eine entsprechende Option angeben. Der Wert "sans-serif" bedeutet ohne Serifen und "serif" bedeutet serifenfrei. Wenn Sie beispielsweise eine serifenlose Schriftart einbinden möchten, verwenden Sie den folgenden Code:
@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Lora&display=swap&family=Open+Sans&display=swap');Mithilfe der erweiterten Verbindungsoptionen für die Schriftart in Google Fonts können Sie das Erscheinungsbild der Schriftart an die Bedürfnisse des Entwicklers und des Website-Designs anpassen.
Folgerungen
Wenn Sie Schriftarten aus Google Fonts in CSS einbinden, können Sie eine große Auswahl verschiedener Schriftarten verwenden, um Webseiten zu gestalten. Darüber hinaus ist es einfach und schnell genug.
Der Verbindungsvorgang für eine Schriftart beginnt mit der Auswahl der gewünschten Schriftart auf der Google Fonts-Website. Dann kopieren wir den Schriftverweis und fügen ihn in das Tag im Abschnitt unseres HTML-Dokuments ein.
Als nächstes verwenden wir die ausgewählte Schriftart in unserem CSS-Code und schreiben ihren Namen in die font-family-Eigenschaft ein.
Außerdem können wir mehrere Schriftarten gleichzeitig verbinden, indem wir ihre Namen in der font-family-Eigenschaft durch Kommas getrennt angeben.
Darüber hinaus können wir einen normalen, kursiven oder fett formatierten Schriftstil mit der Eigenschaft font-style und/ oder font-weight festlegen.
Die Verwaltung von Schriftarten in CSS von Google Fonts ermöglicht Ihnen, ein einzigartiges Design von Webseiten zu erreichen und die Lesbarkeit von Text für Benutzer zu verbessern. Sei kreativ und experimentiere!
