Zo gebruik je je eigen lettertype op je website

Wil je je eigen huisstijl en je eigen lettertypes op je website gebruiken? Dan moet je je lettertypes zelf eerst toevoegen op je website.

Dit lijkt misschien moeilijk, maar in dit artikel lees je precies hoe je je lettertype voorbereidt, klaarzet en gebruikt. Volg het stappenplan en je bent binnen 10 minuten klaar.

Kies je eigen lettertype voor je website

Heb je nog geen lettertype voor je website? Dan heb je natuurlijk in de eerste plaats een lettertype nodig! Je kunt er zelfs voor kiezen om 2 lettertypes op je website te gebruiken: een lettertype voor gewone tekst en een lettertype voor titels.

Je kunt op verschillende manieren aan lettertypes komen:

1. Je kunt standaard lettertypes zoals Arial en Georgia gebruiken. Deze lettertypes worden door alle internetbrowsers ondersteund. Dit wil zeggen dat de teksten van je website er op elk toestel en op elke browser even mooi uit zullen zien.
2. Je kunt de Google fonts gebruiken. Dit zijn ‘Open Source’ lettertypes voor het web die door de meeste browsers ondersteund worden.

Maar… standaard lettertypes dragen niet bij tot een unieke huisstijl. Unieke lettertypes wel. Dus… Wil je unieke lettertypes?

1. Spreek een designer aan die een uniek lettertype voor je kan maken. Let wel goed op dat je precies zegt welke letters en cijfers je nodig hebt. Vergeet ook de leestekens (uitroepteken, vraagteken…) en diakritische tekens (accenten) niet! Je vindt betaalbare designers op platformen zoals 99designs.com. Maar… een eigen lettertype ontwikkelen kost (ook via platformen zoals 99designs.com) behoorlijk veel tijd en geld. Gelukkig is er nog een optie!
2. Op websites zoals myfonts.com, fonts.com, fontshop.com en Adobe Fonts kun je premium (betaalde) lettertypes kopen. Deze lettertypes zijn niet uniek, maar ze worden ook niet door iedereen gebruikt omdat je ervoor moet betalen. Zo heb je dus een ‘redelijk onderscheidend’ lettertype voor een betaalbaar budget. En als je via deze websites lettertypes downloadt dan staan de .ttf en/of .otf bronbestanden van je lettertypes meteen op je computer.

Zo ben je meteen klaar voor het stappenplan hieronder!

Je eigen lettertype op je website – wat heb je nodig?

1. Je hebt de bronbestanden (.ttf of .otf) van je lettertype nodig
2. Je hebt een internetbrowser (Chrome, Firefox, Safari, Internet Explorer) nodig
3. Je hebt FTP-verbinding met je website nodig
4. Je hebt toegang nodig tot de stylesheet (CSS) van je website

Stap 1: Maak je lettertype klaar voor je website

1. Zet het .ttf of .otf bestand van je lettertype op je bureaublad.
2. Ga naar fontsquirrel.com/tools/webfont-generator.
3. Klik op “Upload fonts” en selecteer maximaal 4 .ttf en .otf bestanden.Soms bestaat 1 lettertype uit verschillende varianten (light, medium, bold, extra bold, cursief…) met elk een eigen .ttf of .otf bestand. Deze bestanden moeten allemaal voorbereid worden maar je kunt op fontsquirrel.com maar 4 bestanden tegelijk uploaden.
4. Selecteer de optie “optimal“.
5. Vink het vakje naast “Agreement” aan.
6. Klik op “Download Your Kit“. Je downloadt nu een zip-bestand met alle benodigde bestanden naar je computer.

Stap 2: Upload je lettertype naar je website

1. Unzip het zip-bestand uit de vorige stap.
2. Open FileZilla (of een ander FTP-programma) en maak verbinding met je website.
3. Maak een nieuwe /fonts/ folder in de root (basis)map van je website.
4. Sleep via je FTP-programma alle .html, .eot, .svg, .ttf, .woff en .woff2 bestanden uit de vorige stap naar de nieuwe /fonts/ folder van je website.

Stap 3: Vertel je website waar je eigen lettertypes staan

1. Open de stylesheet (het CSS bestand) van je website. Dit kan via de beheeromgeving van je website maar ook gewoon via je FTP-programma.
2. Kopieer de inhoud van het bestand ‘stylesheet.css‘ (in de folder die je in stap 1 gedownload hebt) en kopieer de volledige inhoud in de stylesheet van je website.
3. Pas op elke regel de URL aan om de juiste plaats van de .html, .eot, .svg, .ttf, .woff en .woff2 bestanden aan te geven. Omdat wij in dit voorbeeld de map /fonts/ in de root map van onze website gebruiken plaatsen wij overal /fonts/ tussen url(‘ en de naam van het lettertype.
   Bijvoorbeeld:
   

   @font-face {

       font-family: ‘museo300’;

       src: url(‘/fonts/museo300-regular-webfont.eot’);

       src: url(‘/fonts/museo300-regular-webfont.eot?#iefix’) format(‘embedded-opentype’),

            url(‘/fonts/museo300-regular-webfont.woff2’) format(‘woff2’),

            url(‘/fonts/museo300-regular-webfont.woff’) format(‘woff’),

            url(‘/fonts/museo300-regular-webfont.ttf’) format(’truetype’),

            url(‘/fonts/museo300-regular-webfont.svg#museo300’) format(‘svg’);

       font-weight: normal;

       font-style: normal;

   }

4. Bepaal vervolgens welke tekstonderdelen van je website (h1, h2, h3, h4, h5, h6 titels, paragrafen, lijsten…) in welk lettertype getoond moeten worden. Als je bijvoorbeeld wilt dat paragrafen in het lettertype FontType moeten weergegeven worden, voeg dan p {font-family: “FontType”;} toe.
5. Optioneel: Het is altijd veilig om fallback-lettertypes te definiëren. Als de internetbrowser van een bezoeker om wat voor reden dan ook jouw lettertype niet kan tonen dan gebruikt hij het tweede (veilige) lettertype in de lijst.Wij raden aan om als tweede lettertype een veelgebruikt en veilig lettertype zoals Arial of Times New Roman te gebruiken én om weer te geven of je een serif of sans-serif lettertype wil gebruiken.Lijkt je lettertype bijvoorbeeld vooral op Arial? Plaats in je stylesheet dan p {font-family: “FontType”, “Arial”, sans-serif;} in plaats van alleen maar {font-family: “FontType”;}.
6. Bewaar de bijgewerkte stylesheet van je website.

Stap 4: Controleer of je lettertypes goed getoond worden op de website

Open een webbrowser en controleer (liefst in verschillende browsers zoals Chrome, Firefox, Safari of Internet Explorer) of je eigen lettertypes op je website getoond worden.

Stap 5: Troubleshooting

Worden de lettertypes op je website nog niet goed getoond? Controleer dan de volgende zaken:

1. Heb je via je FTP-programma alle .html, .eot, .svg, .ttf, .woff en .woff2 bestanden van alle varianten van je lettertype(s) naar je website geüpload?
2. Heb je alle alle .html, .eot, .svg, .ttf, .woff en .woff2 bestanden naar de juiste folder geüpload?
3. Verwijs je in je stylesheet (CSS bestand) naar alle varianten van alle lettertypes die je wilt gebruiken?
4. Verwijs je in je stylesheet (CSS bestand) naar de juiste map (bijvoorbeeld /fonts/) om de plaats van je lettertypes aan te geven?
5. Heb je in je stylesheet (CSS bestand) voor elk tekstonderdeel op je website (h1, h2, h3, h4, h5, h6, p, a, li…) de juiste variant van het juiste lettertype gedefinieerd?