Προσθήκη προσαρμοσμένων γραμματοσειρών στο WordPress


Πώς να προσθέσετε προσαρμοσμένες γραμματοσειρές στο WordPress


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

Όπως χρώματα, εικόνες και άλλα στοιχεία, τυπογραφία παίζει μεγάλο ρόλο στον τρόπο με τον οποίο ο ιστότοπός σας γίνεται αντιληπτός από τους επισκέπτες.

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

Θα καλύψουμε όλα όσα πρέπει να γνωρίζετε για τις γραμματοσειρές WordPress:

  • A) Πώς να προσθέσετε προσαρμοσμένες γραμματοσειρές στο WordPress (χειροκίνητα)
  • Β) Πώς να προσθέσετε προσαρμοσμένες γραμματοσειρές στο WordPress (μέσω προσθήκης)
  • Γιατί να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές στο WordPress
  • Πού να βρείτε προσαρμοσμένες γραμματοσειρές
  • συμπέρασμα

Contents

A) Πώς να προσθέσετε χειροκίνητα προσαρμοσμένες γραμματοσειρές στο WordPress

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

1. Χρήση CSS και @εισαγωγή

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

εισαγωγή καρτέλας σε γραμματοσειρές google

Μπορείτε είτε να το πάρετε ως έχει και να το εισαγάγετε στην κεφαλίδα σας (περισσότερα σε αυτό παρακάτω) ή να το αντιγράψετε χωρίς >αγκύλες στην αρχή του θέματος (ή ακόμα καλύτερα, παιδικό θέμα) style.css αρχείο.

/ *
Όνομα θέματος: Είκοσι δεκαεπτά παιδιά
URI θέματος: https://wordpress.org/themes/twentyseventeen/
Πρότυπο: είκοσι δεκαέξι
Συγγραφέας: η ομάδα του WordPress
Συγγραφέας URI: https://wordpress.org/
Έκδοση: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * πρόσθετο CSS πηγαίνει εδώ * /

Αυτό θα φορτώσει τη γραμματοσειρά στον ιστότοπό σας από το φύλλο στυλ. Φαίνεται σαν μια απλή λύση, σωστά; Γιατί είναι τότε το λιγότερο συνιστώμενο?

Ο λόγος είναι ζητήματα απόδοσης. Χρησιμοποιώντας @εισαγωγή δεν είναι πλέον ο προτεινόμενος τρόπος να πάει γιατί εμποδίζει τα προγράμματα περιήγησης να κατεβάζουν ταυτόχρονα πολλά φύλλα στυλ. Η συνέπεια: βραδύτεροι χρόνοι φόρτωσης σελίδας. Μείνετε μακριά από αυτό αν μπορείτε.

2. Χρήση αρχείου προτύπου WordPress

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

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

εισαγάγετε τον κώδικα γραμματοσειρών google στην κεφαλίδα wordpress

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

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

3. Χρήση @ γραμματοσειρά

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

Για να το κάνετε αυτό, πρέπει πρώτα να κατεβάσετε την εν λόγω γραμματοσειρά. Θυμάστε το κουμπί λήψης στις Γραμματοσειρές Google; Αυτό θα γίνει βολικό τώρα. Άλλοι πάροχοι σάς επιτρέπουν επίσης να κάνετε λήψη γραμματοσειρών.

Όταν το κάνετε, βεβαιωθείτε ότι το έχετε σε μορφή γραμματοσειράς ιστού. Αυτό σημαίνει TTF, OTF ή WOFF. Θα βρείτε περισσότερες πληροφορίες σχετικά με αυτό εδώ. Εάν δεν έχετε τη σωστή μορφή γραμματοσειράς ιστού, μπορείτε επίσης να χρησιμοποιήσετε αυτή η υπηρεσία για να μετατρέψετε τη γραμματοσειρά σας σε υποστηριζόμενη.

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

Μετά από αυτό, πρέπει να φορτώσετε τη γραμματοσειρά στο φύλλο στυλ σας μέσω @ γραμματοσειρά. Δείτε πώς φαίνεται:

@ γραμματοσειρά {
γραμματοσειρά-οικογένεια: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
βάρος γραμματοσειράς: κανονικό;
}

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

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

4. Enqueueing Fonts - Ο «τρόπος WordPress»

Εάν θέλετε πραγματικά να προσθέσετε προσαρμοσμένες γραμματοσειρές στο WordPress με τον σωστό τρόπο, θα χρησιμοποιήσετε τη δική σας functions.php αρχείο (μέσα στον κατάλογο του τρέχοντος ενεργού θέματος) και τη συνάρτηση  wp_enqueue_script ή wp_enqueue_style.

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

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

Για παράδειγμα, το Google Fonts σας δίνει γραμματοσειρές ως φύλλα στυλ. Σε αυτήν την περίπτωση, θα τα προσθέσατε στον ιστότοπό σας WordPress με αυτόν τον τρόπο:

λειτουργία add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Σε αντίθεση με αυτό, οι γραμματοσειρές από το Adobe Edge Web Fonts έρχονται ως JavaScript. Επομένως, για να τους ενεργοποιήσετε στον ιστότοπό σας, ο κώδικας θα έχει την εξής μορφή:

συνάρτηση add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Δεν ήταν τόσο δύσκολο, έτσι; Επιπλέον, παίρνετε επιπλέον πόντους για να το κάνετε με τον τρόπο WordPress.

5. Καλέστε τις προσαρμοσμένες γραμματοσειρές στο φύλλο στυλ σας

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

η1,
η2,
η3,
η4,
η5,
ω6 {
font-family: 'Roboto';
}

Σημείωση: Δώστε προσοχή στον τρόπο με τον οποίο η υπηρεσία που χρησιμοποιείτε καθορίζει τη δήλωση CSS για τις γραμματοσειρές σας. Στον ιστότοπο δοκιμών μας, φαίνεται ότι δεν μπορούσαμε να λειτουργήσουμε το Adobe Edge Web Fonts επειδή καλούν Open Sans σε CSS με ανοιχτοί σε αντίθεση με «Άνοιγμα Sans» στις Γραμματοσειρές Google.

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

Β) Πώς να προσθέσετε προσαρμοσμένες γραμματοσειρές στο WordPress μέσω Plugin

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

1. Εγκαταστήστε την προσθήκη

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

2. Προσθήκη / Αλλαγή γραμματοσειρών στον ιστότοπό σας

Όταν η προσθήκη είναι ενεργή, θα βρείτε ένα νέο στοιχείο μενού που ονομάζεται Τυπογραφία υπό Εμφάνιση> Προσαρμογή.

μενού τυπογραφίας στο wordpress customizer

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

εύκολες ρυθμίσεις γραμματοσειρών google στο wordpress customizer

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

εύκολη γραμματοσειρά google αλλαγή γραμματοσειράς

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

Οι γραμματοσειρές ταξινομούνται με γραμματοσειρές standard, serif, sans-serif, display, handwriting και monospace. Ωστόσο, μπορείτε επίσης να τις αναζητήσετε απλώς με το όνομα.

Όταν κάνετε κλικ σε μια γραμματοσειρά, μπορείτε να κάνετε προεπισκόπηση των αλλαγών σε πραγματικό χρόνο στα δεξιά.

άλλαξε προσαρμοσμένη γραμματοσειρά σε εύκολες γραμματοσειρές google

3. Διαμορφώστε τη γραμματοσειρά

Μόλις επιλέξετε μια γραμματοσειρά, υπάρχουν πολλές επιλογές για να προσαρμόσετε περαιτέρω την τυπογραφία σας.

Πρώτα απ 'όλα, μπορείτε να αλλάξετε τη γραμματοσειρά / στυλ κάτω από το μενού με το ίδιο όνομα. Αυτό ελέγχει το πάχος των γραμμάτων.

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

ρυθμίσεις εμφάνισης σε εύκολες γραμματοσειρές google

Τελικά, Θέση σας επιτρέπει να αλλάξετε άλλες ρυθμίσεις, όπως περιθώριο, παραγέμισμα, περίγραμμα, ακτίνα περιγράμματος και οθόνη.

ρυθμίσεις θέσης σε εύκολες γραμματοσειρές google

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

Δεν λειτουργεί, τι πρέπει να κάνω?

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

Για παράδειγμα, στο θέμα Είκοσι Δεκαέξι, οι τίτλοι δημοσιεύσεων ιστολογίου δεν ορίζονται μόνο ως H1, αλλά έχουν επίσης μια κλάση CSS που ονομάζεται .είσοδος-τίτλος. Για το λόγο αυτό, η προσθήκη δεν είναι σε θέση να τις αλλάξει.

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

προσθέστε έλεγχο γραμματοσειράς σε εύκολες γραμματοσειρές google

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

Άλλες προσαρμοσμένες πρόσθετες γραμματοσειρές WordPress

Υπάρχουν επίσης και άλλες προσθήκες WordPress για την προσθήκη προσαρμοσμένων γραμματοσειρών:

  • Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά - Σας βοηθά να χρησιμοποιήσετε μεταφορτωμένες γραμματοσειρές χωρίς κανένα CSS. Στεγάζει γραμματοσειρές στον δικό σας διακομιστή και προσφέρει επίσης εργαλεία μετατροπής για μορφές γραμματοσειρών.
  • Γραμματοσειρές Typekit για WordPress - Χρησιμοποιήστε γραμματοσειρές από το Adobe's Typekit υπηρεσία (για την οποία πρέπει να εγγραφείτε). Σας επιτρέπει να εισάγετε κωδικούς ενσωμάτωσης και προσαρμοσμένο CSS απευθείας στην προσθήκη.
  • TK Γραμματοσειρές Google - Μια εναλλακτική λύση για την ενσωμάτωση γραμματοσειρών Google που μεταφέρει σχεδόν την εμπειρία των γραμματοσειρών Google στο backend του WordPress. Δοκιμάστε γραμματοσειρές με προεπισκόπηση και προσαρμοσμένο κείμενο και, στη συνέχεια, αλλάξτε το μέσα στο WordPress Customizer.

Γιατί να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές στον ιστότοπό σας στο WordPress?

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

1. Η τυπογραφία είναι μέρος της πρώτης εντύπωσης

Πρώτα απ 'όλα, η γραμματοσειρά που χρησιμοποιείτε επηρεάζει πολύ τον τρόπο με τον οποίο γίνεται αντιληπτός ο ιστότοπός σας. Είναι ο ιστότοπός σας διασκεδαστικός και παιχνιδιάρικο; Είστε επαγγελματίας; Οι επισκέπτες το αποφασίζουν αυτό με μια ματιά και η τυπογραφία σας παίζει μεγάλο ρόλο στην αντίληψή τους.

2. Οι γραμματοσειρές έχουν πολύ μεγαλύτερη επιρροή από ό, τι νομίζετε

Μπορεί να επηρεάσει την ικανότητά σας να μάθετε, να απομνημονεύσετε κείμενα, ακόμη και να επηρεάσετε τη διάθεσή σας.

Για παράδειγμα, σε ένα έρευνα, Σημειώθηκε ότι εάν θέλετε να αυξήσετε τον χρόνο που αφιερώνετε στην ανάγνωση κάποιου κειμένου, θα πρέπει να χρησιμοποιήσετε μια γραμματοσειρά serif. Ωστόσο, εάν θέλετε να διαβάσετε περισσότερα σε σύντομο χρονικό διάστημα, θα πρέπει να μεταβείτε σε μια γραμματοσειρά sans-serif.

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

Πού να βρείτε προσαρμοσμένες γραμματοσειρές

1. Χρησιμοποιήστε τις Γραμματοσειρές Google για να βρείτε προσαρμοσμένη τυπογραφία

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

Δείτε πώς μπορείτε να το χρησιμοποιήσετε:

2. Βρείτε τη σωστή γραμματοσειρά

Όταν πηγαίνετε για πρώτη φορά στη σελίδα Γραμματοσειρές Google (απλώς πληκτρολογήστε την στην Αναζήτηση Google), αυτό θα δείτε:

πώς να προσθέσετε προσαρμοσμένες γραμματοσειρές στην αρχική σελίδα γραμματοσειρών google wordpress

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

Εάν όχι, μπορείτε να φιλτράρετε τις γραμματοσειρές με πολλούς διαφορετικούς τρόπους, για παράδειγμα, ανά κατηγορία:

  • Ελαφρή γραμμή - Σημασία γραμματοσειρών με ευθείες γραμμές στο τέλος, όπως η Times New Roman.
  • Σανς σέριφ - Απλές γραμματοσειρές χωρίς τα σκουπίδια, όπως η Helvetica. Οι γραμματοσειρές που χρησιμοποιούνται σε αυτόν τον ιστότοπο είναι ένα παράδειγμα αυτού.
  • Απεικόνιση - Τύποι που μπορούν να χρησιμοποιηθούν σε μεγαλύτερα μεγέθη, όπως τίτλοι.
  • Γραφικός χαρακτήρας - Θέλετε η τυπογραφία σας να μοιάζει με γραμμένη στο χέρι; Τότε αυτή είναι η ρύθμιση σας.
  • Monospace - Τυπογραφία όπου όλοι οι χαρακτήρες καταλαμβάνουν τον ίδιο χώρο, σαν αυτό.

Άλλα φίλτρα περιλαμβάνουν:

  • Ταξινόμηση - Ταξινόμηση γραμματοσειρών μετά από τάσεις, δημοφιλείς, προστιθέμενες ημερομηνίες ή αλφαβητικά.
  • Γλώσσες -Περιορίστε την επιλογή γραμματοσειράς σε γλώσσες που δεν είναι γραμμένες στο λατινικό αλφάβητο, όπως αραβικά, ταϊλανδέζικα ή βιετναμέζικα.
  • Ένας αριθμός στυλ -Επιλέξτε πόσα διαθέσιμα στυλ χρειάζεστε, δηλαδή εάν μια γραμματοσειρά είναι διαθέσιμη σε διαφορετικά πάχη, πλάγια, έντονα και πολλά άλλα.
  • Πάχος - Επιλέξτε το επιθυμητό πάχος της γραμματοσειράς σας.
  • Κλίση - Το ίδιο με το πάχος αλλά για το κεκλιμένο. Κυμαίνεται από ίσιο έως σχεδόν οριζόντιο.
  • Πλάτος - Φιλτράρετε τις γραμματοσειρές με βάση το πλάτος των γραμμάτων και το διάστιχο.

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

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

επεξεργασία δείγματος κειμένου σε γραμματοσειρές google

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

σελίδα λεπτομερειών γραμματοσειρών σε γραμματοσειρές google

3. Προσθέστε γραμματοσειρές στη συλλογή σας

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

επιλεγμένες γραμματοσειρές σε γραμματοσειρές google

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

4. Προσαρμογή ρυθμίσεων γραμματοσειράς

Μόλις είστε ικανοποιημένοι με τη συλλογή σας, κάντε κλικ στο κάτω μενού. Αυτό θα ανοίξει αυτήν την οθόνη:

ρυθμίσεις γραμματοσειράς σε γραμματοσειρές google

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

προσαρμογή γραμματοσειρών σε γραμματοσειρές google

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

Ωστόσο, να είστε προσεκτικοί: όσο περισσότερα στυλ πρέπει να φορτώνει ο ιστότοπός σας, τόσο περισσότερο θα επιβραδύνεται (Οι Γραμματοσειρές Google σάς παρέχουν ακόμη μια ένδειξη της ταχύτητας φόρτωσης για την τρέχουσα συλλογή σας επάνω δεξιά). Λοιπόν, σκεφτείτε τι πραγματικά χρειάζεστε και επιλέξτε μόνο αυτό. Παρεμπιπτόντως, υπάρχουν περισσότεροι τρόποι με τους οποίους μπορείτε να επιταχύνετε το WordPress.

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

επιλέξτε γλώσσες γραμματοσειρών σε γραμματοσειρές google

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

κουμπί λήψης και κοινής χρήσης στις γραμματοσειρές google

Το αριστερό σάς επιτρέπει να κάνετε προεπισκόπηση και κοινή χρήση της συλλογής γραμματοσειρών σας. Όταν το επιλέξετε, ανοίγει μια εκτεταμένη σελίδα όπου μπορείτε να εισαγάγετε δείγμα κειμένου και να το δείτε ταυτόχρονα σε όλες τις γραμματοσειρές. Αυτή η σελίδα είναι επίσης καλή για κοινή χρήση με άτομα.

Το πιο σημαντικό είναι το κουμπί λήψης δίπλα του. Κάνοντας κλικ σε αυτό μπορείτε να κατεβάσετε τα αρχεία γραμματοσειρών για να τα χρησιμοποιήσετε στον επιτραπέζιο υπολογιστή σας (για παράδειγμα, στο Photoshop). Χρήση Skyfonts για να τα ενημερώνετε.

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

Πρόσθετη πηγή για προσαρμοσμένες γραμματοσειρές

  • Συνιστούμε 15+ γραμματοσειρές ασφαλούς ιστού

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map