Fonturi Google
Dacă nu dorești să folosești fonturile HTML standard, poți folosi Fonturi Google.
Fonturile Google sunt gratuite și au peste 1000 de fonturi din care poți alege.
Cum se folosesc Fonturile Google
Adaugă o foaie de stil specială <link> în secțiunea <head>, apoi referă fontul în CSS-ul tău.
Notă: Listează întotdeauna cel puțin un font de rezervă, precum un serif sau sans-serif generic la final, pentru a evita rezultate neașteptate.
Sofia
Folosește fontul Google Sofia pentru pagină.
Prompt
O pagină HTML care folosește fontul Google „Sofia”.
În
<head>, adaugă un <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">, apoi un bloc intern <style> care setează font-family-ul body-ului la "Sofia", sans-serif. Adaugă un titlu, o linie de text și câteva cifre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>1234567890</p>
</body>
</html>
Trirong
Folosește fontul Google Trirong pentru pagină.
Prompt
O pagină HTML care folosește fontul Google „Trirong”.
În
<head>, adaugă un <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">, apoi un bloc intern <style> care setează font-family-ul body-ului la "Trirong", serif. Adaugă un titlu, o linie de text și câteva cifre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>1234567890</p>
</body>
</html>
Audiowide
Folosește fontul Google Audiowide pentru pagină.
Prompt
O pagină HTML care folosește fontul Google „Audiowide”.
În
<head>, adaugă un <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">, apoi un bloc intern <style> care setează font-family-ul body-ului la "Audiowide", sans-serif. Adaugă un titlu, o linie de text și câteva cifre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>1234567890</p>
</body>
</html>
Utilizarea mai multor fonturi Google
Pentru a folosi mai multe fonturi Google, separă numele fonturilor cu un caracter linie verticală (|) în link.
Notă: Solicitarea multor fonturi poate încetini paginile tale, așa că ai grijă.
Exemplu
Trei fonturi sunt solicitate într-un singur link și folosite pe trei titluri.
Prompt
O pagină HTML care solicită mai multe fonturi Google deodată.
În
<head>, adaugă un <link> la https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong (numele fonturilor separate printr-o linie verticală), apoi stilizează trei clase de titluri (a, b, c) cu Audiowide, Sofia și Trirong. Adaugă câte un titlu pentru fiecare clasă.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
Stilizarea fonturilor Google
Poți stiliza fonturile Google cu CSS la fel ca orice alt font.
Exemplu
Fontului Sofia i se dă o dimensiune mai mare și o umbră de text.
Prompt
O pagină HTML care stilizează un font Google cu CSS suplimentar.
În
<head>, leagă fontul Google Sofia, apoi într-un bloc <style> setează body-ul la "Sofia", sans-serif, font-size 30px și o umbră de text (text-shadow) de 3px 3px 3px #ababab. Adaugă un titlu, o linie de text și câteva cifre.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>1234567890</p>
</body>
</html>
Activarea efectelor de font
Google oferă și efecte de font. Mai întâi adaugă effect=numeefect la link-ul Google, apoi adaugă o clasă la element. Numele clasei începe întotdeauna cu font-effect- și se termină cu numele efectului.
Pentru a folosi mai multe efecte, separă numele efectelor cu un caracter linie verticală (|).
Efect Fire
Efectul fire este adăugat fontului Sofia.
Prompt
O pagină HTML care adaugă efectul de font Google „fire”.
În
<head>, leagă https://fonts.googleapis.com/css?family=Sofia&effect=fire, setează body-ul la "Sofia", sans-serif la 30px, apoi adaugă un <h1> cu clasa "font-effect-fire".
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</html>
Efecte multiple
Mai multe efecte (neon, contur, relief și umbră multiplă) sunt solicitate deodată.
Prompt
O pagină HTML care adaugă mai multe efecte de font Google deodată.
În
<head>, leagă https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple (efecte separate printr-o linie verticală), setează body-ul la "Sofia", sans-serif la 30px, apoi adaugă patru titluri cu clasele font-effect-neon, font-effect-outline, font-effect-emboss și font-effect-shadow-multiple.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>