So fügen Sie benutzerdefinierte Schriftarten wie ein Profi zu Squarespace hinzu

Möchten Sie benutzerdefinierte Schriftarten zu Squarespace hinzufügen?

Wenn Sie ein Squarespace-Benutzer sind, wissen Sie bereits, dass die Plattform einige solide Schriftartoptionen bietet. Aber es gibt viele Gründe, Schriftarten zu Squarespace-Websites hinzuzufügen!

Normalerweise handelt es sich um eine Markenschrift oder sogar um eine maßgeschneiderte Schriftart, die Sie erstellt haben.

Vielleicht geht es eher um ein bestimmtes Aussehen, das Sie für Elemente auf Ihrer Website erstellen möchten.

Was auch immer der Grund ist, es ist einfach, benutzerdefinierte Schriftarten zu Squarespace hinzuzufügen – folgen Sie einfach diesem Prozess!

So fügen Sie Ihrer Squarespace-Website eine benutzerdefinierte Schriftart hinzu

Das Hinzufügen einer von Ihnen ausgewählten Schriftart zu Ihrer Squarespace-Website ist ziemlich einfach, aber es muss ein wenig CSS hinzugefügt werden.

Stellen Sie sicher, dass Sie damit einverstanden sind, bevor Sie beginnen, oder schnappen Sie sich jemanden, der es ist.

Schritt 1. Wählen Sie Ihre Schriftart

Wenn Sie die Schriftart, die Sie verwenden möchten, bereits ausgewählt haben, fahren Sie mit dem nächsten Schritt fort. Stellen Sie andernfalls sicher, dass Sie eine Schriftart gewählt haben, die Sie legal in Ihrem Blog verwenden können.

Es gibt viele Orte, an denen Sie kostenlose und kostenpflichtige Schriftarten finden können, z. B. Creative Market. Überprüfen Sie jedoch die Lizenzierung, bevor Sie eine zu Ihrer Website hinzufügen.

Schritt 2. Bereiten Sie Ihre Webfont-Dateien vor

Um der Website eine Schriftart hinzuzufügen, benötigen Sie drei Dateiformate für Schriftarten:

1. .ttf oder .otf
2. .woff
3. .woff2

Manchmal haben Sie möglicherweise einen Webfont-Dateityp, und wenn ja, überspringen Sie diesen Schritt. Sie können genau das verwenden.

Halten Sie andernfalls die drei Dateitypen zum Hinzufügen bereit.

Schritt 3. Laden Sie Ihre Schriftdateien auf Squarespace hoch

Gehen Sie zu Design > Benutzerdefiniertes CSS > Benutzerdefinierte Dateien verwalten

Hier fügen Sie Schriftarten über die Upload-Schaltfläche hinzu.

Wiederholen Sie dies für alle drei Dateien oder für die Webfont-Datei, falls Sie diese haben.

Schritt 4. Benennen Sie Ihre benutzerdefinierte Schriftart in Squarespace

Sobald die Schriftart hochgeladen ist, müssen Sie Squarespace mit dem CSS-Editor mitteilen, wo und was sie ist.

Verwenden Sie den folgenden Code:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Nehmen Sie dies und fügen Sie die relevanten Informationen für Ihre Schriftart hinzu:

• Schriftartname: Ersetzen Sie dies durch den Namen Ihrer Schriftart basierend auf dem Dateinamen oder etwas, an das Sie sich erinnern werden.
• Schriftart-URLs: Ersetzen Sie dies durch die URL(s) der Schriftarten, die Sie gerade hochgeladen haben. Holen Sie sich die URL aus Ihrem Upload-Bereich (genauso wie Sie es für eine Bild-URL tun würden) und fügen Sie diese an Ort und Stelle hinzu.

Schritt 5. Definieren Sie, wo und wie die benutzerdefinierte Schriftart verwendet werden soll

Schließlich müssen Sie Squarespace nur noch mitteilen, wo die verschiedenen Schriftarten auf Ihrer Website verwendet werden sollen.

Dies kann an Stellen wie Ihren Kopfzeilen oder Website-Kopfzeilen, Schaltflächen oder sogar so etwas wie dem Newsletter-Block sein.

So verwenden Sie Ihre Schriftart an gemeinsamen Orten

Sobald Sie Ihre Schriftart hochgeladen haben, können Sie Squarespace spezifische Informationen darüber geben, wo Sie sie verwenden können.

Hier sind ein paar beliebte Beispiele und wie man es macht.

So ändern Sie die Schriftarten der Website-Kopfzeile

Der Website-Header ist der Bereich oben in der Navigationsleiste.

Möglicherweise haben Sie hier viele Links, ein Textlogo und vielleicht eine Ankündigung.

Die Schriftart von all diesen kann mit dem folgenden CSS-Snippet geändert werden:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Denken Sie daran, IHRENNAME durch den Namen Ihrer Schriftart zu ersetzen.

So ändern Sie die Schaltflächenschriftarten

Ein weiterer beliebter Ort, um benutzerdefinierte Schriftarten zu verwenden, sind die Schaltflächen Ihrer Website.

Es gibt drei Schaltflächenblöcke: Klein, Mittel und Groß. Sie können einen oder alle mit dem folgenden Code ändern:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Denken Sie daran, IHRENNAME durch den Namen Ihrer Schriftart zu ersetzen.

Pinne es auf Pinterest, damit du später wiederkommen kannst!

(Weitere Tipps zu benutzerdefinierten Schriftarten und Fehlerbehebung nach der Grafik).

So ändern Sie die Schriftarten des Newsletter-Blocks

Der Newsletter-Block ermöglicht es Leuten, sich für Ihre E-Mail-Liste anzumelden. Viele Leute verwenden dafür verschiedene Plugins.

Wenn Sie den Block jedoch innerhalb von Squarespace verwenden, können Sie mit dem folgenden Code eine benutzerdefinierte Schriftart hinzufügen.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Denken Sie daran, IHRENNAME durch den Namen Ihrer Schriftart zu ersetzen.

So ändern Sie die Blog-Post-Schriftarten

Eines der beliebtesten Dinge, die man mit einer Schriftart machen kann, ist die Verwendung für Blog-Posts.

Dabei müssen Sie Seitentitel, Beschreibungen und Beitragstitel auf Artikelseiten berücksichtigen.

Sie werden wahrscheinlich wollen, dass sie alle gleich sind.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Denken Sie daran, IHRENNAME durch den Namen Ihrer Schriftart zu ersetzen.

So ändern Sie die Zitatblock-Schriftarten

Das letzte Beispiel besteht darin, den Zitatblock in eine andere Schriftart zu ändern.

Dies wird für Zitate in Posts verwendet, aber auch für Dinge wie Kundenreferenzen oder Rezensionen.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Denken Sie daran, IHRENNAME durch den Namen Ihrer Schriftart zu ersetzen.

Vielleicht gefällt dir auch mein Squarespace-Leitfaden zur Bildgröße.

Probleme mit benutzerdefinierten Schriftarten

Das Hinzufügen von Schriftarten ist eine einfache Aufgabe, sobald Sie ein wenig CSS beherrschen. Es gibt jedoch einige häufige Fehler, die gemeldet werden.

Meldung „Nicht unterstützte Schriftarten“ in Website-Stilen

Gelegentlich wird auf Ihrer Website möglicherweise die Meldung „Nicht unterstützte Schriftarten“ angezeigt. Dies geschieht, wenn eine Adobe-Schriftart verwendet wird und diese dann von Adobe zurückgezogen wird.

Meistens ersetzt Squarespace es durch die nächstliegende Alternative. Aber wenn nicht, müssen Sie möglicherweise eine andere Schriftart hochladen, um sie zu ersetzen.

Meine Schriftart sieht anders aus, wenn ich angemeldet bin

Manchmal bemerken Leute, dass ihre Schriftarten anders aussehen, wenn sie eingeloggt sind und wenn sie die Live-Site ansehen. Normalerweise liegt dies an Schriftartenlesern und daran, wie sie die Website anzeigen.

Wenn Sie dies bemerken, wenden Sie sich an den Squarespace-Support, und er kann sich die Einstellungen ansehen, um zu sehen, was angepasst werden muss.

Ich kann meine Schriftart nicht auf eine bestimmte Größe einstellen

Probleme beim Festlegen einer bestimmten Größe für eine Schriftart haben normalerweise mit dem Backend Ihrer Website zu tun. Dies kann an der von Ihnen verwendeten Version von Squarespace liegen.

Wenden Sie sich also an den Support, um Hilfe bei eventuellen Problemen zu erhalten.

Fügen Sie Ihre benutzerdefinierten Schriftarten zu Squarespace hinzu

Mit einem Hauch von CSS können Sie Squarespace schnell benutzerdefinierte Schriftdateien hinzufügen.

Sie können sie mit ein wenig Code an verschiedenen Stellen verwenden und alles von der Größe bis zum Buchstabenabstand anpassen.

Der Style Editor machte es einfach, Ihre Website über die integrierten Schriftartoptionen hinaus anzupassen.

Wie könnten Sie also benutzerdefinierte Schriftarten verwenden, um Ihre Website noch intelligenter aussehen zu lassen?