CSS3; gebruik van lettertypen op het web met @font-face
- Image by Rodrigo Galindez via Flickr
Het gebruik van lettertypen op het web is meestal vrij saai. Ik heb enorm vaak een (web) designer het standaard lijstje met de web-safe fonts door moeten sturen. Dit beperkt het design en de vrijheid van de designer enorm. Een alternatief is om de tekst als plaatje te serveren, maar dit gaat ten koste van indexering en accesability. Maar er is nu een makkelijke en enorm bruikbare methode om fonts te ‘embedden’ in je webpagina: @font-face
Het font staat op de server
Allereerst moet het lettertype aanwezig zijn op de web-server. Dit omdat de kans groot is dat de gebruiker het lettertype niet heeft geïnstalleerd. Let wel op de licentie van een font. Het feit dat deze via de website wordt gedistribueerd betekend eigenlijk dat je aan het delen bent. De fonts die geïnstalleerd staan op je computer komen vaak samen met je OS, die heeft de licenties geregeld. Het is dus niet vanzelfsprekend dat deze fonts dan ook legaal gedeeld mogen worden. Een website waar enorm veel gratis en commercieel te gebruiken fonts staan in TreuType en in OpenType is Font Squirrel. Nadat je het font hebt gedownload zet je deze op je webserver zodat je ze kan embedden met CSS.
Gebruik van @font-face
Door onderstaande code embed ik het lettertype Lobster 1.1. een font die open beschikbaar is en te vinden is op Font Squirrel. Het toegankelijk maken van het font doe ik in CSS.
@font-face {
font-family: 'Lobster1.1';
src: url('/fonts/lobster_1.1_.otf') format('opentype');
}
Bovenstaande code pakt het bestand lobster_1.1_.otf uit de map fonts en noemt het Lobster 1.1. Hierna is het gebruik van het font hetzelfde als anders. Geef alle H1 koppen maar eens dit lettertype, maar zorg er voor dat browsers die incompatible zijn wel de tekst kunnen laten zien met een alternatief font.
h1 {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Lobster1.1', sans-serif;
font-size:83px;
color: #333333;
}
Meerdere malen @font-face gebruiken
Je kunt dit zelfde meerdere malen doen. Je kan dus na eenmalig het font te embedden in alle CSS code er na hetzelfde font gebruiken. Ook kan het embedden van meerdere font gewoon gebeuren door meerder malen @font-face te gebruiken.
@font-face {
font-family: 'Lobster1.1';
src: url('../fonts/lobster_1.1_.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Quicksand Book';
src: url('../fonts/Quicksand_Book.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
h1 {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Lobster1.1', sans-serif;
font-size:83px;
color: #FFFFFF;
margin:5px 0px;
}
h2 {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Lobster1.1', sans-serif;
font-size:30px;
color: #999999;
margin:15px 0px 5px 0px;
}
p {
font-weight: normal;
font-style: normal;
line-height:normal;
font-family: 'Quicksand Book', sans-serif;
font-size:13px;
color: #000000;
line-height:1.3em;
}
Welke browsers zijn compatible met CSS3 font-face
@font-face werkt goed in de huidige versies van Chrome, Opera, Safari en Firefox. Internet explorer ondersteunt alleen het EOT type font. Al met al dus geen exotische keus om een font te embedden. Vertel dat goede nieuws eens op een grafische afdeling en je zult vele glunderende gezichtjes zien.
Related articles by Zemanta
- Introducing the Google Font API & Google Font Directory (googlecode.blogspot.com)
- 2010: Web Fonts Are Here and Ready to Use (ajaxian.com)
- Google enters the @font-face business (wisdump.com)
- Typekit, iPad and Web Fonts (macstories.net)
[...] een manier hoe deze in te zetten. Opslag met Local Storage, get current location, Canvas en font-face zijn direct toepasbaar en een meerwaarde voor applicaties waar ik aan werk. Voor contenteditable heb [...]