CSS Google-lettertypen
Google-lettertypen
Als u geen van de standaardlettertypen in HTML wilt gebruiken, kunt u Google Fonts gebruiken.
Google Fonts is gratis te gebruiken en heeft meer dan 1000 lettertypen om uit te kiezen.
Hoe Google-lettertypen te gebruiken
Voeg gewoon een speciale stylesheet-link toe in de <head>-sectie en verwijs vervolgens naar het lettertype in de CSS.
Voorbeeld
Hier willen we een lettertype gebruiken met de naam "Sofia" van Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Resultaat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Voorbeeld
Hier willen we een lettertype gebruiken met de naam "Trirong" van Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Resultaat:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Voorbeeld
Hier willen we een lettertype gebruiken met de naam "Audiowide" van Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Resultaat:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Opmerking: wanneer u een lettertype specificeert in CSS, vermeld dan altijd minimaal één fallback-lettertype (om onverwacht gedrag te voorkomen). Dus ook hier moet je een generieke lettertypefamilie (zoals schreef of schreefloos) aan het einde van de lijst toevoegen.
Bezoek onze How To - Google Fonts Tutorial voor een lijst met alle beschikbare Google Fonts .
Gebruik meerdere Google-lettertypen
Als u meerdere Google-lettertypen wilt gebruiken, scheidt u de namen van de lettertypen met een pipe-teken ( |), als volgt:
Voorbeeld
Vraag meerdere lettertypen aan:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Resultaat:
Audiowide Font
Sofia Font
Trirong Font
Let op: het aanvragen van meerdere lettertypen kan uw webpagina's vertragen! Dus wees daar voorzichtig mee.
Google-lettertypen stylen
Natuurlijk kun je Google Fonts stylen zoals je wilt, met CSS!
Voorbeeld
Stijl het lettertype "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Resultaat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Lettertype-effecten inschakelen
Google heeft ook verschillende lettertype-effecten ingeschakeld die u kunt gebruiken.
Voeg eerst toe aan de Google API en voeg vervolgens een speciale klassenaam toe aan het element dat het speciale effect gaat gebruiken. De klassenaam begint altijd met
en eindigt met de .effect=effectnamefont-effect-effectname
Voorbeeld
Voeg het vuureffect toe aan het lettertype "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Resultaat:
Sofia on Fire
Om meerdere lettertype-effecten aan te vragen, scheidt u de effectnamen met een pipe-teken ( |), als volgt:
Voorbeeld
Voeg meerdere effecten toe aan het lettertype "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Resultaat:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect