W3.CSS Google-lettertypen
Met W3.CSS is het uiterst eenvoudig om nieuwe lettertypen toe te voegen.
- Zeer eenvoudig te gebruiken (alleen CSS en HTML)
- Onbeperkt gebruik van externe lettertypebibliotheken (zoals Google Fonts)
- Werkt in alle moderne browsers
Dit is Roboto
Dit is Sofia
Sofia in vuur en vlam
Het internet maken!
Het internet maken!
Het internet maken!
Het internet maken!
Het internet maken!
Google-lettertypen gebruiken
Google Fonts is gratis te gebruiken en heeft meer dan 1000 lettertypen om uit te kiezen.
Link in de kop van uw webpagina naar een Google-lettertype:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Voeg vervolgens de CSS toe over waar deze te gebruiken:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Een ander voorbeeld
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Een lettertypeklasse maken
Link in de kop van uw webpagina naar een Google-lettertype:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Maak vervolgens een lettertypeklasse:
Voorbeeld
.w3-sofia {
font-family: Sofia, cursive;
}
Gebruik in uw webpagina de lettertypeklasse:
Voorbeeld
<p class="w3-sofia">Making the Web!</p>
Het internet maken!
Voorbeeld
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Het internet maken!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Het internet maken!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Het internet maken!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Het internet maken!