In diesem Tutorial zeige ich Ihnen, wie Sie eine beliebige Google Web Font in Ihren Blogger-Blog hochladen. Es gibt ein paar Möglichkeiten, dies zu tun, aber so mache ich es.
Dieses Tutorial ist am besten für diejenigen geeignet, die über CSS-Kenntnisse verfügen. Für dieses Tutorial verwende ich die „Einfache“ Vorlage von Blogger.
Hier ist ein Beispiel für eine benutzerdefinierte Google Web-Schriftart, die auf unserer Lemon Macaron-Vorlage installiert ist.
Schritt 1
Bevor wir beginnen, empfehle ich immer, Ihre aktuelle Vorlage zu sichern, bevor Sie Änderungen vornehmen (nur für den Fall, dass etwas schief geht).
Sie können dies in Ihrem Dashboard tun, indem Sie auf Vorlage > Sichern / Wiederherstellen (in der oberen rechten Ecke) > Vollständige Vorlage herunterladen.
Schritt 2
Nachdem Sie Ihre Vorlage gesichert haben, klicken Sie auf HTML bearbeiten (wir befinden uns immer noch auf der Registerkarte „Vorlage“).
Schritt 3
Wenn Sie diese Seite geöffnet lassen, öffnen Sie einen neuen Tab oder ein neues Fenster und gehen Sie zur Google Web Fonts-Website. Suchen Sie nach der Schriftart, die Sie verwenden möchten, und wählen Sie Schnell verwenden.
Ich habe mich für die Schriftart ‚Lobster Two‘ entschieden.
Schritt 4
Für Abschnitt 1: Wählen Sie die gewünschten Stile, wählen Sie die gewünschten Stile für Ihre Schriftart (Sie können mehrere Stile auswählen). Denken Sie daran, dass die Auswahl zu vieler Stile Ihren Blog verlangsamen kann. Ich habe Normal 400 ausgewählt, wie Sie unten sehen können.
Für Abschnitt 3: Fügen Sie diesen Code zu Ihrer Website hinzu, klicken Sie auf die Registerkarte @import.
Schritt 5
Kopieren Sie die Informationen in das Feld @import.
Wenn Sie diese Seite nun geöffnet lassen, kehren Sie zu Ihrem Blog zurück (wo Sie HTML bearbeiten ausgewählt haben). Wir werden den Font-Import-Code in Ihre Vorlage einfügen.
Suchen Sie nach dem Folgetext, der sich am Anfang des Vorlageneditors befindet (normalerweise in den Zeilen 13 oder 14):
<b:skin>...</b:skin>
Fügen Sie nach dem Erweitern die Informationen ein, die Sie aus dem Feld @import auf der Google Web Fonts-Website kopiert haben, den folgenden Text:
/* Variable definitions
Es sollte so aussehen:
Klicken Sie auf Vorlage speichern. Ihre Schriftart wurde nun importiert! Jetzt können Sie die Schriftfamilie dort platzieren, wo sie in Ihrer Vorlage angezeigt werden soll.
Schritt 6
Ich zeige Ihnen schnell, wie Sie Ihre neu importierte Schriftart verwenden. In diesem Beispiel verwende ich die Schriftart für meinen Beitragstitel. Suchen Sie im HTML-Editor nach:
h3.post-title, .comments h4
Entfernen Sie die folgende Zeile:
font: $(post.title.font);
und ersetzen Sie es durch den in Abschnitt 4 aufgeführten Text: Integrieren Sie die Schriftarten in Ihr CSS auf der Google Web Fonts-Website.
font-family: 'Lobster Two', cursive;
Es sollte ungefähr so aussehen, sobald Sie die Informationen zur Schriftfamilie eingefügt haben:
