W3.CSS Google Fonts
Met W3.CSS is dit uiters maklik om nuwe lettertipes by te voeg.
- Baie maklik om te gebruik (slegs CSS en HTML)
- Onbeperkte gebruik van eksterne fontbiblioteke (soos Google Fonts)
- Werk in alle moderne blaaiers
Dit is Roboto
Dit is Sofia
Sofia aan die brand
Die maak van die web!
Die maak van die web!
Die maak van die web!
Die maak van die web!
Die maak van die web!
Gebruik Google Fonts
Google Fonts is gratis om te gebruik, en het meer as 1000 lettertipes om van te kies.
In die kop van jou webblad, skakel na 'n Google-lettertipe:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Voeg dan die CSS by oor waar om dit te gebruik:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Nog 'n voorbeeld
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Skep 'n lettertipe klas
In die kop van jou webblad, skakel na 'n Google-lettertipe:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Skep dan 'n fontklas:
Voorbeeld
.w3-sofia {
font-family: Sofia, cursive;
}
Gebruik die fontklas op jou webblad:
Voorbeeld
<p class="w3-sofia">Making the Web!</p>
Die maak van die web!
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>
Die maak van die web!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Die maak van die web!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Die maak van die web!
Voorbeeld
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Die maak van die web!