Anleitung zur Verwendung von Google Fonts mit Google und Plugins!

Wenn Sie ein Designer sind, betrachten Sie Typografie eher als Grundlage für jedes Website-Design. Wählen Sie nicht nur die Schriftarten aus, sondern verbessern Sie auch die Lesbarkeit von Webseiten.

Was ist Typografie?
Bei der Typografie dreht sich alles um die Auswahl von Zeilenlänge, Punktgröße, Zeilenabstand, Schriftarten und die Anpassung der Abstände zwischen den Buchstabengruppen.

Warum ist Google Fonts eine klare Wahl?
Es gab Zeiten, in denen das Internet Standardschriften hatte, die jeden langweilten, der sie betrachtete, aber im Laufe der Zeit waren die Webdesigner und Entwickler gezwungen, ihre Auswahl an Live-Textschriften einzuschränken und die Schriften zu entwerfen, die mit der größten Anzahl von Benutzern kompatibel sind das Internet. Sie kamen auf CSS3. Typekit hat es initiiert.

Typekit hat einige der verlockenden Schriftarten entwickelt, die Designern dabei halfen, ansprechende und benutzerfreundliche Schriftarten für ihre Webseiten auszuwählen, aber das einzige Problem bei der Verwendung von Typekit waren die Kosten, die sie ihren Benutzern in Rechnung stellen.

Der Preis betrug 49 US-Dollar, und falls ein Designer zwei Websites entwickeln wollte, musste er 99 US-Dollar nur für die Verwendung von Schriftarten auf der Webseite bezahlen. Danke an Google, das mit seinen brillanten Schriftdesigns kam und es kostenlos anbot.

Es ist ziemlich offensichtlich, dass Sie nicht alles umsonst bekommen, was Sie für Geld bekommen können, aber glauben Sie es, die Google Web Fonts waren immer noch die von Typekit angebotenen. Natürlich sind Google Webfonts am besten, wenn Sie nicht zu viel für Schriftarten ausgeben möchten, da Sie wissen, dass der Aufbau einer ganzen Website zu viel kostet.

Google Fonts und ihre Anpassung:
Stand heute gibt es über 647 Schriftarten separate Schriftfamilien in der Google-Bibliothek. Wenn Sie eine Schriftart für den Inhalt Ihrer Website auswählen, ist es zwingend erforderlich, sie auf ähnliche Weise anzuzeigen, wie Sie diese Schriftart implementieren werden. Einige Schriftarten sehen perfekt für Textinhalte aus, aber fürchterlich als Überschrift.

Glücklicherweise können Sie mit Google Web Fonts Ihre Vorschau an Ihren Anwendungsfall anpassen. Sie können benutzerdefinierten Vorschautext eingeben und die Vorschaugröße nach Belieben ändern. Es ist wichtig, eine Vorschau aller Kopfzeilen- oder Fließtexte anzuzeigen, die Sie in der Absatzansicht verwenden möchten, und wenn Sie viele Fließtexte haben, verwenden Sie nicht zu viele benutzerdefinierte Schriftarten.

Die richtige Schriftart finden!
Da wir wissen, dass wir mehr als sechshundert Schriftfamilien durchsuchen müssen, wird es schwierig, die richtige zu filtern und auszuwählen, indem man sie einfach einzeln durchblättert. Verwenden Sie also die folgenden Schritte, um genau das zu finden, was Sie für Ihre Website benötigen:

• Werfen Sie einen kurzen Blick auf die Schriftarten, die kürzlich von Google aktualisiert wurden. Die Chancen stehen gut, dass Sie die trendige und fehlerfreie Schriftart erhalten, ohne sich die restlichen Schriftarten ansehen zu müssen. Sehen Sie sich auch die Schriftarten an, die von den meisten Designern und Entwicklern verwendet werden. Auf diese Weise können Sie vielseitige Schriftarten kennenlernen, die Sie in mehreren Stilen und Breiten verwenden können.
• Wenn Sie die Schriftart für Ihre Website kennen, können Eigenschaften und Stil von Schriftarten Ihre Ergebnisse verbessern, z. B. wenn Sie eine handschriftliche Schriftart wünschen, deaktivieren Sie alle anderen Arten von Ergebnissen.
• Mit Google können Sie Ihre Schriftartensuche weiter verfeinern, indem Sie Dicke, Neigung und Breite des Zeichens als Filteroptionen hinzufügen. Ist es nicht cool, die beste Schriftart für Ihre Website zu finden?

Auswählen der Schriftarten
Google hat verschiedene Methoden, um die Schriftarten gemäß den Anforderungen eines Website-Eigentümers auszuwählen und dann zu implementieren. Hier gibt es nichts richtig oder falsch. Was auch immer das Beste für Sie ist, das bekommen Sie. Es unterstützt drei Schaltflächen, die Ihnen bei der Auswahl der richtigen Schriftart helfen:

• Schnellverwendung: Um schnell einen Blick auf die Schriftart zu werfen, die Ihnen gefällt.
• Pop-out: Um mehr über die Schriftart zu erfahren, die Ihnen gefällt, dh ihre Funktionalität und Verwendung.
• Sammlung: Wenn Sie mehr als zwei Schriftarten verwenden möchten, müssen Sie auf Sammlung klicken. Es fügt alle Schriftarten, die Sie mögen, auf einer einzigen Seite hinzu.

Wie verwendet man die Google Fonts?
Nachdem Sie die Schriftarten ausgewählt haben, die Sie auf Ihrer Webseite verwenden möchten, können Sie auf die Registerkarte „Verwenden“ klicken, um sie in Aktion zu sehen. Wenn Sie sich nun über die Schriftart sicher sind, brauchen Sie nur noch Code zu kopieren und auf Ihrer Webseite einzufügen. Sie erhalten drei Optionen zur Auswahl:

Standard:
Es ist ein Standard-Stylesheet-Link. Sie müssen es in den Head-Teil Ihrer HTML-Datei einfügen, wodurch Sie sich den Schritt ersparen, die @import-Regel hinzuzufügen, da Sie erheblich ein Stylesheet hinzufügen, das es bereits enthält. Beispiel:

CSS:
Verwenden Sie die CSS-@import-Regel, falls Sie in Ihrer Kopfzeile nicht auf das automatisch generierte Stylesheet verlinken möchten. Verwenden Sie den folgenden Code, um die Schriftarten in Ihr CSS zu integrieren:

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
Google und Typekit haben beide diesen Code hier als Teil des WebFont-Loaders entwickelt, um den Benutzern mehr Kontrolle über das Laden von Schriftarten zu geben.

Schnappen Sie sich ein HTML-Snippet und platzieren Sie es in der Nähe des HTML-Headers als:

Seitentitel

Wechseln Sie zum CSS und folgen Sie diesem:

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

Mit Hilfe von Plugins!
Es sind einige Plugins verfügbar, die eine nahtlose Google Font-Integration bieten. Die Verwendung von Plugins hat ihre Grenzen, da ein Plugin nicht weiß, nach einem bestimmten Text zu suchen, ohne es mit Hilfe von HTML oder CSS weiter anzupassen. Aber dennoch, hier sind einige Plugins, um Google-Schriftarten in Ihre Website einzubinden.

1. Schriftarten-Plugin

Es ist eine einfache und effektive Möglichkeit, Google-Schriftarten mit nur wenigen Klicks in Ihre Website einzufügen. Sie können entweder Ihr Stylesheet oder den CSS-Stil verwenden; beide werden daran arbeiten, sie an Ihr Thema anzupassen. Sie können dies im Admin-Bereich oder im Stylesheet Ihrer Website tun. Fonts Plugin ist alles, was Sie für Ihre Website benötigen, schnell und effizient.

2. Einfache Google-Schriftarten

Mit dem Easy Google Fonts-Plug-in müssen Sie keine Codierung vornehmen, um die Schriftarten auf Ihrer Website zu erhalten. Von der Auswahl über die Optimierung und Bereitstellung einzigartiger Farben bis hin zur Vorschau kann alles mit Schriftarten mit Easy Google Fonts erledigt werden.

3. TK-Google-Schriftarten

TK Google Fonts fügt alle 291 Google Webfonts zu Ihrem visuellen Editor-Panel hinzu, wenn Sie Seiten oder Beiträge entwickeln. Einfach installieren und loslegen.

Installieren der oben genannten Plugins:

• Melden Sie sich beim WordPress-Administrator an
• Klicken Sie auf „Plugins“
• Klicken Sie auf „Neu hinzufügen“
• Geben Sie den Namen des Plugins in der oberen rechten Ecke ein und klicken Sie auf „Jetzt installieren“.

So passen Sie die Plugins an

• Klicken Sie auf „Aussehen“ und dann auf „Anpassen“.
• Klicken Sie auf „Website besuchen“ und dann auf „Anpassen“
• Sie werden ein neu hinzugefügtes Menü als „Typografie“ bemerken.

Implementieren Sie das Lernen!
Wir hoffen, dass das Lesen des Artikels eine Lernstunde war, und jetzt ist es an der Zeit, dieses Wissen auf Ihrer Website einzusetzen. Durchsuchen Sie verschiedene Schriftarten und Plugins, um die Typografie Ihrer Websites zu verbessern. Denken Sie daran, dass das Anpassen einer Schriftart vorteilhafter ist, als nur eine Schriftart zu kopieren und einzufügen. Teilen Sie uns die Schriftarten und Methoden mit, die Sie verwenden, um Typografie hinzuzufügen, um Ihr Publikum in Ihren Projekten zu fesseln.

Schriftarten unterstreichen die ästhetische Form einer Website und sind die Grundlage für jedes Website-Design. Bei Schriftarten oder Typografie dreht sich alles um die Auswahl von Zeilenlänge, Punktgröße, Zeilenabstand, Schriftarten und die Anpassung der Abstände zwischen den Gruppenbuchstaben.

Als Designer ist es immer gut, Ihre Schriftartensuche weiter zu verfeinern, indem Sie Dicke, Neigung und Breite des Zeichens als Filteroptionen hinzufügen. Nicht alle Schriftarten sehen im Textkörper und/oder im Inhalt der Überschrift gut aus.

Einige Schriftarten sehen als Überschrift nicht gut aus und andere sind auf dem Textkörper nicht gut lesbar. Daher ist es ratsam, die ausgewählte Schriftart auf ähnliche Weise zu betrachten, wie Sie sie implementieren werden, damit Sie ihre Lesbarkeit testen können.

Vorbei sind die Zeiten, in denen das Internet die gleichen alten langweiligen Standardschriften hatte. Die fortschrittliche Technologie und Webdesigner und -entwickler waren gezwungen, Schriftarten zu entwerfen, die mit der größten Anzahl von Benutzern über das Internet kompatibel sind.

Sie kamen auf CSS3. Typekit hat es initiiert und einige der verlockenden und ansprechenden Schriftarten entwickelt, die Webdesigner verwenden können. Aber sie waren zu teuer. Zum Glück kam Google zur Rettung und bot brillante, benutzerfreundliche Schriftdesigns kostenlos an.

Die richtige Schriftart einleiten!

Derzeit liegt die Anzahl der Schriftarten in der Google-Bibliothek bei 647, was es schwierig macht, die richtige zu filtern und auszuwählen. Mit diesen 3 Schritten erhalten Sie jedoch genau das, was Sie für Ihre Website benötigen:

• Werfen Sie einen Blick auf die kürzlich aktualisierten Schriftarten auf Google und erhalten Sie eine trendige und fehlerfreie Schriftart. Schlagen Sie auch Schriftarten nach, die von den meisten Designern verwendet werden, um sich über die Vielseitigkeit von Schriftarten zu informieren, die Sie in mehreren Stilen und Breiten verwenden können.
• Kennen Sie die Schriftart für Ihre Website, die Merkmale und den Stil der Schriftarten, um Ihre Ergebnisse zu verbessern.
• Verfeinern Sie Ihre Schriftartensuche, indem Sie Dicke, Neigung und Breite des Zeichens als Filteroption hinzufügen.

Auswählen von Schriftarten

Abhängig von Ihren Anforderungen bietet Google mehrere Methoden, um Ihnen bei der Auswahl einer Schriftart zu helfen. Berücksichtigen Sie bei der Auswahl der richtigen Schriftart Folgendes:

Schnellzugriff – Um schnell einen Blick auf die Schriftart zu werfen, die Ihnen gefällt

Pop Out – Um mehr über die Schriftart zu erfahren, dh Funktionalität und Verwendung

Sammlung – Wenn Sie mehr als zwei Schriftarten verwenden möchten, klicken Sie auf diese Schaltfläche. Es fügt alle Schriftarten, die Sie mögen, auf einer einzigen Seite hinzu.

So verwenden Sie Google-Schriftarten

Nachdem Sie Ihre bevorzugte Schriftart ausgewählt haben, klicken Sie auf die Registerkarte „Verwenden“, um sie in Aktion zu sehen. Kopieren Sie dann Code und fügen Sie ihn auf Ihrer Webseite ein. Sie erhalten drei Optionen zur Auswahl:

Standard – Dies ist ein Standard-Stylesheet-Link. Platzieren Sie es im Kopfteil Ihrer HTML-Datei. Es erspart Ihnen den Schritt, die @import-Regel hinzuzufügen, da Sie ein Stylesheet, das sie bereits enthält, erheblich hinzufügen.

CSS – Verwenden Sie die CSS-@import-Regel, falls Sie nicht auf das automatisch generierte Stylesheet in Ihrem Header verlinken möchten . Verwenden Sie den folgenden Code, um die Schriftarten in Ihr CSS zu integrieren:

Schriftfamilie: 'Henry Pigeous', Serife;
Schriftfamilie: 'Diplomatic'. kursiv;

JavaScript – Google und Typekit haben beide diesen Code hier als Teil des Web Font Loader entwickelt, um den Benutzern mehr Kontrolle über das Laden von Schriftarten zu geben .

Schnappen Sie sich ein HTML-Snippet und platzieren Sie es in der Nähe des HTML-Headers als:

Seitentitel

Wechseln Sie zum CSS und folgen Sie diesem:

h1 {

Schriftart: 400 45px/0.5 'Diplomatic', Arial, serifenlos;

}

P {

Schriftart: 400 14px/1.5 'Henry Pegasus', Times, serif;

}

Über den Autor:
Catherrine Garcia ist eine erfahrene Webentwicklerin bei Hosting Facts und eine leidenschaftliche Bloggerin. Sie liebt es, ihr Wissen durch ihre Artikel über Webentwicklung und WordPress zu teilen.