Ha nem szeretné használni a szabványos betűtípusok egyikét sem a HTML-ben, használhatja a Google Fonts szolgáltatást.
A Google Fonts ingyenesen használható, és több mint 1000 betűtípus közül választhat.
Csak adjon hozzá egy speciális stíluslap hivatkozást a <head> szakaszhoz, majd hivatkozzon a betűtípusra a CSS-ben.
Itt egy „Sofia” nevű betűtípust szeretnénk használni a Google Fontsból:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>Eredmény:
Lorem ipsum dolor sit amet.
123456790
Próbálja ki Ön is →
<!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>
Itt a Google Fonts "Trirong" nevű betűtípusát szeretnénk használni:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>Eredmény:
Lorem ipsum dolor sit amet.
123456790
Próbálja ki Ön is →
<!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>
Itt a Google Fonts "Audiowide" nevű betűtípusát szeretnénk használni:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>Eredmény:
Lorem ipsum dolor sit amet.
123456790
Próbálja ki Ön is →
<!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>
Megjegyzés: Ha betűtípust ad meg a CSS-ben, mindig a listát adja meg legalább egy tartalék betűtípus (a váratlan viselkedés elkerülése érdekében). Tehát itt is fel kell venni egy általános betűtípuscsaládot (például serif vagy sans-serif) a lista végére.
Az összes elérhető Google-betűtípus listáját megtekintheti a Hogyan - Google Fonts oktatóanyagunkban.
Ha több Google-betűtípust szeretne használni, egyszerűen válassza el a betűtípusneveket pipával karakter (|), így:
Több betűtípus kérése:
<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>Eredmény:
Próbálja ki Ön is →
<!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>
Megjegyzés: Több betűtípus kérése lelassíthatja weboldalait! Szóval óvatosan ezzel.
Természetesen a Google Fonts stílusát tetszés szerint alakíthatja a CSS segítségével!
A "Sofia" betűtípus stílusa:
<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>Eredmény:
Lorem ipsum dolor sit amet.
123456790
Próbálja ki Ön is →
<!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>
A Google különböző betűtípus-effektusokat is engedélyezett, amelyeket használhat.
Először adja hozzá az effect=effectname elemet a Google API-hoz, majd adjon hozzá egy speciális osztálynevet ahhoz az elemhez, amely a speciálisat fogja használni hatás. Az osztálynév mindig a font-effect- karakterlánccal kezdődik és a effektusnévvel végződik.
Adja hozzá a tűz effektust a "Sofia" betűtípushoz:
<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>Eredmény:
Próbálja ki Ön is →
<!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>
Több betűtípus-effektus kéréséhez egyszerűen válassza el az effektusneveket egy cső karakterrel (|), így:
Több effektus hozzáadása a "Sofia" betűtípushoz:
<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>Eredmény:
Próbálja ki Ön is →
<!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>