Anleitung: Eigene Schriften bei Squarespace hochladen & einrichten
Bei Squarespace kannst du aktuell zwischen 600 Google Fonts und 1.000 Adobe Fonts wählen (Stand: August 2022). Das ist eine ganz schön große Zahl…
Dennoch kann es sein, dass du eine ganz bestimmte Schriftart haben willst - die du vielleicht schon gekauft oder dir für dein Branding ausgeguckt hast.
Die gute Nachricht ist: Es funktioniert, deine eigene Schrift auf deiner Squarespace-Website zu verwenden!
Wenn wir in unserer Squarespace-Agentur für Kunden Websites erstellen, machen wir das die ganze Zeit. Es ist aber auch für dich möglich, wenn du das lieber selbst angehen möchtest. Dafür hast du perfekterweise diese Anleitung gefunden!
Hier zeigen wir dir:
Wie du eigene Schriften bei Squarespace hochlädst (du musst sie dafür als Datei vorliegen haben)
Auf welche verschiedenen Typen du sie anwenden kannst (zum Beispiel Überschrift, Fließtext) und wie das geht
Ein paar Styling-Tipps für deine Schriftarten
Und übrigens: Die meisten Adobe Fonts (Typekit) oder auch Google Fonts kannst du direkt unter Design bei Schriftarten auswählen - wenn deine gewünschte Schrift also eine von ihnen ist, brauchst du diese Anleitung gar nicht. 😉
Schritt Nummer 1: Finde deine Schrift (oder kaufe eine)
Damit du deine Schrift hochladen kannst, brauchst du sie zunächst als Datei. Das Dateiformat ist normalerweise entweder OTF, WOFF oder TTF - Squarespace unterstützt sie alle. (Du kannst jede Schrift online umwandeln lassen, falls deine Schrift keines dieser Formate hat.)
Falls du keine Schrift hast, sondern welche suchst, kannst du bei Creative Market suchen, dort gibt es tolle, wirklich erschwingliche Schriften. (Wenn du sie planst hochzuladen, brauchst du bei fast allen Anbietern eine Webfont-Lizenz, nicht vergessen!)
Du musst dir also sicher sein, dass du die Rechte hast, deine Schrift auch zu verwenden.
Schritt Nummer 2: Lade deine Schrift bei Squarespace hoch
Nachdem du deine Datei bereitliegen hast, kann es losgehen.
Du loggst dich bei Squarespace ein und gehst bei deiner Website links im Menü auf “Design”. Dort wählst du “Benutzerdefiniertes CSS” aus.
Hier gibst du im Kästchen nun das Folgende ein:
@font-face {
font-family: HIERDEINESCHRIFTEINSETZEN;
src: url(DIESMUSSTDUMARKIEREN);
}
(Wenn bei dir im Kästchen schon andere Sachen stehen, füge den Text einfach unten dazu ein, da geht nichts kaputt) 😉
Dort, wo wir HIERDEINESCHRIFTEINSETZEN geschrieben haben, musst du den Namen der Schrift einfügen. Wenn die Schrift mehrere Worte hat, arbeite mit Bindestrichen dazwischen.
Im Prinzip ist es egal, wie du die Schrift nennst, aber es hilft natürlich, den richtigen Namen zu nehmen, den die Schrift auch wirklich hat. Vor allem, wenn du später noch weitere Schriften hinzugefügt.
Als Nächstes musst du dort, wo wir DIESMUSSTDUMARKIEREN geschrieben haben - du ahnst es schon, mit der Maus genau diesen Teil markieren. Wenn du das gemacht hast, gehst du unten auf “Eigene Dateien verwalten” und lädst deine Schriftart hoch.
Nun sollte dort, wo DIESMUSSTDUMARKIEREN stand, ein Link stehen.
Schritt 3: Lege fest, welche Schriftarten die neue Schriftart bekommen sollen
Als Nächstes gibst du noch weiteren Text im CSS-Kästchen rein.
Was du bis jetzt gemacht hast ist nämlich lediglich das Hochladen der Schriften gewesen. Jetzt musst du Squarespace noch via CSS erzählen, welche Arten von Text in der neuen Schriftart “angemalt” werden sollen.
Bei Squarespace gibt es Überschrift 1-4 (h1, h2, h3, h4) und Fließtext in verschiedenen Größen, der sich Absatz nennt (Absatz 1: .sqsrte-large, Absatz 2: p, Absatz 3: .sqsrte-small).
Außer diesen Standards gibt es viele mehr.
(Falls du noch auf Version Squarespace 7.0 arbeitest, hast du nur eine Größe Fließtext, also nur p.)
Jetzt kannst du für jede einzelne dieser ganzen Schrift-Typen eigene Schriftarten festlegen!
Das Fest kann also beginnen. 🥳
Wichtig: Du kannst deine Schriften jetzt NUR über CSS, nicht über den Design > Schrift Bereich regeln. Das werden wir immer und immer wieder gefragt, also denke daran.
Wir legen jetzt los, deine Schriftarten per CSS einzurichten.
Wenn du Überschrift 3, also die dritte Überschrift in der Hierarchie, in der neuen Schrift haben möchtest, kopierst du das Folgende ganz unten in das CSS Kästchen:
h3 {
font-family: 'DEINESCHRIFTART';
}
Wo wir DEINESCHRIFTART geschrieben haben, musst du die exakt gleich geschriebene Schriftart von oben (HIERDEINESCHRIFTEINSETZEN) hineinsetzen.
Jede kleinste Abweichung (zum Beispiel kein Bindestrich vs. oben hast du einen Bindestrich verwendet) sorgt dafür, dass das Ganze nicht funktioniert.
Die anderen Typen würden so funktionieren:
h1 {
font-family: 'DEINESCHRIFTART';
}
wäre das, was du einsetzen musst, um den Typ “Überschrift 1” zu verändern.
h2 {
font-family: 'DEINESCHRIFTART';
}
… wäre das, was du einsetzen musst, um den Typ “Überschrift 2” zu verändern.
Schritt 4: Die Schrift verfeinern und anpassen
Jetzt hast du also deine Schriftart hochgeladen.
Wenn die Schrift mehrere Schnitte hat (also Kursiv, dick, etc.) kannst du sie noch weiter stylen. Und einige Sachen funktionieren sogar, wenn die Schrift eine ganz einfache Schrift ist (teste das also einfach.)
Hier zeigen wir dir jetzt die folgenden Sachen:
Schrift dick oder kursiv anlegen (oder die Dicke relativ bestimmen): font-style
Die Schriftgröße festlegen: font-weight
Den Abstand der einzelnen Buchstaben verkleinern: letter-spacing
Groß- oder Kleinschreibung festlegen: text-transform
Den Abstand zwischen den Zeilen auswählen: line-height
Wir nehmen dazu jetzt einmal den Fließtext, nämlich Absatz 2 (p) als Beispiel. Hinter ‘DEINE SCHRIFT’; fügst du jetzt also eine ganze Reihe anderer Sachen ein:
p {
font-family: 'DEINESCHRIFT';
font-style: bold;
font-weight: 200;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1.1em;}
Die Werte kannst du danach frei ändern. Eine Dicke, also font-weight, von 200 ist zum Beispiel recht dünn, du kannst dich einfach mal durchtesten, was es mit deinem Text machst, wenn du ihn auf 400, 500 und so weiter setzt.
Tipp: Testen, auch auf mobil!
Wir bekommen ab und zu Anfragen, dass die eingerichteten Schriften auf mobil nicht so gut aussehen.
Das liegt sehr oft daran, dass du mit der Anleitung hier “absolute” Schriftgrößen festlegst. Das heißt, wenn deine Schrift 13pt groß ist, ist sie das auf jedem Bildschirm.
Wir raten dir also, direkt gleichzeitig die mobile Ansicht mit anzugucken (oben rechts auf das kleine Pfeilchen drücken - oder oben links, falls du in der alten Version Squarespace 7.0 arbeitest), damit du auf der sicheren Seite bist. 👍🏻
Über uns 👋
Wir sind bei Everyblue seit 2019 ausschließlich auf Squarespace spezialisiert. Sieh dir jetzt unsere aktuellen Website-Templates im Shop an oder - falls du Hilfe bei deiner Squarespace-Website brauchst, findest du unsere Services hier.
Diese Artikel könnten auch spannend für dich sein:
