Από το WordPress 5.7 και για νεότερες εκδόσεις, η προεπιλεγμένη γραμματοσειρά θα είναι αυτή του συστήματος. Το ύψος μεταξύ των παραγράφων και ο σχεδιασμός της γραμματοσειράς – στις πρόσφατες εκδόσεις του Gutenberg – για αρκετούς δεν είναι καθόλου πρακτικός, οπότε θα δούμε πως μπορούμε να το διορθώσουμε.
Μιας και χρειάστηκε να κάνω την συγκεκριμένη αλλαγή σε έναν αμέτρητο αριθμό πελατών, αποφάσισα να γράψω όλες τις οδηγίες και σε ένα άρθρο, για όλους τους υπόλοιπους που δεν έχουν βρει ακόμα λύση.
Το πρόβλημα: Με τις τελευταίες εκδόσεις του WordPress, έχει αλλάξει η γραμματοσειρά μέσα στον κειμενογράφο (Gutenberg) και η γραφή κειμένων για άρθρα και σελίδες είναι πιο κουραστική. Για αρκετούς, υπάρχει επίσης μικρό κενό μεταξύ των παραγράφων, με αποτέλεσμα να κουράζονται τα μάτια περισσότερο όταν γράφουμε για αρκετές ώρες άρθρα.
Διάβασε επίσης: Δωρεάν γραμματοσειρές από ιστοσελίδες με απεριόριστα fonts
Συχνές Ερωτήσεις για την γραμματοσειρά του Gutenberg
Ποια είναι η προεπιλεγμένη γραμματοσειρά του Gutenberg;
Ποια ήταν η γραμματοσειρά που έχει προηγουμένως;
Πριν την τελευταία έκδοση, ο Gutenberg κειμενογράφος χρησιμοποιούσε τη Noto Serif γραμματοσειρά και την Times New Roman ως fallback γραμματοσειρά.
Η γραμματοσειρά δεν άλλαξε στο WordPress μου
Ενώ το WordPress έχει επιλέξει να χρησιμοποιεί την προεπιλεγμένη γραμματοσειρά του συστήματος μέσα στον Gutenberg κειμενογράφο, οι theme developers έχουν την δυνατότητα να αλλάξουν την γραμματοσειρά ώστε να είναι ίδια με αυτή που έχει και το theme.
Είναι εύκολο να αλλάξω την γραμματοσειρά στο Gutenberg;
Η διαδικασία απαιτεί να αποκτήσεις πρόσβαση στο block-editor.php αρχείο που βρίσκεται στον φάκελο “wp-includes” και να προσθέσεις ένα μικρό κομμάτι CSS κώδικα. Η διαδικασία περιγράφεται αναλυτικά παρακάτω.
Πρόσθεσα τον κώδικα αλλά η γραμματοσειρά δεν άλλαξε
Στην περίπτωση που έχεις προσθέσει την γραμματοσειρά και δεν έγινε κάποια αλλαγή, πρώτα δοκίμασε να καθαρίσεις την cache του WordPress και αμέσως μετά σιγουρέψου πως πρόσθεσες τον κώδικα στο σωστό σημείο. Αν δεν εμφανίζονται οι αλλαγές, τότε πιθανότατα κάποιο plugin ή κώδικας του theme αποτρέπει τον custom CSS κώδικα και τον αλλάζει από κάποιο άλλο μέρος. Σε αυτή την περίπτωση, θα χρειαστεί να επικοινωνήσεις με τους προγραμματιστές που έφτιαξαν το theme.
Πως να αλλάξεις την γραμματοσειρά στο Gutenberg και να αυξήσεις το ύψος μεταξύ των παραγράφων
Απέκτησε πρόσβαση στους φακέλους εγκατάστασης του WordPress
Μπορείς να το κάνεις με ένα δωρεάν πρόγραμμα όπως το FileΖilla, ή μέσα από το διαχειριστικό περιβάλλον που σου παρέχει η hosting εταιρεία σου (όπως το Plesk ή το cPanel). Τα στοιχεία σύνδεσης τα έλαβες σε ένα από τα πρώτα emails που έλαβες όταν αγόρασες το hosting πακέτο.
Βρες το block-editor.php αρχείο στον wp-includes φάκελο
Μόλις συνδεθείς και αποκτήσεις πρόσβαση στα αρχεία της WordPress εγκατάστασης, το αρχείο θα το βρεις στους root φακέλους, πιθανότατα στην τοποθεσία public_home -> wp-includes -> block-editor.php
.
Πρόσθεσε τον CSS κώδικα στο block-editor.php αρχείο
Κάνε κλικ για να ανοίξεις και να επεξεργαστείς το block-editor.php
αρχείο και καθώς βρίσκεσαι μέσα πάτα Ctrl + F
στο πληκτρολόγιο και αναζήτησε τον παρακάτω κώδικα μέσα από το μικρό πλαίσιο αναζήτησης που θα εμφανιστεί:
'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif }',
Και αντικατέστησε τον με τον παρακάτω:
'body { font-family: Open Sans; line-height: 30px; }',
Μπορείς να αντικαταστήσεις το Open Sans
με όποιο font επιθυμείς, καθώς επίσης και να αυξήσεις ή να μειώσεις το ύψος μεταξύ παραγράφων αλλάζοντας το 30px
. Τα έβαλα σε bold (έντονα) γράμματα.
Αν θέλεις να κρατήσεις τα fonts του συστήματος αλλά να αυξήσεις το ύψος μεταξύ των παραγράφων, τότε αντικατέστησε τον κώδικα με τον παρακάτω:
'body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; line-height: 30px; }',
Ο κώδικας θα πρέπει να είναι όπως και στην παρακάτω φωτογραφία:
Αποθήκευσε τις αλλαγές
Αποθήκευσε τις αλλαγές και έλεγξε αν η γραμματοσειρά έχει αλλάξει στον κειμενογράφο.
Αρκετά premium WordPress themes παρέχουν αυτή την δυνατότητα, καθώς όταν επιλέγεις προεπιλεγμένα fonts από το διαχειριστικό τους περιβάλλον, την ορίζουν και στον κειμενογράφο. Με αυτόν τον τρόπο είναι πιο εύκολο να έχεις μια καλύτερη εικόνα για το πως θα εμφανίζεται το άρθρο καθώς το γράφεις.
Δεν γνωρίζω αν σε μελλοντικές εκδόσεις αποφασίσουν να ξανά αλλάξουν την γραμματοσειρά, αλλά ακόμα και αν το κάνουν, θα βρεις τον κώδικα διαθέσιμο εδώ για να την αλλάζεις όποτε χρειάζεται.
Η διαδικασία είναι ιδιαίτερα εύκολη, αλλά αν αντιμετωπίσεις κάποιο πρόβλημα, άφησε το σχόλιο σου στο τέλος του άρθρου και ευχαρίστως να σε βοηθήσω.
Featured Image Credits: Fikret tozak στο Unsplash.