Passe den Stil, die Größe, die Farbe und den Abstand deiner Texte auf deiner Website an.
Diese Anleitung zeigt dir, wie du Schriftarten auf deiner Website ändern kannst, einschließlich Schriftart-Stil, Größe, Farbe und Abstand. Alle Websites beginnen mit voreingestellten Schriftart-Stilen, die du unter Website-Stile ändern und anpassen kannst.
Ein Video anschauen
Wie Schriftarten in Squarespace funktionieren
Bitte beachte bei der Überprüfung des Schriftart-Menüs Folgendes:
- Unsere Schriftartensammlung umfasst 600 Google Fonts und 1.000 Adobe Fonts. Diese Sammlung enthält nicht alle verfügbaren Google oder Adobe Fonts. Scrolle, um unsere vollständige Bibliothek zu durchsuchen, oder verwende das Suchfeld des Menüs, um nach einer bestimmten Schriftart zu suchen.
- Um die Menüs kurz zu halten, beschränken wir das, was zuerst erscheint, und konzentrieren uns auf deine kürzlich verwendeten Schriftarten und unsere beliebtesten Optionen. Nicht alle Formatierungsoptionen, die von Google Fonts oder Adobe Fonts angeboten werden, werden von Squarespace unterstützt.
Beachte bei der Auswahl deiner Schriftarten Folgendes:
- Die Schriftarten-Pakete von Squarespace wurden entwickelt, um deiner Website einen einheitlichen Stil zu verleihen, ohne dass du jede Schriftart-Einstellung manuell auswählen musst. Schriftarten-Pakete verwenden Google Fonts, die weit verbreitet sind, und helfen dir, ein einheitliches Branding auf allen Plattformen zu wahren.
- Die Optionen für die Schriftartengestaltung sind absichtlich eingeschränkt, um die Konsistenz auf deiner gesamten Website zu gewährleisten. Um Schriftarten über die verfügbaren Anpassungen hinaus zu bearbeiten, kannst du mit CSS eine benutzerdefinierte Schriftart hinzufügen. In Version 7.0 kannst du benutzerdefinierte Adobe Fonts hinzufügen.
- Einige Schriftarten können je nach Gerät unterschiedlich gerendert werden, z. B. Windows im Vergleich zu Mac oder iOS im Vergleich zu Android. Verschiedene Browser können Schriftarten in einigen Fällen auch unterschiedlich darstellen, z. B. in Dropdown-Menüs.
- Gelegentlich entfernen Google und Adobe Schriftarten aus ihren Bibliotheken. Jeder Text auf der Website, der diese Schriftart derzeit verwendet, ändert sich nicht. Wenn du jedoch zu einer anderen Schriftart wechselst, kannst du nicht zurückwechseln. Stattdessen ersetzen wir sie in unserer Bibliothek durch eine Schriftart, welche die größte Übereinstimmung mit der ursprünglichen Schrift hat, damit du etwas Ähnliches verwenden kannst.
Bitte beachte bei der Verwendung von Schriftarten auf deiner Website Folgendes:
- Die meisten Änderungen an einer Schriftartkategorie (wie Überschriften und Absätze) gelten für die gesamte Website. Das Ändern der Schriftart für den Text für Überschrift 1 gilt z. B. für den gesamten Text, der auf der Website als Überschrift 1 festgelegt ist.
- Verwende das Drop-down-Menü Format im Text-Block-Editor, um Überschriften in Textkörpern zu erstellen. Sobald du Überschriften erstellt hast, kannst du die Stile der Überschriften ändern. Weitere Informationen findest du unter Text formatieren.
- Das Ändern des Textformats in der Text-Werkzeugleiste überschreibt die Stile, die für diesen Textbereich unter Website-Stile festgelegt wurden. Wenn du beispielsweise den Auszugstext eines Blogeintrags mit der Text-Werkzeugleiste in Überschrift 1 änderst und dann die Schriftart oder Größe von Blog-Auszügen in Website-Stile bearbeitest, wird sich der von dir geänderte Text weiterhin nach den Stilen für Überschrift 1 richten.
Tipp: Hilfe bei der Auswahl der besten Schriftarten für deine Website findest du unter Die richtigen Schriftarten und Farben auswählen.
So funktioniert die Skalierung von Texten in Squarespace
Beim Skalieren von Text ändert sich die Größe deines Textes, um einen bestimmten Bereich deiner Website auszufüllen. Unser Responsive Design stellt sicher, dass der Text auf jede Bildschirmgröße passt. Wie der Text deiner Website skaliert wird, hängt von der Version deiner Website ab.
Dein Text wird basierend auf der Basisgröße der Schriftart skaliert. Du kannst die Textskalierung verwenden, um einen Text-Block unabhängig von den Einstellungen der Schriftart zu füllen.
Dein Text wird basierend auf der Größe des Browsers skaliert. Einige Template-Gruppen enthalten eine Option zur Feinabstimmung der Textskalierung.
Eine Schriftart-Anpassung finden
Schriftarten-Anpassungen funktionieren je nach der Version deiner Website unterschiedlich.
So änderst du alle Schriftarten auf der gesamten Seite:
- Öffne beim Bearbeiten einer Seite Website-Stile und klicke dann neben „Schriftarten“ auf > .
- Klicke auf Wechseln auf dem aktuellen Schriftartenpaket, um alle verfügbaren Schriftartpakete anzuzeigen. Klicke auf Sans-Serif, Serif oder Gemischt, um verschiedene Schriftartenpakete für jeden Stil anzuzeigen.
- Klicke auf ein neues Schriftartenpaket, um eine Vorschau auf deiner Website anzuzeigen.
- Klicke auf Zurück, um zum Menü „Schriftarten“ zurückzukehren und die Basisgröße der Schriftart festzulegen. Alle anderen Texte beziehe sich auf diese Größe.
- Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, klicke auf Speichern. Um die Bearbeitung zu beenden, klicke auf Beenden.
Wenn du nicht möchtest, dass Google Fonts oder Adobe Fonts (ehemals Typekit) auf deiner Website geladen werden, wähle eines unserer integrierten Schriftarten-Pakete aus:
- Wähle unter Sans Serif die Schriftart Helvetica Neue
- Wähle unter Serif die Schriftart Georgia
- Wähle unter Gemischt die Schriftart Verdana
So änderst du eine bestimmte Schriftart-Optimierung:
- Klicke im Schriftarten-Menü auf Stile zuweisen.
- Suche die bestimmte Textgruppe, die du ändern möchtest, z. B. Titel oder Button, und klicke dann darauf, um alle Anpassungsoptionen für diese Gruppe zu öffnen. Du kannst auch auf einen beliebigen Text in der Seitenvorschau klicken, um die Anpassungsoptionen anzuzeigen.
- Klicke auf das Drop-down-Menü neben dem Namen der Anpassung, um einen neuen Schriftart-Stil zuzuordnen. Wenn du weitere Anpassungen vornehmen möchtest, klicke auf Benutzerdefiniert, und verwende dann die anderen angezeigten Optionen.
- Klicke auf Alle anzeigen oder Zurück, um zur vollständigen Liste zurückzukehren.
Um eine Schriftart-Anpassung zu ändern, öffne Website-Stile. Je nachdem, welche Vorlage du benutzt, siehst du verschiedene Optionen und Namen für diese Schriftarten-Gruppen. Du erkennst die Anpassungsoptionen für die Schriftart am Namen der jeweiligen Schriftartengruppe und an dem kleinen Pfeil, mit dem weitere Optionen angezeigt werden können.
Wenn du nicht möchtest, dass Google Fonts oder Adobe Fonts (ehemals Typekit) auf deiner Website geladen werden, klicke unten im Menü „Website-Stile“ auf Alle auf Systemschriftarten festlegen.
Wenn du die Textgruppe, die du ändern möchtest, nicht findest, erfährst du in der Anleitung deines Templates mehr über die Formatoptionen deines Templates. Du kannst auch auf Text auf einer Seite klicken, um die Änderungen in Website-Stil anzuzeigen. Klicke auf Alle anzeigen, um zur vollständigen Liste zurückzukehren.
Suchen einer bestimmten Schriftart
Die Schriftartsuche funktioniert unterschiedlich, je nachdem , auf welcher Version von Squarespace sich deine Website befindet.
Wenn du eine bestimmte Google-Schriftart verwenden möchtest, suche diese in der Option Alle Schriftarten durchsuchen.
- Öffne das Menü Website-Stile und klicke dann neben „Schriftarten“ auf > .
- Klicke auf die Textart, die du ändern möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
- Klicke auf den Namen der Schriftart
- Scrolle, um die verfügbaren Schriftarten zu durchsuchen, oder gib den Schriftartnamen in das Feld Schriftarten suchen oben im Menü ein. Um Adobe Fonts zu durchsuchen, klicke unten in der Liste auf Ältere Schriftarten durchsuchen.
- Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, klicke auf Speichern. Um die Bearbeitung zu beenden, klicke auf Beenden.
Tipp: Die Kategorie Verschiedenes gilt für die meisten Textbereiche, die keine Überschrift oder kein regulärer Absatztext sind, wie Produktpreise, Menü-Block-Navigation und andere Metadaten für Inhalte.
Um eine bestimmte Google-Schriftart zu verwenden, verwende das Suchfeld innerhalb einer Schriftart-Optimierung, um sie zu finden.
- Öffne das Design-Menü und klicke dann auf Website-Stile.
- Klicke auf die Schriftart-Optimierung, die du ändern möchtest, und klicke dann auf das Drop-down-Menü neben dem Schriftartnamen.
- Scrolle, um die verfügbaren Schriftarten anzuzeigen, oder gib den Namen der Schriftart in das Feld Schriftarten suchen oben im Menü ein.
- Klicke auf die Schriftart, die du verwenden möchtest, und klicke dann oben im Bedienfeld auf Speichern, um die Änderungen zu übernehmen.
Wenn du keine Schriftart im Sinn hast, verfügen Google und Adobe über Ressourcen zum Suchen und Anzeigen von Schriftarten auf deinen Plattformen:
Wenn du eine Schriftart findest, die du die gefällt, suche in Squarespace danach. Beachte, dass einige Schriftarten möglicherweise nicht verfügbar sind.
Schriftart formatierten
Die Schriftgestaltung funktioniert unterschiedlich, je nachdem , auf welcher Version von Squarespace sich deine Website befindet.
So gestaltest du Schriftarten:
- Öffne das Menü Website-Stile und klicke dann neben „Schriftarten“ auf > .
- Klicke auf die Textart, die du ändern möchtest: Überschriften, Absätze, Buttons oder Verschiedenes.
- Der Name der Schriftart wird oben angezeigt. Verwende die Gestaltungs- und verschiedenen Größenoptionen, um den Stil zu ändern.
- Deine Änderungen bleiben erhalten, während du andere Seiteninhalte bearbeitest. Um deine Änderungen zu speichern, klicke auf Speichern. Um die Bearbeitung zu beenden, klicke auf Beenden.
Passe die Formatvorlagen wie in der folgenden Tabelle aufgeführt an.
Tipp: Um die Farbe deines Texts zu ändern, ändere die Farben für die gesamte Website oder die Abschnittsfarben. In einem Text-Block kannst du auch die Text-Werkzeugleiste verwenden.
|
Name des Formats |
Optionen |
|
Gewicht |
Macht den Text dicker oder dünner. |
|
Stil |
Legt je nach Schriftart den Text auf Normal-, Fett-, Kursiv- oder andere Formate fest. |
|
Zeilenhöhe |
änderst du den Abstand zwischen Textzeilen. |
|
Zeichenabstand |
Ändert den Abstand zwischen Buchstaben. |
|
Texttransformation |
Verwendet Großbuchstaben für einen Teil, den gesamten oder keinen Text. Diese Optimierung gilt nur für bestimmte Schriftarten. |
|
Größe |
Vergrößert oder verkleinert den Text. Jeder Texttyp verfügt über eine oder mehrere Größenoptionen. Überschriften enthalten beispielsweise Schieberegler für die Formatierung von Überschrift 1, Überschrift 2, Überschrift 3 und Überschrift 4 im Abschnitt „Größe“. Du kannst die Textgröße auch in einzelnen Text-Blöcken über die Text-Werkzeugleiste ändern. |
Klicke auf die Anpassung einer Schriftart oder einer Typografie, um zusätzliche Optionen zu öffnen, einschließlich Schriftartname, Größe und Buchstabenabstand.
Abhängig vom spezifischen Text und Template kannst du die in der folgenden Tabelle aufgeführten Typografie-Optionen anpassen. Für die verschiedenen Schriftarten und Templates sind zusätzliche Stil-Optionen und Anpassungsmöglichkeiten verfügbar.
Tipp: Mit der Farbanpassung für diesen Texttyp in Website-Stil kannst du die Textfarbe ändern. Weitere Informationen findest du Farben ändern.
|
Name der Anpassung |
Optionen |
|
Schriftart |
Wähle oder suche nach einer Google- oder Adobe-Schriftart. Du siehst kuratierte Auswahlen oben im Menü. Scrolle nach unten, um unsere gesamte Bibliothek zu durchsuchen, oder verwende das Suchfeld oben im Menü, wenn du den Namen einer Schriftart kennst, die du verwenden möchtest. |
|
Schriftgröße |
Verwenden Sie den Schieber, oder geben Sie manuell eine Schriftgröße ein. |
|
Zeilenhöhe |
Stellen Sie den Zeilenabstand ein. Eine Zeilenhöhe von 0em kann zu Textüberlappungen führen, besonders auf Mobilgeräten. |
|
Zeichenabstand |
Stellen Sie den Zeichenabstand ein. Negative Werte können zu überlappenden Zeichen führen. |
|
Texttransformation |
Wähle „Keine“, „Großschreibung“, „Großbuchstaben“ oder „Kleinbuchstaben“ aus. |
|
Text verzieren |
Wähle „Keine“, „Unterstreichung“, „Überstreichung“ oder „Durchgestrichen“. |
|
Text ausrichten |
Wähle „Links“, „Zentriert“ oder „Rechts“ aus. |
Hinzufügen einer benutzerdefinierten Adobe-Schriftart (nur Version 7.0)
Wenn du über eine benutzerdefinierte Schriftart verfügst, kannst du diese mithilfe unserer Integration mit Adobe Fonts zu deiner Squarespace-Version 7.0 hinzufügen. Benutzerdefinierte Adobe Fonts werden in Version 7.1nicht unterstützt.
- Dieser Vorgang ersetzt die Optionen von Adobe Fonts in den Menüs „Website-Formatvorlagen“ durch die Schriftarten in deinem benutzerdefinierten Projekt. Die Adobe Fonts von Squarespace können nicht verwendet werden, solange dein benutzerdefiniertes Adobe Fonts-Projekt aktiviert ist.
- Benutzerdefinierte Schriftarten sind mit einem Adobe Creative-Cloud-Abonnement verfügbar. Wähle vor der Anmeldung ein Abonnement aus, das Adobe Fonts enthält.
Schritt 1 – Ein Webprojekt erstellen und Schriftarten hinzufügen
Um deine benutzerdefinierten Schriftarten zu Squarespace hinzuzufügen, musst du zunächst ein Webprojekt in Adobe erstellen. Melde dich bei deinem Adobe Fonts-Konto an und folge den Schritten zum Erstellen eines Webprojekts.
Nachdem du dein Webprojekt erstellt hast, siehst du deinen angepassten HTML-Embed-Code. Du wirst ihn nicht benötigen, also füge ihn nicht zu deiner Website hinzu. Verwende stattdessen den nächsten Schritt, um die Webprojekt-ID zu erhalten, die kürzer ist.
Schritt 2 – Ihre benutzerdefinierten Schriftarten zu Squarespace hinzufügen
Wenn Ihr Webprojekt alle benötigten Schriftarten enthält, fügen Sie das Projekt mithilfe der Projekt-ID zu Ihrer Squarespace-Website hinzu.
- Melden Sie sich bei Ihrem Adobe Fonts-Konto an und klicken Sie dann oben rechts auf Mein Adobe Fonts.
- Klicken Sie auf Webprojekte und finden Sie dann das Projekt, das Sie zu Squarespace hinzufügen möchten.
- Kopiere die Projekt-ID (ein String aus Buchstaben und Zahlen über dem Einbettungscode). Achte darauf, deine eindeutige Projekt-ID zu kopieren und nicht die im Beispiel gezeigte.
- Öffne das Menü Entwicklertools.
- Klicken Sie auf Externe API-Schlüssel.
- Scrolle nach unten zum Feld Adobe Fonts Projekt-ID.
- Füge die Projekt-ID, die du von Adobe kopiert hast, in das Feld ein.
- Klicken Sie auf Speichern.
Schritt 3 – Ihre Adobe Fonts verwenden
Nach dem Hinzufügen von Adobe Fonts können Sie diese für Texte auf Ihrer Website verwenden. Die Schriftarten in Ihrem Webprojekt ersetzen die integrierten Adobe Fonts unter Website-Stil. Um einen benutzerdefinierten Adobe Font schnell zu finden, suchen Sie diesem dem Namen nach im Feld Suche.
Änderungen an Ihren Schriftarten verwalten
- Wenn Sie Änderungen an Ihren Adobe Fonts vornehmen, veröffentlichen Sie diese erneut, damit diese Änderungen in Squarespace angezeigt werden. Mehr dazu erfahren Sie In der Dokumentation von Adobe.
- Wenn Adobe Fonts eine von dir verwendete Schriftart aus deren Sammlung entfernt, wird die Schriftart weiterhin auf deiner Website geladen. Du kannst sie jedoch nicht mehr auf neue Texte anwenden oder darauf zurückwechseln, wenn du sie änderst, da sie nicht mehr unter Website-Stile angezeigt wird.
In Website-Stile wird die Meldung „Nicht unterstützte Schriftarten“ angezeigt.
Diese Meldung wird angezeigt, wenn Ihre Website eine Schriftart verwendet, die Adobe Fonts zurückgezogen hat. Wird die Schriftart nicht mehr unterstützt, ersetzen wir sie auf Squarespace durch die ähnlichste verfügbare Schriftart. Lesen Sie die im Fehler aufgeführten Stil-Abschnitte, um die Ersatz-Schriftart anzunehmen oder zu ändern.
Adobe Fonts wird außerdem alle zurückgezogenen Schriftarten von Ihrer Adobe Fonts-Seite entfernen.
Meine benutzerdefinierten Adobe-Schriftarten werden nicht auf meiner Website angezeigt
Wenn einige Sonderzeichen nicht richtig angezeigt werden, bearbeite das Webprojekt und wähle Alle Zeichen aus, bevor du die Projekt-ID zu Squarespace hinzufügst.
Wenn keine deiner Schriftarten angezeigt wird, überprüfe deine Website auf JavaScript. Falls du jemals die JavaScript-Methode von Adobe Fonts verwendet hast, um Schriftarten zu deiner Website hinzuzufügen, kann es passieren, dass deine Schriftarten nicht korrekt geladen werden. Entferne das JavaScript und folge den obigen Schritten, um deine Adobe Fonts hinzuzufügen.
Wo Sie Support erhalten
Wenn Sie Probleme beim Hinzufügen Ihrer Adobe Fonts Projekt-ID haben oder wenn Adobe Fonts nicht auf Ihrer Website erscheinen, kontaktieren Sie uns und wir können Ihnen bei der Fehlerbehebung behilflich sein. Für alle sonstigen Fragen zur Verwendung von Adobe Fonts wenden Sie sich bitte an deren Kundensupport oder besuchen Sie deren Dokumentation.
Problembehandlung bei Schriftartproblemen
Bevor du diese Schritte ausführst, überprüfe, ob das Problem mit deinem Browser zusammenhängt. Wenn die Fehlerbehebung im Browser das Problem nicht löst, findest du in diesem Abschnitt weitere häufige Situationen, die beim Ändern von Schriftarten auftreten können.
Ich habe Text kopiert und eingefügt, aber er stimmt nicht mit meiner Formatierung überein.
Wenn du Text kopierst oder einfügst, kann es sein, dass du eine Formatierung kopierst, die mit dem CSS von Squarespace in Konflikt steht. Dadurch wird dein Text anders angezeigt als die Einstellungen, die du in Website-Stile aktiviert hast.
Um dies zu vermeiden, empfehlen wir, Text in ein Textverarbeitungsprogramm zu kopieren und einzufügen, wo dann besondere Formatierung entfernt wird, oder ein Tastaturkürzel zu benutzen, um die Formatierung zu entfernen.
- Drücke beim Einfügen von Text unter Windows Strg + Shift + V, um die Formatierung zu entfernen.
- Drücke beim Einfügen von Text auf einem Mac ⌘ + Shift + V, um die Formatierung zu entfernen.
- Du kannst Text auch ohne Formatierung einfügen, indem du auf das Symbol der Zwischenablage klickst. Wenn du bereits Text eingegeben hast, entferne die Formatierung, indem du den Text markierst und auf das Symbol „Formatierung entfernen“ klickst.
Meine Schriftart sieht anders aus, wenn ich angemeldet bin.
Die Art und Weise, wie Schriftarten auf deiner Live-Website dargestellt werden, kann von deiner Domain beeinflusst werden.
Wenn du eine Drittanbieter-Domain mit deiner Website verbunden hast, kontaktiere deinen Domain-Anbieter, um sicherzugehen, dass du keine maskierte Weiterleitung verwendest. Maskierung steuert die Weiterleitung deiner Domain zu deiner Website und kann mit den Stil-Einstellungen von Squarespace in Konflikt stehen.
Ich kann meine Schriftart nicht auf eine bestimmte Größe einstellen
Wenn du deine Schriftart nicht auf eine bestimmte Pixelgröße (Pixel) festlegen kannst, verwendet deine Website möglicherweise stattdessen einen em- oder rem Wert.
- Alle Websites in Version 7.1 verwenden rem-Werte für Schriftgrößen. Dies bedeutet, dass die Größe relativ zur Basisschriftgröße ist. Um den rem-Wert einer Schriftart zu ändern, verwende den Schieberegler oder klicke auf den aktuellen Wert und gib manuell einen neuen Wert ein. Um die Basisschriftgröße zu ändern, passe die Basisgröße im Schriftpaket an.
- Für Websites in Version 7.0verwenden einige Vorlagen eher em als px für Schriftart und Abstandsgröße. Wenn du einen Wert direkt in das Zahlenfeld eingibst, kannst du die Größe mit dem em-Wert skalierbar halten oder px eingeben, um ihn stattdessen zu fixieren. Wenn deine Vorlage jedoch nur einen px-Wert verwendet, gib keinen em-Wert an seiner Stelle ein, da dies die korrekte Größenanpassung der Schriftart auf kleineren Bildschirmen verhindern kann.
Meine Schriftart ist auf Mobilgeräten schwer zu lesen
Schriftstärken unter 100 können auf kleineren Mobilgeräten sehr dünn oder blass erscheinen. Um sicherzustellen, dass dein Text auf allen Geräten gut sichtbar ist, öffne Website-Stil und vergewissere dich, dass die Schriftstärke höher als 100 ist.