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

Ένας πολύ καλός τρόπος για να προσθέσετε κάποια επωνυμία και ατομικισμό στον ιστότοπό σας στο WordPress είναι να αλλάξετε τις γραμματοσειρές στο θέμα σας.

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

Εάν μόλις εγκαταστήσατε ένα θέμα WordPress(installed a WordPress theme) ή έχετε κάποια εμπειρία CSS και κωδικοποίησης, θα σας δείξουμε πολλές επιλογές που μπορείτε να χρησιμοποιήσετε για να αλλάξετε γραμματοσειρές στο WordPress .

Πώς να αλλάξετε γραμματοσειρές στο WordPress(How to Change Fonts in WordPress)

Υπάρχουν τρεις κύριες διαθέσιμες επιλογές για να αλλάξετε γραμματοσειρές στο WordPress:

  • Χρησιμοποιήστε γραμματοσειρές ιστού όπως το Google Fonts(Google Fonts) , το Fonts.com( Fonts.com) ή το Adobe Edge Web Fonts( Adobe Edge Web Fonts) , οι οποίες φιλοξενούνται σε ιστότοπο τρίτων
  • Κωδικοποιήστε(Code) τις γραμματοσειρές Ιστού στο θέμα σας και βάλτε τις στην ουρά
  • Φιλοξενήστε(Host) γραμματοσειρές στον ιστότοπό σας και προσθέστε τες στο θέμα σας

1. Πώς να αλλάξετε γραμματοσειρές στο WordPress χρησιμοποιώντας γραμματοσειρές Ιστού(1. How to Change Fonts in WordPress Using Web Fonts)

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

Με αυτήν την επιλογή, μπορείτε να έχετε πρόσβαση σε μια ποικιλία γραμματοσειρών(access a variety of fonts) χωρίς να τις ενημερώνετε κάθε φορά που υπάρχει μια αλλαγή και δεν βαραίνει το χώρο του διακομιστή στη φιλοξενία σας. Οι γραμματοσειρές εξυπηρετούνται απευθείας από τους διακομιστές του παρόχου χρησιμοποιώντας ένα πρόσθετο ή με την προσθήκη κώδικα στον ιστότοπό σας.

Βεβαιωθείτε(Make) ότι οι γραμματοσειρές ιστού που επιλέγετε για τον ιστότοπό σας ταιριάζουν με την ταυτότητα της επωνυμίας σας, είναι ευανάγνωστες για το κύριο κείμενο, είναι γνωστές στους επισκέπτες του ιστότοπου και μεταφέρουν το είδος της διάθεσης και της εικόνας που θέλετε.

Μπορείτε να προσθέσετε γραμματοσειρές ιστού χρησιμοποιώντας μια προσθήκη WordPress(using a WordPress plugin) ή μη αυτόματα προσθέτοντας μερικές γραμμές κώδικα στον ιστότοπό σας. Ας εξερευνήσουμε και τις δύο επιλογές.

Πώς να προσθέσετε γραμματοσειρές Ιστού χρησιμοποιώντας μια προσθήκη WordPress(How to Add Web Fonts Using a WordPress Plugin)

Ανάλογα με τη γραμματοσειρά ιστού που έχετε επιλέξει, μπορείτε να χρησιμοποιήσετε μια προσθήκη WordPress για να αποκτήσετε πρόσβαση στη βιβλιοθήκη γραμματοσειρών και να επιλέξετε αυτή που θέλετε στον ιστότοπό σας. Για αυτόν τον οδηγό, επιλέξαμε το Google Fonts(Google Fonts) και χρησιμοποιήσαμε το πρόσθετο Google Fonts Typography .

  1. Για να ξεκινήσετε, συνδεθείτε στον πίνακα ελέγχου διαχειριστή του WordPress και επιλέξτε Plugins > Add New .

  1. Πληκτρολογήστε Google Fonts Typography στο πλαίσιο αναζήτησης και επιλέξτε Εγκατάσταση τώρα(Install Now) .

  1. Επιλέξτε Ενεργοποίηση(Activate) .

  1. Στη συνέχεια, αποκτήστε πρόσβαση στο Customizer μεταβαίνοντας στο Appearance > Customize .

  1. Επιλέξτε την ενότητα Γραμματοσειρές Google(Google Fonts) .

  1. Στη συνέχεια, κάντε κλικ στον σύνδεσμο για να ανοίξετε τις ρυθμίσεις των γραμματοσειρών και να τις διαμορφώσετε ως εξής:
  • Στην περιοχή Βασικές ρυθμίσεις(Basic Settings) , ορίστε την προεπιλεγμένη γραμματοσειρά για το κυρίως κείμενο, τις επικεφαλίδες και τα κουμπιά σας.

  • Στην περιοχή Σύνθετες ρυθμίσεις(Advanced Settings) , διαμορφώστε τον τίτλο και την περιγραφή του ιστότοπού σας, το μενού, τις επικεφαλίδες και το περιεχόμενο, την πλαϊνή γραμμή και το υποσέλιδο.

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

  1. Μπορείτε να δοκιμάσετε αυτές τις ρυθμίσεις στο Customizer για να βεβαιωθείτε ότι λειτουργούν όπως θέλετε και, στη συνέχεια, να επιλέξετε Δημοσίευση(Publish) .

Σημείωση(Note) : Εάν ξεχάσετε να επιλέξετε δημοσίευση στο Customizer , θα χάσετε όλες τις αλλαγές που έχετε κάνει.

Πώς να προσθέσετε γραμματοσειρές Ιστού χρησιμοποιώντας κώδικα(How to Add Web Fonts Using Code)

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

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

Εάν αγοράσατε ένα θέμα από τον κατάλογο θεμάτων του WordPress , δημιουργήστε ένα θυγατρικό θέμα(create a child theme) και μετά δώστε του το αρχείο style.css και functions.php. Είναι πιο εύκολο αν έχετε ένα προσαρμοσμένο θέμα, καθώς μπορείτε να επεξεργαστείτε το φύλλο στυλ και το αρχείο λειτουργιών από το θέμα σας.

  1. Για να ξεκινήσετε, επιλέξτε μια γραμματοσειρά από τη βιβλιοθήκη του Google Fonts και επιλέξτε το εικονίδιο + (plus)

  1. Στη συνέχεια, επιλέξτε την καρτέλα στο κάτω μέρος όπου θα βρείτε τον κώδικα που θέλετε να προσθέσετε στον ιστότοπό σας. Μεταβείτε στην ενότητα Ενσωμάτωση γραμματοσειράς(Embed font) στην καρτέλα Ενσωμάτωση . (Embed)Θα βρείτε τον κώδικα που δημιουργείται από το Google Fonts(Google Fonts) , ο οποίος μοιάζει κάπως έτσι:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Σημείωση(Note) : Επιλέξαμε το Work Sans για αυτόν τον οδηγό, επομένως το όνομα της γραμματοσειράς μπορεί να διαφέρει από το δικό σας, ανάλογα με το τι επιλέξατε.

  1. Αντιγράψτε αυτό το μέρος του κώδικα: https://fonts.googleapis.com/css2?family=Work+Sans

Αυτό σας επιτρέπει να τοποθετήσετε το στυλ από τους διακομιστές του Google Fonts για να αποτρέψετε τη διένεξη με προσθήκες τρίτων. Επιτρέπει επίσης ευκολότερες τροποποιήσεις παιδικού θέματος.

  1. Για να βάλετε στη σειρά τη γραμματοσειρά, ανοίξτε το αρχείο συναρτήσεων και προσθέστε τον ακόλουθο κώδικα. ( Αντικαταστήστε(Replace) τον σύνδεσμο με τον σύνδεσμο που λαμβάνετε από το Google Fonts(Google Fonts) ):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

  1. Μπορείτε να προσθέσετε μια νέα γραμμή στη συνάρτησή σας ή στην ίδια γραμμή εάν θέλετε να προσθέσετε περισσότερες γραμματοσειρές στο μέλλον ως εξής:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'googleFonts');
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

Σε αυτήν την περίπτωση, έχουμε βάλει στη σειρά και τις γραμματοσειρές Cambria και Work Sans .

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

  1. Για να το κάνετε αυτό, ανοίξτε το αρχείο style.css του θέματός σας και προσθέστε τον κώδικα για το στυλ μεμονωμένων στοιχείων με τις γραμματοσειρές Ιστού σας ως εξής:

body {
font-family: 'Work Sans', sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', serif;
}

Σε αυτήν την περίπτωση, η κύρια γραμματοσειρά θα είναι Work Sans ενώ τα στοιχεία κεφαλίδας όπως h1, h2 και h3 θα χρησιμοποιούν Cambria .

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

  1. Έχετε μια εφεδρική γραμματοσειρά για να διασφαλίσετε ότι οι γραμματοσειρές μπορούν να αποδοθούν ή να έχουν εύκολη πρόσβαση, ειδικά για χρήστες με παλιές συσκευές, κακές συνδέσεις ή εάν ο πάροχος γραμματοσειρών έχει τεχνικά προβλήματα. Για να το κάνετε αυτό, μεταβείτε στο φύλλο στυλ και επεξεργαστείτε το CSS για να το διαβάσετε ως εξής:

body {
font-family: 'Work Sans', Arial, sans-serif;
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Εάν όλα πάνε καλά, οι επισκέπτες του ιστότοπού σας θα δουν τις προεπιλεγμένες γραμματοσειρές ιστού σας, στην περίπτωσή μας Work Sans και Cambria . Εάν υπάρχουν προβλήματα, θα δουν τις εφεδρικές γραμματοσειρές, για παράδειγμα Arial ή Times New Roman στην περίπτωσή μας.

2. Πώς να αλλάξετε γραμματοσειρές στο WordPress φιλοξενώντας γραμματοσειρές(2. How to Change Fonts in WordPress by Hosting Fonts)

Η φιλοξενία γραμματοσειρών στους διακομιστές σας σάς βοηθά να βελτιστοποιήσετε την απόδοση των γραμματοσειρών ιστού σας, αλλά είναι επίσης ένας πιο ασφαλής τρόπος(a more secure way) να το κάνετε αντί να αντλείτε πόρους από ιστότοπους τρίτων.

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

  1. Για να ξεκινήσετε, πραγματοποιήστε λήψη, αποσυμπίεση, ανεβάστε το αρχείο γραμματοσειράς στον ιστότοπό σας και, στη συνέχεια, συνδέστε το στο φύλλο στυλ σας. Σε αυτήν την περίπτωση δεν χρειάζεται να τοποθετήσετε τις γραμματοσειρές στο αρχείο functions.php όπως κάνατε με τις γραμματοσειρές web. Επιβεβαιώστε ότι τα αρχεία που ανεβάζετε είναι σε μορφή .woff πριν τα χρησιμοποιήσετε στον ιστότοπό σας.

  1. Στη συνέχεια, μεταβείτε στο wp-content/themes/themename για να ανεβάσετε το αρχείο γραμματοσειράς στο θέμα σας. 
  2. Ανοίξτε το φύλλο στυλ και προσθέστε τον ακόλουθο κώδικα (σε αυτήν την περίπτωση χρησιμοποιούμε τη γραμματοσειρά Work Sans , αλλά μπορείτε να την αντικαταστήσετε με τις δικές σας γραμματοσειρές):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
στυλ γραμματοσειράς: κανονικό; ( font-style: normal;)
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
στυλ γραμματοσειράς: κανονικό; (font-style: normal;)
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
στυλ γραμματοσειράς: κανονικό; ( font-style: normal;)
}

Σημείωση(Note) : Η χρήση του @fontface σάς επιτρέπει να χρησιμοποιείτε έντονη, πλάγια γραφή και άλλες παραλλαγές της γραμματοσειράς σας, μετά από τις οποίες μπορείτε να καθορίσετε το βάρος ή το στυλ για κάθε γραμματοσειρά.

  1. Στη συνέχεια, προσθέστε στυλ για τα στοιχεία σας ως εξής:

body {
font-family: 'Work Sans', Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: 'Cambria', Times New Roman, serif;
}

Προσαρμόστε την τυπογραφία του WordPress σας(Customize Your WordPress Typography)

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

Καταφέρατε(Were) να προσαρμόσετε τις γραμματοσειρές του ιστότοπού σας χρησιμοποιώντας τα βήματα χρησιμοποιώντας τις συμβουλές σε αυτόν τον οδηγό; Πείτε(Tell) μας στα σχόλια.



About the author

Είμαι μηχανικός υλικού και προγραμματιστής λογισμικού με πάνω από 10 χρόνια εμπειρίας στις πλατφόρμες Apple και Google. Οι δεξιότητές μου έγκεινται στην ανάπτυξη αποτελεσματικών, φιλικών προς τον χρήστη λύσεων σε δύσκολα προβλήματα μηχανικής. Είχα εμπειρία με συσκευές MacOS και iOS, καθώς και με χειριστήρια πληκτρολογίου και ποντικιού. Στον ελεύθερο χρόνο μου, μου αρέσει να κολυμπάω, να παρακολουθώ τένις και να ακούω μουσική.



Related posts