Πώς να χρησιμοποιήσετε τις Γραμματοσειρές Google στο επόμενο έργο σχεδίασης ιστού

Ίσως έχετε ακούσει ότι η Google διαθέτει εκατοντάδες δωρεάν γραμματοσειρές ιστού έτοιμες να χρησιμοποιηθούν για το επόμενο έργο σας. Αλλά πώς τα χρησιμοποιείτε στον ιστότοπό σας; Αυτό το άρθρο θα σας καθοδηγήσει στα βήματα που πρέπει να ακολουθήσετε για να τα εκτελέσετε στον ιστότοπό σας. Θα διαρκέσει λιγότερο από 10 λεπτά!

Τι είναι οι Γραμματοσειρές Google;

"Το Google Fonts κυκλοφόρησε για πρώτη φορά το 2010 ως μηχανική πρωτοβουλία για να προωθήσει τον ιστό και να τον κάνει γρηγορότερο." - Σχεδιασμός Google

Οι Γραμματοσειρές Google ξεκίνησαν το 2010, γρήγορα γίνονται η μεγαλύτερη, δωρεάν, ελεύθερη επιλογή γραμματοσειρών ανοιχτού κώδικα. Όλες οι γραμματοσειρές Google είναι δωρεάν για εμπορική και προσωπική χρήση. Ο ιστότοπος Google Fonts διευκολύνει τον καθένα να επιλέξει γρήγορα και να χρησιμοποιήσει διαφορετικές γραμματοσειρές για τις δικές του ανάγκες σχεδίασης.

Ποιος χρησιμοποιεί τις Γραμματοσειρές Google;

Όλοι το κάνουν! Σχεδιαστές γραφικών, σχεδιαστές UX, ερευνητές, προγραμματιστές, σχεδιαστές ιστοσελίδων, bloggers, διαχειριστές κοινωνικών μέσων, επιχειρηματίες, καλλιτέχνες, μαθητές, καθηγητές, φωτογράφοι και πολλά άλλα. Έχω δει τις γραμματοσειρές Google να χρησιμοποιούνται σε πινακίδες, αφίσες, καταστρώματα παρουσίασης, προσκλητήρια γάμου, ιστότοπους και βιβλία.

Ποιος δημιουργεί τις γραμματοσειρές;

Το Google Fonts συνεργάζεται με σχεδιαστές τύπων, χυτήρια τύπου και την κοινότητα σχεδιασμού σε όλο τον κόσμο. Αυτά τα άτομα και οι οργανισμοί σχεδιάζουν τις γραμματοσειρές που βλέπετε στις Γραμματοσειρές Google. Για παράδειγμα, ο Łukasz Dziedzic είναι ένας ανεξάρτητος σχεδιαστής γραμματοσειράς που σχεδίασε τη δημοφιλή γραμματοσειρά, Lato. Ένα χυτήριο γραμματοσειράς που ονομάζεται ParaType σχεδίασε τη γραμματοσειρά PT Serif.

Γιατί ενδιαφέρεται η Google για τις γραμματοσειρές;

Κάθε σύνδεσμος API Google Fonts σε έναν ιστότοπο δίνει στην Google την ευκαιρία να κάνει περισσότερη εξόρυξη δεδομένων. Ακούγεται ακάθαρτο; Ναι, αλλά δεν νομίζω ότι θα σας εμποδίσει να χρησιμοποιήσετε το Google Fonts.

Ένας άλλος πιο ανακουφιστικός λόγος που η Google νοιάζεται για τις γραμματοσειρές είναι επειδή θέλουν να κάνουν τις γραμματοσειρές ανοιχτού κώδικα προσβάσιμες στις μάζες. Θέλουν να δημιουργήσουν έναν ταχύτερο, πιο όμορφο ιστό που είναι πιο εύκολο στην πλοήγηση και τη χρήση. Ξεκίνησαν επίσης το Google Fonts το 2010 όταν χρειάστηκε μια τέτοια υπηρεσία, επομένως έλυσαν ένα ακόμη πρόβλημα που είχαμε στο Διαδίκτυο. #dontbeevil

Γιατί πρέπει να εξετάσω τη χρήση τους;

Δεν μπορείτε να νικήσετε δωρεάν. Είμαι σωστός? Εκτός από το ότι είναι δωρεάν, θα πρέπει να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε τις Γραμματοσειρές Google στο επόμενο έργο σχεδίασης ιστού, επειδή…

  • Οι γραμματοσειρές είναι εύκολο να εφαρμοστούν στον ιστότοπό σας
  • Υπάρχουν περισσότερες από 850 γραμματοσειρές για να διαλέξετε (και μετράνε)
  • Η συνολική ποιότητα των γραμματοσειρών συνεχίζει να αυξάνεται
  • Οι γραμματοσειρές Google είναι επίσης διαθέσιμες για εκτύπωση

Εντάξει, εντάξει, εντάξει! Τώρα για το πώς τα χρησιμοποιείτε.

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

1) Μεταβείτε στον ιστότοπο των Γραμματοσειρών Google

Επισκεφτείτε τον ιστότοπο Google Fonts όπου θα μπορείτε να επιλέξετε ανάμεσα σε 853 οικογένειες γραμματοσειρών και να μετρήσετε! Ο ιστότοπος σάς επιτρέπει να φιλτράρετε τα αποτελέσματα ανά στυλ γραμματοσειράς, γλώσσες, δημοτικότητα και βάρος. Οι Γραμματοσειρές Google διαθέτουν επίσης νέες γραμματοσειρές εάν επισκεφθείτε τη σελίδα "επιλεγμένων".

2) Αναζητήστε γραμματοσειρές που σας αρέσουν

Εάν έχετε υπόψη σας ένα όνομα οικογένειας γραμματοσειρών, μπορείτε να το αναζητήσετε.

3) Κάντε κλικ στο "+" όταν είστε έτοιμοι να το χρησιμοποιήσετε

Κάθε οικογένεια γραμματοσειρών έχει ένα κουμπί συν στην επάνω δεξιά γωνία. Κάντε κλικ στο κουμπί συν για να προσθέσετε την οικογένεια γραμματοσειρών στο "συρτάρι επιλογής" που εμφανίζεται στο κάτω μέρος της οθόνης.

4) Επαναλάβετε τα βήματα 1-3 εάν ψάχνετε περισσότερες από μία γραμματοσειρές για χρήση

5) Κάντε κλικ στο "συρτάρι επιλογής" για να εμφανίσετε όλες τις γραμματοσειρές που έχετε επιλέξει

Το "συρτάρι επιλογής" είναι το σημείο όπου θα δείτε όλες τις γραμματοσειρές που έχετε προσθέσει. Εκεί θα βρείτε τον κωδικό για προσθήκη στον ιστότοπό σας. Έχετε επίσης την επιλογή να κατεβάσετε τις γραμματοσειρές στην επιφάνεια εργασίας σας.

6) Το «συρτάρι επιλογής» είναι το σημείο όπου θα τραβήξετε τον κωδικό που θα αντιγράψετε / επικολλήσετε στους κώδικες HTML και CSS των ιστότοπών σας

Από το "συρτάρι επιλογής", θα αντιγράψετε τον κώδικα για επικόλληση σε HTML και CSS. Για να λειτουργούν οι γραμματοσειρές Google στον ιστότοπό σας, πρέπει να έχετε και την οικογένεια γραμματοσειρών συνδεδεμένη με το API γραμματοσειρών Google (σε HTML) και πρέπει να έχετε καθορίσει την οικογένεια γραμματοσειρών (στο CSS).

7) Προσθέστε διαφορετικά βάρη γραμματοσειράς και στυλ αν θέλετε κάνοντας κλικ στην καρτέλα "προσαρμογή"

Αυτή είναι η τελευταία σας ευκαιρία να προσθέσετε διαφορετικά βάρη γραμματοσειράς και στυλ στις οικογένειες γραμματοσειρών σας πριν τα προσθέσετε στον ιστότοπό σας. Προσθέστε μόνο τα βάρη και τα στυλ γραμματοσειράς που γνωρίζετε ότι θα χρειαστείτε, επειδή όσο περισσότερες γραμματοσειρές προσθέτετε τόσο πιο αργά θα φορτώσουν στον ιστότοπό σας.

8) Αντιγράψτε τον κώδικα HTML και επικολλήστε τον στον ιστότοπό σας

Εντάξει, σχεδόν τελειώσαμε! Το μόνο που πρέπει να κάνουμε τώρα είναι να αντιγράψουμε και να επικολλήσουμε τον κώδικα HTML και CSS στον ιστότοπό σας. Αρχικά, αντιγράψτε τον σύνδεσμο HTML στην κεφαλή του εγγράφου HTML.

9) Αντιγράψτε τον κανόνα CSS και επικολλήστε τον στο αρχείο CSS του ιστότοπού σας

Τέλος, πρέπει επίσης να αντιγράψουμε και να επικολλήσουμε τους κανόνες CSS στο αρχείο CSS. Εάν προσθέτετε ένα Google Font για τον ιστότοπό σας, μπορείτε να προσθέσετε τους κανόνες οικογένειας γραμματοσειρών CSS στην ετικέτα του σώματός σας. Διαφορετικά, θα πρέπει να είστε σίγουροι ότι το προσθέτετε στα σωστά στοιχεία στα αρχεία CSS.

10) Αποθηκεύστε και τα δύο αρχεία (HTML και CSS) και στη συνέχεια ανανεώστε τον ιστότοπό σας και δείτε τη νέα γραμματοσειρά

Μην ξεχάσετε να αποθηκεύσετε και να ανανεώσετε!

Ορίστε! Έχετε εφαρμόσει με επιτυχία την πρώτη σας γραμματοσειρά Google στον ιστότοπό σας. Συγχαρητήρια, κωδικοποιείτε εσείς. Είναι δίκαιο να λέμε ότι οι γραμματοσειρές Google είναι βασικά…

Περισσότερα ανάγνωση

  • "Reimagining Google Fonts" του Yuin Chien (Google Design)
  • "6 συμβουλές για καλύτερη σύζευξη γραμματοσειρών" από τον Hayden Mills (Font Pair)
  • "Επιλογή γραμματοσειρών Ιστού: Ένας οδηγός για αρχάριους" από το Google Fonts

Ευχαριστώ για την ανάγνωση

Μη διστάσετε να αφήσετε ένα σχόλιο παρακάτω ή να επικοινωνήσετε μαζί μου στο Twitter με οποιεσδήποτε ερωτήσεις ✌️

Επίσης, είμαι ο δημιουργός του Font Pair, το οποίο σας βοηθά να συνδυάσετε το Google Fonts. Δείτε τη νέα έκδοση Medium για να διαβάσετε περισσότερες δημοσιεύσεις τυπογραφίας!