COS-General

Wie kann ich Google Fonts auf meiner Seite hinzufügen?

Zuletzt aktualisiert am: April 19, 2016

Google Font Link-Tags können zur HTML der Kopfzeile hinzugefügt werden, oder ein @import-Code kann in Ihrer CSS-Datei oben hinzugefügt werden. Bevor Sie das machen, müssen Sie zunächst das Google-Font Script von Google ausfindig machen. Diese Anleitung zeigt die @import-Methode.

Ihr Google-Font Script erhalten

Gehen Sie bitte auf www.google.com/fonts und suchen Sie die gewünschte Schriftart. Klicken Sie auf die blaue Schaltfläche Add to Collection (Zur Kollektion hinzufügen) rechts neben der Schriftart.

Ihre Kollektion wird dann unten am Bildschirm angezeigt. Sobald sie angezeigt wurde, verwenden Sie die Schaltfläche Use (Verwenden) unten rechts am Bildschirm.

Nachdem Sie auf Use geklickt haben, scrollen Sie nach unten zu Schritt 3 und wählen Sie den Registerkarte @import und kopieren Sie das Script von Google - Zum Beispiel @import url(http://fonts.googleapis.com/css?family=Open+Sans);

Jetzt da Sie das Script kopiert haben, können Sie zurück in Ihr HubSpot gehen und die Google-Font anwenden.

Eine Google-Font auf Ihrer HubSpot COS Landing-Page anwenden

Machen Sie die Formatvorlage ausfindig, die auf Ihren Seiten angewendet wird. Sie können die Formatvorlage unter Inhalte > Design Manager finden.

Fügen Sie den @import-Code in die erste Zeile Ihrer CSS-Datei ein. Der Code muss in der ersten Zeile stehen, damit die Schriftart geladen wird.

Stellen Sie bitte dabei auch sicher, dass Sie das http: vom Script löschen. So kann die Schriftart laden, während Sie die Vorschau Ihrer HubSpot Landing-Page ansehen. Nachdem das Script eingefügt wurde, klicken Sie auf Änderungen speichern.

Jetzt da Sie Ihre Google-Schrift in die CSS-Datei eingefügt haben, können Sie die Schriftartfamilie als eine CSS-Eigenschaft im gesamten Code aufrufen. Mit anderen Worten, innerhalb Ihrer benutzerdefinierten CSS-Vorlage können Sie die Google Schriftart in jedem gewünschten CSS-Selektor anwenden, wie unten im Beispiel gezeigt. Stellen Sie daher sicher, dass die Schriftartenfamilie innerhalb Ihrer CCS-Selektoren festgelegt ist, damit sie die Google Schriftart verwenden können.

Vom Benutzer hinzugefügte Abbildung

Artikel zu verwandten Themen: