Γραμματοσειρές Google CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Γραμματοσειρές Google

Εάν δεν θέλετε να χρησιμοποιήσετε καμία από τις τυπικές γραμματοσειρές σε HTML, μπορείτε να χρησιμοποιήσετε τις γραμματοσειρές Google.

Οι γραμματοσειρές Google είναι δωρεάν στη χρήση και διαθέτουν περισσότερες από 1000 γραμματοσειρές για να διαλέξετε.

Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google

Απλώς προσθέστε έναν ειδικό σύνδεσμο φύλλου στυλ στην ενότητα <head> και, στη συνέχεια, ανατρέξτε στη γραμματοσειρά στο CSS.

Παράδειγμα

Εδώ, θέλουμε να χρησιμοποιήσουμε μια γραμματοσειρά με το όνομα "Sofia" από το Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Αποτέλεσμα:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Δοκιμάστε το μόνοι σας →

<!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>

Παράδειγμα

Εδώ, θέλουμε να χρησιμοποιήσουμε μια γραμματοσειρά με το όνομα "Trirong" από το Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
  
  font-family: "Trirong", serif;
}
</style>
</head>

Αποτέλεσμα:

Trirong Font

Lorem ipsum dolor sit amet.

123456790

Δοκιμάστε το μόνοι σας →

<!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>

Παράδειγμα

Εδώ, θέλουμε να χρησιμοποιήσουμε μια γραμματοσειρά με το όνομα "Audiowide" από το Google Fonts:

 <head>
<link rel="stylesheet" 
  href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
  
  font-family: "Audiowide", sans-serif;
}
</style>
</head>

Αποτέλεσμα:

Audiowide Font

Lorem ipsum dolor sit amet.

123456790

Δοκιμάστε το μόνοι σας →

<!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>

Σημείωση: Όταν προσδιορίζετε μια γραμματοσειρά στο CSS, να εμφανίζεται πάντα στο τουλάχιστον μία εναλλακτική γραμματοσειρά (για αποφυγή απροσδόκητων συμπεριφορών). Έτσι, και εδώ θα πρέπει να προσθέσετε μια γενική οικογένεια γραμματοσειρών (όπως serif ή sans-serif) στο τέλος της λίστας.

Για μια λίστα με όλες τις διαθέσιμες γραμματοσειρές Google, επισκεφτείτε τον οδηγό Πώς να - Google Fonts.

Χρησιμοποιήστε πολλές γραμματοσειρές Google

Για να χρησιμοποιήσετε πολλές γραμματοσειρές Google, απλώς διαχωρίστε τα ονόματα των γραμματοσειρών με ένα σωλήνα χαρακτήρα (|), όπως αυτός:

Παράδειγμα

Ζητήστε πολλές γραμματοσειρές:

 <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>

Αποτέλεσμα:

Audiowide Font

Sofia Font

Trirong Font

Δοκιμάστε το μόνοι σας →

<!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>

Σημείωση: Η αίτηση πολλαπλών γραμματοσειρών μπορεί να επιβραδύνει τις ιστοσελίδες σας! Γι' αυτό να προσέχεις.

Στυλ γραμματοσειρών Google

Φυσικά, μπορείτε να διαμορφώσετε τις γραμματοσειρές Google όπως θέλετε, με CSS!

Παράδειγμα

Δώστε στυλ στη γραμματοσειρά "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>

Αποτέλεσμα:

Sofia Font

Lorem ipsum dolor sit amet.

123456790

Δοκιμάστε το μόνοι σας →

<!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 έχει επίσης ενεργοποιήσει διαφορετικά εφέ γραμματοσειράς που μπορείτε να χρησιμοποιήσετε.

Πρώτα προσθέστε το effect=effectname στο Google API, στη συνέχεια προσθέστε ένα ειδικό όνομα κλάσης στο στοιχείο που πρόκειται να χρησιμοποιήσει το ειδικό αποτέλεσμα. Το όνομα της τάξης ξεκινά πάντα με font-effect- και τελειώνει με το όνομα εφέ.

Παράδειγμα

Προσθέστε το εφέ φωτιάς στη γραμματοσειρά "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>

Αποτέλεσμα:

Sofia on Fire

Δοκιμάστε το μόνοι σας →

<!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>

Για να ζητήσετε πολλά εφέ γραμματοσειράς, απλώς διαχωρίστε τα ονόματα των εφέ με έναν χαρακτήρα σωλήνα (|), ως εξής:

Παράδειγμα

Προσθέστε πολλά εφέ στη γραμματοσειρά "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>

Αποτέλεσμα:

Neon Effect

Outline Effect

Emboss Effect

Multiple Shadow Effect

Δοκιμάστε το μόνοι σας →

<!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>