Οι γραμματοσειρές Google έγιναν ο βασικός πόρος για την προσαρμοσμένη τυπογραφία ιστού από την ανάπτυξή τους το 2010. Υπάρχουν τρεις κύριοι λόγοι που η Google έγινε η πρώτη θέση εδώ. Πρώτον, δεν υπήρχαν υπηρεσίες γραμματοσειρών που να ήταν αρκετά αξιοπρεπείς, οπότε η Google γέμισε το κενό. Δεύτερον, ακόμη και στην αρχή, η ποικιλία που πρόσφεραν ήταν σχετικά μεγάλη. Επί του παρόντος, υπάρχουν περισσότερες από 800 γραμματοσειρές διαθέσιμες σε πολλά στυλ. Τρίτον, αυτές οι γραμματοσειρές είναι διαθέσιμες δωρεάν, γεγονός που τις καθιστά ιδιαίτερα ελκυστικές.
Επιπλέον, είναι εκπληκτικά εύκολο να ενσωματωθούν στα σχέδια σχεδιασμού σας. Θα σας δείξουμε πώς μπορείτε να συμπεριλάβετε αυτές τις γραμματοσειρές Google στον ιστότοπό σας στο WordPress.
Γραμματοσειρές Google
Για να ξεκινήσετε, θα πρέπει να επιλέξετε τη γραμματοσειρά με την οποία θέλετε να εργαστείτε. Υπάρχει μια ποικιλία επιλογών, επομένως έχετε ένα αρκετά μεγάλο μενού για να διαλέξετε. Μπορείτε να τα βρείτε πηγαίνοντας στο Σελίδα γραμματοσειράς της Google
. Αν ψάχνετε για μια συγκεκριμένη γραμματοσειρά, τότε απλώς πληκτρολογήστε το όνομα της γραμματοσειράς στο πλαίσιο Αναζήτηση και θα εμφανιστεί ένα δείγμα.Υπάρχουν επίσης άλλες παράμετροι αναζήτησης που μπορείτε να χρησιμοποιήσετε. Ακριβώς κάτω από το πλαίσιο αναζήτησης υπάρχει ένα κουμπί που ονομάζεται Κατηγορίες. Εάν κάνετε κλικ σε αυτό, θα εμφανιστεί ένα αναπτυσσόμενο μενού με πέντε επιλογές. Αυτά είναι τα εξής:
- Serif – Πρόκειται για γραμματοσειρές με σύντομες γραμμές που προέρχονται από τις πάνω και κάτω πινελιές ενός γράμματος. Οι Times New Roman και ο Sylfaen είναι καλά παραδείγματα.
- Sans Serif - Όπως υποδηλώνει το όνομα, αυτές είναι γραμματοσειρές χωρίς αυτές τις μικρές γραμμές. Τείνουν να έχουν απλή και καθαρή αισθητική.
- Εμφάνιση – Αυτές είναι που μπορούν να ονομαστούν γραμματοσειρές που τραβούν την προσοχή. Είναι καλύτερα για επικεφαλίδες παρά για μεγάλο κείμενο.
- Χειρόγραφο – Αυτές οι γραμματοσειρές κάνουν να φαίνεται ότι κάποιος τις έγραψε με το χέρι. Θα διαπιστώσετε ότι πολλοί είναι σε καμπύλες ή έχουν λιγότερο σταθερό διάστημα.
- Monospace – Όπως μια γραφομηχανή, τα γράμματά τους καταλαμβάνουν το ίδιο οριζόντιο πλάτος. Απέχουν πολύ σταθερά.
Επιπλέον, έχετε και άλλες επιλογές από τις οποίες μπορείτε να διαλέξετε, όπως η επιλογή των ιδιοτήτων γλώσσας και γραμματοσειράς. Το τελευταίο περιλαμβάνει τον αριθμό των στυλ, το πάχος, την κλίση και το πλάτος.
Ενσωμάτωση γραμματοσειρών στο WordPress
Εάν θέλετε να συμπεριλάβετε αυτές τις μοναδικές γραμματοσειρές στον ιστότοπό σας στο WordPress, υπάρχουν πολλές μέθοδοι που μπορείτε να δοκιμάσετε.
Χρησιμοποιώντας CSS
Κάντε κλικ στη γραμματοσειρά από την επιλογή της Google και θα σας μεταφέρει στη λεπτομερή σελίδα γραμματοσειράς. Στην επάνω δεξιά γωνία, υπάρχει το σύμβολο «+». Κάντε κλικ σε αυτό και θα ανοίξει ένα πλευρικό παράθυρο. Κάντε κλικ στο «Ενσωμάτωση».
Τώρα μπορείτε να κάνετε κλικ @εισαγωγή. Αυτό θα ανοίξει τον κώδικα CSS που πρέπει να αντιγράψετε. Μεταβείτε στο φύλλο στυλ του θέματος WordPress και επικολλήστε το στην αρχή. Βεβαιωθείτε ότι έχετε αντιγράψει τον σύνδεσμο εισαγωγής χωρίς το αγκύλες. Βεβαιωθείτε ότι έχετε αποθηκεύσει και θα έχετε προσθέσει τη γραμματοσειρά.
Χρήση PHP
Ακολουθήστε τα πρώτα βήματα και αντιγράψτε τον σύνδεσμο που λαμβάνετε αφού κάνετε κλικ στο σύμβολο "+". Τώρα, απλώς προσθέστε το στο αρχείο header.php του θέματός σας. Θυμηθείτε να αποθηκεύσετε για να προστεθεί η γραμματοσειρά.
Χρήση μιας συνάρτησης Javascript
Μπορείτε επίσης να δοκιμάσετε κάτι που είναι γνωστό ως "ουρά". Θα χρειαστεί να χρησιμοποιήσετε τη συνάρτηση wp_enqueue_style για αυτό. Μέσω αυτής της μεθόδου, μπορείτε να προσθέσετε την επιλεγμένη γραμματοσειρά στην ενότητα κεφαλίδας όλων των σελίδων του ιστότοπού σας. Είναι ένας πολύ καλός τρόπος για να προσθέσετε πολλές αλλαγές ταυτόχρονα.
Απλώς λάβετε τον σύνδεσμο της γραμματοσειράς (από http μέχρι το ") και προσθέστε τον στο αρχείο functions.php του θέματός σας με επιπλέον κώδικα γύρω του. Ακολουθεί ο κώδικας που θα χρειαστεί να χρησιμοποιήσετε:
συνάρτηση custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap, false );
}
add_action( "wp_enqueue_scripts", "custom_add_google_fonts");
Οποιαδήποτε από αυτές τις επιλογές θα λειτουργήσει πολύ καλά για την ενσωμάτωση των γραμματοσειρών Google στον ιστότοπό σας στο WordPress, επομένως είναι σημαντικό να επιλέξετε αυτήν με την οποία αισθάνεστε πιο άνετα.