Lettertype wijzigen in Squarespace 7.1 (Site Styles + CSS)
Wijzig lettertypes in Squarespace 7.1 via Site Styles, upload je eigen fontbestand of pas één element aan met CSS. Stappen, keuzetabel en oplossingen.
Veelgestelde vragen
Hoe wijzig ik het lettertype van mijn hele Squarespace-site?
Open op een site met versie 7.1 de Site Styles, klik op Fonts (Lettertypes) en kies een aanbevolen fontpakket, of open All Font Packs (Alle fontpakketten) en filter op schreefloos (sans-serif), schreef (serif) of gemengd. Een fontpakket stelt in één keer de lettertypes in voor koppen, alinea's, knoppen en overige tekst.
Kan ik elk Google Font in Squarespace gebruiken?
Je kunt in de lettertype-dropdown op naam zoeken in Google Fonts, maar het helpcentrum van Squarespace zelf zegt dat niet elk Google Font in de bibliotheek staat. Ontbreekt het font dat je wilt, dan kun je het fontbestand zelf uploaden, mits de licentie dat toestaat.
Welke fontbestanden kan ik uploaden naar Squarespace?
De fontuploader in Site Styles accepteert OTF-, TTF-, WOFF- en WOFF2-bestanden. Het aparte gedeelte Custom Files (Eigen bestanden) dat bij de CSS-editor hoort, noemt TTF, OTF en WOFF. Gebruik voor een WOFF2-bestand dus de uploader in Site Styles en niet het CSS-bestandsgedeelte.
Heb ik toestemming nodig om een eigen lettertype te uploaden?
Ja. Volgens het helpcentrum van Squarespace heb je toestemming nodig van de eigenaar of licentiegever van het font om het op je site te gebruiken. Controleer de licentie voor webgebruik voordat je het uploadt.
Waarom zijn de stappen voor het lettertype op mijn site anders?
Sites met versie 7.0 en versie 7.1 hebben verschillende fontinstellingen. De stappen in deze gids gelden voor 7.1. Op 7.0 verlopen lettertypewijzigingen via Site Styles in het Design-paneel. Squarespace merkt ook op dat eigen Adobe-fonts die op 7.0 zijn ingesteld niet worden ondersteund op 7.1, dus kies dan een ingebouwd 7.1-lettertype.
Blijft mijn eigen CSS behouden als ik van template wissel?
Op een site met versie 7.0 zegt Squarespace dat eigen CSS niet wordt overgenomen als je van template wisselt. Bewaar daarom een kopie van alle CSS die je toevoegt, zodat je die zo nodig opnieuw kunt plakken.
Kort antwoord: Open op een Squarespace 7.1-site Site Styles, klik op Fonts en kies een fontpakket, of stel Headings (Koppen), Paragraphs (Alinea's), Buttons (Knoppen) en Miscellaneous (Overig) één voor één in. Wil je een lettertype gebruiken dat niet in de bibliotheek staat, upload dan je eigen bestand in hetzelfde paneel. Gebruik eigen CSS alleen als je één specifiek element wilt aanpassen.
Deze gids behandelt de stappen voor versie 7.1, zoals beschreven in het helpcentrum van Squarespace zelf (gecontroleerd in november 2026). Zit je site op versie 7.0, dan heten de panelen anders; zie de opmerking over versies verderop.
Welke methode past bij jou?
Kies de lichtste optie die het gewenste resultaat geeft. Elke stap lager in de tabel vraagt meer voorbereiding.
| Wat je wilt | Beste methode | Moeite |
|---|---|---|
| In één klik een compleet nieuwe uitstraling | Fontpakket in Site Styles | Laag |
| Andere lettertypes voor koppen en lopende tekst | Lettertype per categorie in Site Styles | Laag |
| Een specifiek Google Font | Zoeken in de lettertype-dropdown | Laag |
| Een huisstijlfont waarvoor je een licentie hebt | Een fontbestand uploaden | Gemiddeld |
| Alleen één kop, één knop of één sectie | Eigen CSS | Gemiddeld tot hoog |
Methode 1: Lettertypes wijzigen met een fontpakket
Een fontpakket stelt in één keer bij elkaar passende lettertypes in voor alle tekstcategorieën. Dat is de snelste manier om een site een nieuwe look te geven.
- Open de editor en klik op Site Styles (het penseelicoon).
- Klik op Fonts.
- Kies een van de aanbevolen pakketten, of klik op All Font Packs en filter op schreefloos (sans-serif), schreef (serif) of gemengd.
- Scrol door je pagina's en controleer koppen, lopende tekst en knoppen voordat je het paneel sluit.
Pakketten zijn een goed begin, maar je kunt eindigen met een kopfont dat je mooi vindt en een tekstfont dat je niet bevalt. Dat los je op met de volgende methode.
Methode 2: Het lettertype van één tekstcategorie wijzigen
Bij Fonts verdeelt Squarespace tekst in vier groepen. Je kunt ze elk apart instellen:
- Headings: paginatitels en de kopstijlen in je tekstblokken.
- Paragraphs: lopende tekst.
- Buttons: knoplabels.
- Miscellaneous: kleinere tekst zoals bijschriften en formulierlabels (wat hier precies onder valt, verschilt per template, dus controleer na een wijziging een paar pagina's).
Zo wijzig je er één:
- Klik in Site Styles > Fonts op de gewenste categorie, bijvoorbeeld Headings.
- Open de lettertype-dropdown en zoek op naam.
- Kies het lettertype en pas daarna zo nodig stijl, gewicht en grootte aan.
- Gebruik voor Adobe Fonts de link Additional Fonts (Extra lettertypes) onderaan de lijst.
In Squarespace kun je ook een basisgrootte instellen waar andere tekst van afgeleid wordt. Ziet alles er na een wissel te groot of te klein uit, pas dan eerst die waarde aan voordat je losse blokken verkleint of vergroot.
Een praktische tip: wijzig koppen en alinea's in aparte rondes. Verander je beide tegelijk en ziet er iets niet goed uit, dan weet je niet welke wijziging de oorzaak is. Hulp nodig bij het kiezen van een combinatie? Lees onze gids over hoe je websitelettertypes kiest.
Methode 3: Je eigen lettertype uploaden
Gebruikt je merk een lettertype dat niet in de bibliotheek staat, upload het dan. Squarespace zegt dat je toestemming van de eigenaar of licentiegever van het font nodig hebt om het zo te gebruiken.
- Zorg voor het fontbestand in OTF-, TTF-, WOFF- of WOFF2-formaat. De uploader in Site Styles accepteert alle vier.
- Open Site Styles > Fonts, kies een categorie (of de lettertype-dropdown) en zoek de uploadoptie.
- Sleep je bestand naar het paneel met geüploade fonts, of klik op het plusicoon en kies het bestand op je computer.
- Selecteer het geüploade lettertype voor de categorie die je wilt.
- Publiceer en bekijk de live site op desktop en telefoon om te controleren of het lettertype laadt.
De bewoording van de interface verandert af en toe. Heet een knop anders, zoek dan naar het upload- of plusicoon in de lettertype-dropdown.
Veelvoorkomende uploadproblemen
- Het lettertype staat in de lijst maar ziet er verkeerd uit. Mogelijk ontbreekt in het bestand een gewicht of stijl (vet, cursief). Upload elk gewicht dat je wilt gebruiken als apart bestand.
- Het lettertype werkt in de editor maar niet voor bezoekers. Ververs de gepubliceerde pagina geforceerd en controleer de licentie van het fontbestand op webgebruik.
- Je hebt een WOFF2-bestand geüpload en probeert het aan te roepen vanuit het CSS-bestandsgedeelte. Het gedeelte Custom Files in de CSS-editor noemt TTF, OTF en WOFF als fonttypes, niet WOFF2. Gebruik voor WOFF2 de uploader in Site Styles.
Methode 4: Eén element aanpassen met eigen CSS
Site Styles wijzigt lettertypes voor de hele site per categorie. Heb je een uitzondering nodig, bijvoorbeeld één kop in een ander lettertype, dan kan eigen CSS dat regelen. Volgens de eigen CSS-richtlijnen van Squarespace beperk je CSS het best tot lettertypes, kleuren en achtergronden, omdat andere wijzigingen je lay-out kunnen breken.
- Upload eerst het lettertype met Methode 3, of kies een lettertype uit de bibliotheek, zodat het al beschikbaar is op je site.
- Open Website > Pages > Custom CSS (het exacte pad kan per site iets verschillen).
- Plak een regel zoals hieronder en sla op.
```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }
/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```
Vervang "Your Font Name" door de exacte naam zoals die in Site Styles staat. Het generieke terugvallettertype (serif of sans-serif) houdt tekst leesbaar als het lettertype niet laadt. Klassenamen kunnen verschillen per template en per Squarespace-update, dus controleer met de inspector van je browser welke selector hoort bij het element dat je wilt aanpassen.
Pas je CSS maar op één pagina toe? Het helpcentrum van Squarespace beschrijft daarvoor opties op paginaniveau; controleer de actuele stappen daar voordat je erop vertrouwt.
Een snelle lettertypechecklist voor je publiceert
Kopieer deze lijst en loop hem één keer door.
- [ ] Koppen en lopende tekst gebruiken samen niet meer dan twee lettertypefamilies.
- [ ] Lopende tekst is ook op een telefoon goed leesbaar, niet alleen op desktop.
- [ ] Elk gewicht dat je gebruikt (regular, vet, cursief) is beschikbaar in het lettertype.
- [ ] Je hebt de licentie om elk geüpload lettertype op het web te gebruiken.
- [ ] Knoppen en formulierlabels gebruiken een lettertype dat bij de rest van de pagina past.
- [ ] Je hebt een kopie bewaard van alle eigen CSS die je hebt toegevoegd.
- [ ] Je hebt de live site gecontroleerd, niet alleen de voorbeeldweergave in de editor.
Versie 7.0 versus 7.1
Volgens het helpcentrum van Squarespace gelden de fontopties van 7.1 voor 7.1-sites en hebben 7.0-sites eigen fontinstellingen. Op 7.0 verlopen lettertypewijzigingen via Site Styles in het Design-paneel. Overweeg je een overstap, dan heeft Squarespace een updatetool, en in onze Squarespace-review lees je hoe de huidige editor zich verhoudt. Als lettertypes maar één van meerdere ergernissen zijn, toont de pagina met Squarespace-alternatieven andere websitebouwers, en in ons kostenoverzicht zie je wat een Squarespace-site in totaal kost.
Begin je een nieuwe site?
Kies je een template of bouw je een site helemaal opnieuw, bepaal dan eerst de typografie. Dat is makkelijker dan het achteraf te herstellen. Met het gratis abonnement van We.Inc publiceer je tot drie sites op basis van kant-en-klare templates; de AI-builder die op basis van een prompt een site opzet, begint bij het Starter-abonnement voor $20 per maand. Je kunt je hier aanmelden.
Gratis beginnen · Geen creditcard nodig
Oprichter van We.Inc
Umair is de oprichter van We.Inc. Hij schrijft over websites bouwen met AI, bureaus en de bedrijfsvoering van een webstudio.
Klaar om iets moois te bouwen?
Sluit je aan bij 15,000+ bedrijven die We.Inc gebruiken om te lanceren, te groeien en te automatiseren, allemaal vanuit één platform.
Gratis aan de slagGeen creditcard nodig · Praat met sales
Gerelateerd: Blog
- Een chatbot voor je bedrijf
- Chiropractor website
- Kerkwebsite ontwerpen
- Wat je kunt bouwen met Opus 5 (2026)
- Een website bouwen voor je schoonmaakbedrijf
- Cloud ecommerce platforms
- Cloudflare Registrar review
- Coachingwebsite
Product
Voor wie
- Voor bureaus
- Voor freelancers
- Voor hostingproviders
- Voor SaaS-platforms
- Voor startups
- Financiële diensten
- Zorgoplossingen
Functies
Bronnen
- Blog
- Helpcentrum
- Gratis bedrijfstools
- Free UI Components
- Sjablonen
- Sjablooncollecties
- Websitevoorbeelden
- Gidsen
- Vergelijkingen
- Alternatieven
- De beste
- Reviews
- Prijsgidsen
- Toepassingen
- Woordenlijst en handleidingen
- Integraties
- Ontwikkelaars
- Benchmark
- Windows App