Πώς να αλλάξετε τη γραμματοσειρά στο WordPress — Πλήρης οδηγός

Οι γραμματοσειρές είναι μια αναγκαιότητα του web design. Όχι μόνο στο WordPress.

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

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

Πώς να αλλάξετε τη γραμματοσειρά στο WordPress

Οι γραμματοσειρές μπορούν να εισαχθούν από το fonts.google.com ή μπορείτε να προσθέσετε μια προσθήκη για να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά Google. Εναλλακτικά, μπορείτε να φιλοξενήσετε αυτόματα οποιοδήποτε αρχείο γραμματοσειράς (WOFF, WOFF2, SVG, OTF ή TTF) κατεβάζοντας τα αρχεία από ένα χυτήριο γραμματοσειρών, μεταφορτώνοντάς τα μέσω cPanel ή FTP και, στη συνέχεια, επεξεργαστείτε το CSS για να φορτώσετε τη γραμματοσειρά.

Πώς να αλλάξετε τη γραμματοσειρά χρησιμοποιώντας το πρόγραμμα προσαρμογής του WordPress

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

Η προσαρμογή CSS προορίζεται για προγράμματα επί πληρωμή ή εκείνα σε ιστότοπους WordPress που φιλοξενούνται μόνοι τους.

Ορισμένα θέματα έχουν αναπτυχθεί για να χρησιμοποιούν τα παγκόσμια φίλτρα του WordPress. Άλλοι έχουν προσαρμοσμένες γραμματοσειρές προ-ομαδοποιημένες στο θέμα.

Για να μάθετε ποια μέθοδος λειτουργεί για το θέμα σας, μεταβείτε στις επιλογές προσαρμογής του θέματός σας.

Κάντε κλικ στο Εμφάνιση > Προσαρμογή > Γραμματοσειρές.

Εάν κάνετε κλικ στις επιλογές προσαρμογής γραμματοσειρών, εμφανίζεται ένα μήνυμα που διαβάζεται

'Μπορείτε να αλλάξετε τις γραμματοσειρές σας χρησιμοποιώντας τα καθολικά στυλ, τα οποία μπορείτε να βρείτε στον Επεξεργαστή μπλοκ',

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

Τα θέματα που έχουν φάκελο γραμματοσειρών που περιλαμβάνεται στην εγκατάσταση θα έχουν την επιλογή να αλλάξουν τη γραμματοσειρά.

Όσες δεν έχουν, δεν θα έχουν γραμματοσειρές ή επιλογές τυπογραφίας για αλλαγή. Μπορεί ακόμα να γίνει. Απλά όχι με λίγα κλικ.

Το θέμα Twenty Twenty-One είναι ένα παράδειγμα θέματος WordPress χωρίς πρόσθετες γραμματοσειρές. Αυτό έχει σχεδιαστεί για να είναι συμβατό με το Block Editor, όπου μπορείτε να αλλάξετε τις γραμματοσειρές σε νεότερα θέματα.

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

Τα παλαιότερα θέματα ή αυτά που εκτελούν το WordPress με εγκατεστημένο τον Κλασικό Επεξεργαστή πρέπει να χρησιμοποιήσουν μια λύση, η οποία δεν είναι όλα απλά.

Πώς να αλλάξετε γραμματοσειρές με το Global Style Filter

Το καθολικό φίλτρο στυλ είναι μέρος του προγράμματος επεξεργασίας μπλοκ. Για να αλλάξετε τη γραμματοσειρά σε ολόκληρο τον ιστότοπο, δημιουργήστε μια νέα ανάρτηση ή σελίδα.

Στην επάνω δεξιά γωνία του προγράμματος επεξεργασίας WordPress, υπάρχει ένα μαύρο εικονίδιο με δύο γράμματα Α – το ένα με κεφαλαία, το άλλο με πεζά – το ένα δίπλα στο άλλο.

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

Η αλλαγή των γραμματοσειρών εδώ εφαρμόζει τις αλλαγές σε όλα τα μπλοκ που περιέχουν κείμενο.

Πώς να αλλάξετε τη γραμματοσειρά στο Classic Editor

Το Global Styler είναι διαθέσιμο μόνο όταν χρησιμοποιείτε το Block Editor.

Εάν έχετε εγκαταστήσει την προσθήκη Classic Editor, μπορείτε είτε να εγκαταστήσετε μια πρόσθετη προσθήκη είτε να συνεχίσετε να διαβάζετε παρακάτω για να μάθετε πώς να αλλάξετε τη γραμματοσειρά με μη αυτόματο τρόπο στο WordPress.

Ξεκινήστε με το εργαλείο προσαρμογής θέματός σας. Η πλειοψηφία των θεμάτων WP έχει φάκελο γραμματοσειρών.

Για ταχύτητα, η εγκατάσταση μιας προσθήκης γραμματοσειράς τυπογραφίας είναι η ταχύτερη λύση για την προσαρμογή της γραμματοσειράς και των επικεφαλίδων του τύπου σας.

Δωρεάν πρόσθετα WordPress για αλλαγή τυπογραφίας γραμματοσειράς

Η χρήση ενός πρόσθετου είναι η απλούστερη και ταχύτερη μέθοδος αλλαγής γραμματοσειρών στο WordPress. Η πλειοψηφία των προσθηκών δημιουργίας σελίδων έχουν ήδη προσαρμοσμένες γραμματοσειρές. Αυτά συνδέονται με τις γραμματοσειρές Google καθώς είναι ο μόνος πάροχος γραμματοσειρών που είναι εντελώς δωρεάν στη χρήση, ακόμη και σε εμπορικούς ιστότοπους.

Εάν έχετε συνδρομή στο Adobe Creative Cloud, μπορείτε να εγκαταστήσετε την προσθήκη Adobe Fonts ή να ακολουθήσετε τις παρακάτω οδηγίες σχετικά με τον τρόπο προσθήκης προσαρμοσμένων γραμματοσειρών στο WordPress χωρίς τη χρήση προσθήκης.

Παρακάτω είναι τα 3 πιο δημοφιλή WordPress Typography Plugins

Προσθήκη Advanced Editor Tools

Μεταβείτε στο μενού Προσθήκες στην αριστερή πλαϊνή γραμμή του πίνακα ελέγχου του WordPress σας, κάντε κλικ στις προσθήκες > Προσθήκη νέου.

Πληκτρολογήστε ' Προηγμένα εργαλεία επεξεργασίας ' στη γραμμή αναζήτησης.

Μόλις εγκατασταθούν και ενεργοποιηθούν, προστίθενται πρόσθετα εργαλεία στη γραμμή εργαλείων του προγράμματος επεξεργασίας WP. Επιλέξτε το αναπτυσσόμενο μενού στα αριστερά της γραμμής εργαλείων για να επιλέξετε διαφορετική γραμματοσειρά.

Πρόσθετο WP Typography

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

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

Είναι πιο πιθανό να είναι χρήσιμο σε ιστότοπους τροφίμων που δημοσιεύουν συνταγές ή σε ιστότοπους DIY που καλύπτουν μαθηματικούς υπολογισμούς.

Για να το εγκαταστήσετε, μεταβείτε στις προσθήκες > Προσθήκη νέου και αναζητήστε Τυπογραφία WP .

Κάντε κλικ στην εγκατάσταση και ενεργοποίηση.

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

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

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

Σε ιστότοπους συνταγών, για παράδειγμα, το 1  1/2 φαίνεται καλύτερα ως 1 ¹ / _δύο.

Σε HTML, θα πρέπει να το εφαρμόσετε χρησιμοποιώντας τον εκθέτη και τον δείκτη σε HTML (ή τα κουμπιά στη γραμμή εργαλείων σας).

<sup>1</sup>/<sub>2.&nbsp;</sub>

Και καθιστά εύκολη τη μορφοποίηση σημάτων/συμβόλων εγγραφής, όπως το TM σε εκθέτη, και την εισαγωγή του συμβόλου πνευματικών δικαιωμάτων χρησιμοποιώντας το (c) και όχι τη μέθοδο σύντομου κώδικα του ALT + 0169 για λήψη ©.

Για ένα καταχωρημένο σύμβολο χρησιμοποιεί το (r). Χωρίς αυτό το πρόσθετο, ο κωδικός είναι ALT + 0174 για να λάβετε ®.

Για τη μορφοποίηση του περιεχομένου σας, σας δίνει τη δυνατότητα να αποτρέψετε τις χήρες.

Αυτό συμβαίνει όταν μόνο μία λέξη εμφανίζεται σε ξεχωριστή γραμμή.

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

Εύκολες γραμματοσειρές Google

Το Easy Google Fonts είναι το πιο χρησιμοποιούμενο πρόσθετο τυπογραφίας στο WordPress.

Για να το εγκαταστήσετε, μεταβείτε στις Προσθήκες > Προσθήκη νέου και εγκαταστήστε το Εύκολες γραμματοσειρές Google συνδέω.

Μόλις εγκατασταθεί, πρέπει να πάρετε ένα κλειδί API από την Google. Για αυτό, χρειάζεστε έναν λογαριασμό Google.

Μεταβείτε στο https://developers.google.com/fonts/docs/developer_api. .

Επιλέξτε «Δημιουργία νέου έργου» (Κάντε κύλιση προς τα κάτω στη σελίδα για να βρείτε το κουμπί «Λήψη κλειδιού») και στη συνέχεια πληκτρολογήστε ένα όνομα.

Το όνομα που χρησιμοποιείτε εδώ θα εμφανίζεται στο Google Cloud Console όπου μπορείτε να διαχειριστείτε όλα τα κλειδιά API για τον λογαριασμό σας Google.

Κάντε κλικ στο «Επόμενο» και, στη συνέχεια, αντιγράψτε το κλειδί API στο πρόχειρό σας.

Επιστρέψτε στον πίνακα ελέγχου του WordPress, στην αριστερή πλευρά του μενού, μεταβείτε στις Ρυθμίσεις > Εύκολες γραμματοσειρές Google, επιλέξτε 'Ρυθμίσεις' στο επάνω μενού πλοήγησης για την προσθήκη, επικολλήστε το κλειδί API και, στη συνέχεια, κάντε κλικ στο κουμπί αποθήκευσης.

Μόλις εγκατασταθεί, μια νέα ενότητα 'Τυπογραφία' προστίθεται στο WP Customizer. Φορτώστε το Customizer και στη συνέχεια μπορείτε να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά είναι διαθέσιμη στη διεύθυνση fonts.google.com.

Η γραμματοσειρά σώματος χρησιμοποιείται για το κύριο περιεχόμενο του ιστότοπού σας, το οποίο αφορά τις παραγράφους, το κείμενο της πλευρικής γραμμής και το κείμενο στα στοιχεία του μενού πλοήγησης.

Η γραμματοσειρά Επικεφαλίδα είναι για τις ετικέτες επικεφαλίδας H1 έως H6 και η καθεμία μπορεί να είναι διαφορετική γραμματοσειρά.

Το αντάλλαγμα για την απλότητα με το Easy Google Fonts είναι η ταχύτητα

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

Αυτό μπορεί να επιβραδύνει ελαφρώς την ταχύτητα του ιστότοπού σας.

Η διαδικασία φόρτωσης του ιστότοπού σας όταν συνδέεστε μέσω του Google Fonts API είναι πρώτα να διαβάζει την ιστοσελίδα σας HTML, μετά συνδέεται στο fonts.googleapis.com/css για να φέρει το φύλλο στυλ και μετά συνδέεται στο fonts.gstatic.com για να ανακτήσει τη γραμματοσειρά στο φορτώσει στον ιστότοπό σας.

Αυτό είναι ανά γραμματοσειρά. Αρκετά λοιπόν.

Μια διαδικασία 3 βημάτων που μπορεί να προσθέσει σχεδόν ένα δευτερόλεπτο στον χρόνο φόρτωσης της σελίδας σας. Μπορεί να μην φαίνεται πολύ, αλλά προστίθεται σε κάθε άλλο πόρο αποκλεισμού απόδοσης, συσσωρεύεται. Ένας επισκέπτης μπορεί να κάνει κλικ μακριά από τη σελίδα σας σε λιγότερο από ένα δευτερόλεπτο.

Η προσθήκη διευκολύνει τη χρήση των γραμματοσειρών Google, ωστόσο, χρειάζεται βελτιστοποίηση για απόδοση.

Μπορείτε να το κάνετε αυτό με την προσθήκη OMGF για WordPress, κάτι που πιθανότατα θα χρειαστείτε ούτως ή άλλως.

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

Γιατί αυτό έχει σημασία

Διάφορες χώρες έχουν κανονισμούς απορρήτου δεδομένων σχετικά με τη χρήση cookies που τοποθετούνται σε συσκευές χρηστών.

Η Ευρώπη έχει την πιο αυστηρή νομοθεσία προστασίας δεδομένων στον κόσμο. GDPR – Γενικοί Κανονισμοί Προστασίας Δεδομένων. Αυτό ισχύει για όλους τους ιστότοπους στους οποίους είναι δυνατή η πρόσβαση σε οποιαδήποτε χώρα εντός της Ευρωπαϊκής Ένωσης (ΕΕ).

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

Αυτό περιλαμβάνει cookie τρίτων, τα οποία το fonts.googleapis.com ή το fonts.gstatic.com χρησιμοποιεί για την αποθήκευση εγγραφών CSS επισκεπτών και αρχείων καταγραφής διευθύνσεων IP.

Ο νόμος περί απορρήτου των καταναλωτών της Καλιφόρνια (CCPA) είναι παρόμοιος ως προς το πεδίο εφαρμογής του GDPR, μόνο που δεν ρυθμίζεται το ίδιο. Στην Ευρώπη, υπάρχουν κυρώσεις για μη συμμόρφωση για τις ευρωπαϊκές επιχειρήσεις.

Ο σκοπός του CCPA είναι να αυξήσει τη διαφάνεια για τους κατοίκους της Καλιφόρνια σχετικά με τον τρόπο με τον οποίο χρησιμοποιούνται οι πληροφορίες τους.

Τεχνικά, το CCPA απαιτεί μόνο να ειδοποιούνται οι χρήστες ότι ένας ιστότοπος χρησιμοποιεί cookies και γιατί. Η επιλογή συναίνεσης εξαίρεσης δεν είναι υποχρεωτική.

Στην Ευρώπη, οι χρήστες πρέπει να έχουν τη δυνατότητα να εξαιρεθούν από τα cookies που αποθηκεύονται στις συσκευές τους.

Η Βραζιλία εφάρμοσε το LGPD, (Lei Geral de Proteçao de Dados) τον Σεπτέμβριο του 2020 που μοιάζει πολύ με τον GDPR μείον τα σκληρά πρόστιμα για μη συμμόρφωση. Σοβαρές παραβάσεις θα επισύρουν αυστηρές κυρώσεις.

Το σημαντικό μέρος των cookie ρύθμισης γραμματοσειρών Google

Μια διεύθυνση IP αναγνωρίζεται ως 'Προσωπικά στοιχεία ταυτοποίησης' (PII), επομένως το cookie που τοποθετεί η Google σε μια συσκευή χρήστη μέσω του ιστότοπού σας, καθιστά τον ιστότοπό σας υπόκειται σε GDPR, CCPA και LGPD. Εάν δεν χρησιμοποιείτε μια προσθήκη 'συναίνεσης cookie', θα πρέπει να φιλοξενήσετε τις γραμματοσειρές Google για συμμόρφωση.

Πώς να κάνετε τις γραμματοσειρές Google συμβατές με όλους τους κανονισμούς απορρήτου δεδομένων εύκολα

Η απλούστερη μέθοδος για να φιλοξενήσετε μόνοι σας τις γραμματοσειρές Google στον δικό σας διακομιστή είναι να χρησιμοποιήσετε την προσθήκη OMGF για WordPress. Εξαλείφει την ανάγκη για το Google Font API.

Υπάρχουν δύο μέθοδοι για να γίνει αυτό. Χειροκίνητα ή αυτόματα. Αλλά η αυτόματη λειτουργία απαιτεί να αγοράσετε μια άδεια Pro. Οι τιμές ποικίλλουν ανάλογα με τον αριθμό των τοποθεσιών στους οποίους το χρησιμοποιείτε.

Η μη αυτόματη μέθοδος σημαίνει μόνο ότι πρέπει να χρησιμοποιήσετε την προσθήκη για να συνδεθείτε στο Google Fonts API, να κατεβάσετε αντίγραφα (έκδοση προσωρινής αποθήκευσης) των γραμματοσειρών που θέλετε να χρησιμοποιήσετε, στους τύπους αρχείων που χρειάζεστε και, στη συνέχεια, να δημιουργήσετε ένα φύλλο στυλ για να φορτώσετε τις γραμματοσειρές από τον διακομιστή σας αντί για το Google.

Η προσθήκη OMGF αντιγράφει τα αρχεία γραμματοσειράς από το fonts.google.com και τα τοποθετεί στον διακομιστή σας. Δεν συνδέει τους χρήστες σας με τους διακομιστές Google χρησιμοποιώντας το API. Αυτό είναι το μέρος συντόμευσης για την αντιγραφή των αρχείων στην εγκατάσταση του WordPress.

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

Να πόσο εύκολο είναι να το κάνεις.

Εγκαταστήστε το πρόσθετο OMGF

Από τον πίνακα ελέγχου του WordPress, μεταβείτε στις Προσθήκες > Προσθήκη νέου.

Αναζήτηση με λέξη-κλειδί για OMGF – μια συντομογραφία για το « Βελτιστοποιήστε τις γραμματοσειρές μου Google '.

Κάντε κλικ στο κουμπί «Εγκατάσταση τώρα» και μετά κάντε κλικ στο «Ενεργοποίηση».

Μόλις γίνει αυτό, προστίθεται ένα νέο στοιχείο μενού στο μενού 'Ρυθμίσεις' με την ένδειξη 'Βελτιστοποίηση γραμματοσειρών Google'.

Κάντε κλικ σε αυτό και θα φορτωθεί η σελίδα Γενικές Ρυθμίσεις.

Μπορεί να φαίνεται τρομακτικό, ωστόσο, οι προεπιλεγμένες ρυθμίσεις είναι συνήθως επαρκείς. Το μόνο που χρειάζεται να κάνετε είναι να ελέγξετε τις ρυθμίσεις διαμόρφωσης και, στη συνέχεια, κάντε κλικ στο «Αποθήκευση και Βελτιστοποίηση».

Για τη χειροκίνητη μέθοδο, δεν μπορείτε να κάνετε πολλά.

Η έκδοση Pro έχει πολύ περισσότερες δυνατότητες βελτιστοποίησης. Με τη χρήση της δωρεάν έκδοσης δημιουργείται ένας φάκελος προσωρινής αποθήκευσης γραμματοσειρών στον διακομιστή σας. Εκεί θα αποθηκευτούν τα αρχεία σας. (/uploads/omgf).

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

Κάντε κλικ στην καρτέλα 'Ρυθμίσεις ανίχνευσης' για να ελέγξετε ότι η προεπιλεγμένη επιλογή έχει οριστεί για 'Αντικατάσταση' για 'Επεξεργασία γραμματοσειρών Google'. Εάν έχει οριστεί σε 'αφαίρεση', ο ιστότοπός σας θα επιστρέψει στις γραμματοσειρές συστήματος.

Καθώς κάνετε κύλιση προς τα κάτω στις πληροφορίες 'Ρυθμίσεις ανίχνευσης', θα συναντήσετε μια ενότητα τύπου αρχείου. Ως δωρεάν χρήστης, δεν μπορείτε να προσθέσετε διαφορετικούς τύπους αρχείων. Δεν χάνεις πολλά όμως.

Οι τύποι αρχείων WOFF και WOFF2 είναι οι προεπιλεγμένες επιλογές. Τα αρχεία EOT, TTF και SVG είναι λειτουργίες υψηλής ποιότητας. Συνεχίστε να διαβάζετε για να μάθετε περισσότερα σχετικά με τους τύπους αρχείων γραμματοσειρών και τους τύπους που χρειάζεστε.

Μόλις είστε ικανοποιημένοι με τις ρυθμίσεις, επιστρέψτε στην πρώτη καρτέλα με τίτλο 'Βελτιστοποίηση γραμματοσειρών', κάντε κύλιση προς τα κάτω στην ενότητα 'Διαχείριση βελτιστοποιημένων γραμματοσειρών', ελέγξτε ότι η διεύθυνση URL δείχνει σε μια σελίδα που έχετε δημοσιεύσει τη γραμματοσειρά ή τις γραμματοσειρές που θέλετε για να δημιουργήσετε αντίγραφα στον διακομιστή σας και, στη συνέχεια, κάντε κλικ στο «Αποθήκευση και Βελτιστοποίηση».

Όταν κάνετε κλικ στην επιλογή 'Αποθήκευση και βελτιστοποίηση', η προσθήκη θα σαρώσει τη διεύθυνση URL που έχετε ορίσει, θα ανακτήσει τα απαραίτητα αρχεία γραμματοσειράς από τους διακομιστές της Google και θα προσθέσει μια έκδοση προσωρινής μνήμης κάθε γραμματοσειράς στο θέμα σας στο WordPress.

Αυτές οι γραμματοσειρές προσωρινής αποθήκευσης θα φορτωθούν από τον διακομιστή σας αντί από το Google. Τυχόν ενεργές γραμματοσειρές στον ιστότοπό σας θα προσυμπληρωθούν στην ίδια ενότητα με επιλογές για τον τρόπο διαχείρισης των γραμματοσειρών σας.

Στο παραπάνω στιγμιότυπο οθόνης, αντιγράφηκαν μόνο δύο γραμματοσειρές. «Lato» και «Monsterrat». Οι ενεργές γραμματοσειρές στο θέμα. Όλες οι άλλες χιλιάδες γραμματοσειρές Google αγνοούνται, επομένως δεν εισάγετε ολόκληρη τη βιβλιοθήκη, καθώς αυτό πιθανότατα θα συνέθλιψε το εύρος ζώνης του διακομιστή σας.

Οι γραμματοσειρές που εισάγονται σε αυτό το παράδειγμα είναι από το θέμα. Παρά το γεγονός ότι είναι ένα θέμα Premium, χρησιμοποιεί το Google Fonts Developer API. Αυτό είναι το ίδιο με πολλά θέματα με προσαρμοσμένες γραμματοσειρές.

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

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

Τι πρέπει να ξέρετε για το FOUT

Το FOUT σημαίνει 'Flash of Unstyled Text'. Αυτό συμβαίνει όταν η γραμματοσειρά αργεί να φορτώσει. Αντί να εμφανίζεται μια λευκή οθόνη κατά τη φόρτωση της σελίδας, τα προγράμματα περιήγησης φορτώνουν την προεπιλεγμένη γραμματοσειρά.

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

Για να αποτρέψετε να συμβεί το FOUT, ορίστε πολλές γραμματοσειρές στο CSS σας.

Πώς να ρυθμίσετε εφεδρικές γραμματοσειρές με CSS

Το WordPress CSS Customizer είναι το μέρος όπου μπορείτε να ορίσετε στοίβες γραμματοσειρών. Μπορείτε να χρησιμοποιήσετε όσες θέλετε, αλλά γενικά, τέσσερα έως δέκα ονόματα γραμματοσειρών είναι αρκετά για να βεβαιωθείτε ότι έχετε γενικές εναλλακτικές γραμματοσειρές.

Λάβετε υπόψη ότι οποιαδήποτε γραμματοσειρά συμπεριλάβετε στο CSS σας πρέπει να βρίσκεται στο φάκελο γραμματοσειράς θεμάτων.

Εάν όχι, η διεύθυνση URL για τη γραμματοσειρά θα πρέπει να συμπεριληφθεί στο φύλλο στυλ θέματος χρησιμοποιώντας τη συνάρτηση @import για να τραβήξετε τη γραμματοσειρά από όπου κι αν βρίσκεται στον ιστό.

Όποιες γραμματοσειρές έχετε διαθέσιμες, μπορείτε να ορίσετε μια στοίβα γραμματοσειρών στο CSS Customizer.

Ένα παράδειγμα στοίβας γραμματοσειρών:

.body {
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif;
}

Μια εξήγηση του τρόπου με τον οποίο κωδικοποιούνται οι στοίβες γραμματοσειρών στο CSS

Το Font-family είναι αυτό που πρέπει να χρησιμοποιήσετε για να ορίσετε το όνομα της γραμματοσειράς. Για κάθε θέμα, η τάξη στην οποία εφαρμόζετε τη γραμματοσειρά θα είναι διαφορετική. Οι συνήθεις τάξεις CSS στα θέματα WP είναι για το κύριο περιεχόμενο, ή

@font-face {
font-family: Caveat Bold;
src: url(https://yoursite.com/wp-content/themes/twentynineteen/fonts/Caveat-Bold.ttf);
font-weight: normal;

.page-title {
font-family: “Caveat Bold”;
}