Publicatie: 21 augustus 2024
Custom fonts gebruiken
Het is een goed idee om te checken of de lettertypen (fonts) die je gebruikt voor je website ook voor iedereen beschikbaar zijn. Zo is het 'Calibri' lettertype beschikbaar wanneer je een site vanuit Windows, maar een Linux bezoeker heeft 'm niet. Gevolg: je site valt terug op een ander wel beschikbaar font, waardoor je site er wellicht anders uitziet dan je zou willen.
Een manier om dit te voorkomen is door te werken met standaard fonts zoals Arial, maar die zijn meestel niet zo mooi... Een alternatief is het gebruik van custom fonts: je slaat dan de lettertypen die je gebruikt op in je site. Zo kan iedereen de tekst in het juiste type zien, ongeacht of ze nu Windows, Mac OS of Linux gebruiken.
Custom font toevoegen
Voordat je een eigen font kunt gebruiken, moet je 'm nog wel ergens vinden en opslaan. Een van de beste bronnen voor fonts is Google. Op Google Fonts kun je honderden fonts vinden, uitproberen en vervolgens downloaden.
Heb je een font gevonden en gedownload? Zet 'm op een plekje waar je website bij kan. Vervolgens kun je in je CSS stylesheel de font toevoegen.
@font-face {
font-family: 'Open Sans';
src: url('Fonts/OpenSans-Regular.ttf') format('truetype');
}
- Je begint met @font-face, voor elk van je custom fonts
- Je geeft de font een naam met font-family, dit is de naam die je gaat gebruiken om dit font te selecteren
- Met src: url('link naar je font bestand') geef je aan waar je site het fontbestand kan vinden
- Geeft tot slot aan wat voor type font het is, je ziet dit aan de bestandsextensie. Veelal is het .ttf (truetype), maar ook .otf (opentype) is mogelijk
Gebruik in CSS
Een voorbeeld van hoe het op deze site wordt toegepast, in de style.css stylesheet:
p {
color: black;
font-family: 'Teko Light';
font-size: 25px;
}
Dit is een deel van hoe de paragrafen op de frontpage worden gestyled door middel van CSS
- doordat ik bovenaan in mijn stylesheet eerst font 'Teko Light' heb toegevoegd met @font-face, kan ik 'm hier gewoon gebruiken door middel van font-family
- Wellicht overbodig, maar vergeet niet om de naam van het font tussen aanhalingstekens te zetten. Het is dus font-family: 'Teko Light'; en niet font-family: Teko Light;.
Dat is alles! Het gebruik van custom fonts is niet ingewikkeld, en kan je site een echt eigen smoel geven.
Tips
- Een custom font moet door de bezoeker worden gedownload, voordat 'ie werkt. Dit doet de browser, maar het kost een miniscuul beetje tijd. Het is daarom te adviseren om niet te veel custom fonts te gebruiken. Zo blijft je site lekker vlot werken.
- Google Fonts biedt een hele hoop gratis fonts die je kunt gebruiken. Er zijn ook zat sites die er geld voor vragen of die niet toestaan dat je een font gebruik voor commerciële doeleinden. Let daar op wanneer je ergens een font download.