Hvis du ikke ønsker at bruge nogen af standardskrifttyperne i HTML, kan du bruge Google Fonts.
Google Fonts er gratis at bruge og har mere end 1000 skrifttyper at vælge imellem.
Du skal blot tilføje et specielt typografiark-link i <head>-sektionen og derefter henvise til skrifttypen i CSS.
Her vil vi bruge en skrifttype ved navn "Sofia" fra Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>Resultat :
Lorem ipsum dolor sit amet.
123456790
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Her vil vi bruge en skrifttype ved navn "Trirong" fra Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>Resultat :
Lorem ipsum dolor sit amet.
123456790
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
<body>
<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Her vil vi bruge en skrifttype ved navn "Audiowide" fra Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>Resultat :
Lorem ipsum dolor sit amet.
123456790
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>
<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Bemærk: Når du angiver en skrifttype i CSS, skal du altid angive på mindst én reserveskrifttype (for at undgå uventet adfærd). Så også her bør du tilføje en generisk skrifttypefamilie (som serif eller sans-serif) til slutningen af listen.
Besøg vores Sådan gør du - Google Fonts Tutorial for at få en liste over alle tilgængelige Google-skrifttyper.
For at bruge flere Google-skrifttyper skal du bare adskille skrifttypenavnene med et rør tegn (|), som dette:
Anmod om flere skrifttyper:
<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>Resultat :
Prøv det selv →
<!DOCTYPE html>
<html>
<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>
<body>
<h1 class="a">Audiowide Font</h1>
<h1 class="b">Sofia Font</h1>
<h1 class="c">Trirong Font</h1>
</body>
</html>
Bemærk: Anmodning om flere skrifttyper kan gøre dine websider langsommere! Så vær forsigtig med det.
Selvfølgelig kan du style Google Fonts, som du vil, med CSS!
Stil skrifttypen "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>Resultat :
Lorem ipsum dolor sit amet.
123456790
Prøv det selv →
<!DOCTYPE html>
<html>
<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>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Google har også aktiveret forskellige skrifttypeeffekter, som du kan bruge.
Føj først effect=effectname til Google API, tilføj derefter et særligt klassenavn til det element, der skal bruge specialen effekt. Klassenavnet starter altid med font-effect- og slutter med effektnavn.
Tilføj brandeffekten til "Sofia"-skrifttypen:
<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>Resultat :
Prøv det selv →
<!DOCTYPE html>
<html>
<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>
<p class="font-effect-fire">Lorem ipsum dolor sit amet.</p>
<p class="font-effect-fire">123456790</p>
</body>
</html>
For at anmode om flere skrifttypeeffekter skal du bare adskille effektnavnene med et rørtegn (|), sådan her:
Tilføj flere effekter til "Sofia"-skrifttypen:
<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>Resultat :
Prøv det selv →
<!DOCTYPE html>
<html>
<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>
</html>