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

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

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


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

Και εδώ, προκύπτουν δύο ερωτήματα – πού να λάβετε προσαρμοσμένες γραμματοσειρές για WordPress και πώς να εγκαταστήσετε προσαρμοσμένες γραμματοσειρές στον ιστότοπό σας στο WordPress.

Ας ανακαλύψουμε.

Contents

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

Οι μέρες έχουν περάσει όταν οι Times New Roman και Georgia θεωρούνταν οι μόνες γραμματοσειρές για κείμενα σε ιστότοπους. Τα τελευταία χρόνια, ο χώρος γραμματοσειρών έχει αλλάξει εντελώς με την εμφάνιση γραμματοσειρών όπως το Google Fonts και άλλες.

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

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

Η σημασία της χρήσης προσαρμοσμένων γραμματοσειρών

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

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

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

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

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

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

Πολλοί από εσάς γνωρίζετε για δωρεάν γραμματοσειρές Google. Υπάρχουν πολλοί περισσότεροι ιστότοποι όπου μπορείτε να βρείτε όμορφες γραμματοσειρές. Μερικά από αυτά είναι δωρεάν για προσωπική χρήση. Εάν χρειάζεστε για εμπορική χρήση, τότε χρειάζεστε άδεια. Οι γραμματοσειρές Google και γραμματοσειρές Adobe Edge είναι δωρεάν. Γι ‘αυτό δεν είναι τόσο μοναδικοί. Και αυτό δεν μας ταιριάζει.

Εδώ είναι μερικά άλλοι πόροι για την εύρεση γραμματοσειρών για δωρεάν και εμπορική χρήση:

  1. TemplateMonster – Στον ιστότοπο TemplateMonster marketplace, θα βρείτε τα πάντα για το Web Design που χρειάζεστε. Υπάρχουν επίσης πολλές γραμματοσειρές και πακέτα γραμματοσειρών για προσωπική χρήση σε μικρή τιμή. Επίσης, παρουσιάζονται σε ένα κιτ ανάπτυξης ιστοσελίδων. Η συλλογή είναι τεράστια και δημιουργική. Για να σας βοηθήσουμε να επιλέξετε, όλες οι γραμματοσειρές εμφανίζονται σε φυλλάδια ή πλαίσια. Κάθε γραμματοσειρά παρουσιάζεται επίσης με εμπορική άδεια.
  2. MyFonts – Το MyFonts προσφέρει αυτήν τη στιγμή τη μεγαλύτερη επιλογή γραμματοσειρών στον κόσμο. Ωστόσο, οι τιμές εδώ είναι επίσης στην υψηλότερη κατηγορία. Επομένως, εάν έχετε περιορισμένο προϋπολογισμό, μπορεί να μην είναι κατάλληλο για εσάς.
  3. Γραμματοσειρά – Η Fontspring πωλεί φανταχτερές γραμματοσειρές για εμπορική χρήση. Αλλά σε σχεδόν κάθε οικογένεια 1-2 δωρεάν γραμματοσειρές που μπορούν να χρησιμοποιηθούν για προσωπικούς σκοπούς. Εκτός αυτού, υπάρχει μια ξεχωριστή ενότητα με δωρεάν γραμματοσειρές. Η συλλογή είναι vibran. Ωστόσο, θα πρέπει να μελετήσετε προσεκτικά τις πληροφορίες άδειας χρήσης για μια συγκεκριμένη γραμματοσειρά πριν από τη λήψη.
  4. Cufonfonts – Είναι επίσης μια εκτενή συλλογή διαφορετικών γραμματοσειρών. Επιλέξτε οποιαδήποτε και θα δείτε μια σελίδα με λεπτομερείς πληροφορίες σχετικά με αυτό. Υπάρχουν πολλές δωρεάν γραμματοσειρές και χωρίζονται σε μεμονωμένες ενότητες. Το σύστημα διαλογής στο CufonFonts είναι αρκετά ευέλικτο και βολικό. Επίσης, περιλαμβάνεται υποστήριξη Webfont.
  5. Ντάφοντ – Μια άλλη προσβάσιμη συλλογή 3.500 δωρεάν γραμματοσειρών. Τα περισσότερα από αυτά έχουν σχεδιαστεί μόνο για προσωπική χρήση. Ένα ωραίο χαρακτηριστικό Το DaFont είναι ένα σύστημα κατηγοριών. Μπορείτε να επιλέξετε γραμματοσειρές σε στυλ κόμικς, βιντεοπαιχνίδια, vintage ή στυλιζαρισμένους ως ιαπωνικούς χαρακτήρες.

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

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

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

Υπάρχουν μερικοί τρόποι για να προσθέσετε γραμματοσειρές σε έναν ιστότοπο WordPress:

  1. Πρόσθετα: σε αυτήν την περίπτωση, χρησιμοποιούνται διάφορα πρόσθετα WordPress για τη διευκόλυνση της διαδικασίας.
  2. Χειροκίνητα: χρησιμοποιώντας αυτήν τη μέθοδο, χρειάζεστε μια μεταφορτωμένη γραμματοσειρά αποστολή στον ιστότοπο και να επεξεργαστείτε το αρχείο CSS.
  3. Θέματα: πολλά δημοφιλή θέματα περιλαμβάνουν ενσωματωμένες επιλογές για την προσαρμογή των γραμματοσειρών σας (σημείωση – δεν θα καλύψουμε αυτήν την επιλογή, καθώς η διαδικασία θα διαφέρει ανάλογα με το θέμα που χρησιμοποιείτε, αλλά ποιοτικά θέματα υψηλής ποιότητας όπως το θέμα Total WordPress θα προσφέρουν διαδικτυακά έγγραφα που μπορείτε εύκολα να ακολουθήσετε – όπως αυτός ο οδηγός για να προσθέσετε προσαρμοσμένες γραμματοσειρές στο Σύνολο)

Επιλογή 1 – Αλλαγή γραμματοσειρών WordPress με προσθήκες

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

Χαρακτηριστικά των πρόσθετων προσαρμοσμένων γραμματοσειρών

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

Ακολουθούν μερικά σημεία που πρέπει να λάβετε υπόψη:

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

Αυτό είναι όλο. Το πρώτο χαρακτηριστικό της λίστας είναι πολύ σημαντικό. Μπορείτε πάντα να κάνετε λήψη γραμματοσειρών από ιστότοπους όπως DaFont, Font Squirrel κ.λπ., αλλά πρέπει να μπορείτε να τις ανεβάσετε στο WordPress.

Ας δούμε μερικές προσθήκες για το WordPress που σας επιτρέπουν να ανεβάζετε προσαρμοσμένες γραμματοσειρές.

Προσαρμοσμένο πρόγραμμα μεταφόρτωσης γραμματοσειρών

Προσαρμοσμένο πρόγραμμα μεταφόρτωσης γραμματοσειρών

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

Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά

Χρησιμοποιήστε οποιαδήποτε γραμματοσειρά

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

WP Γραμματοσειρές Google

WP Γραμματοσειρές Google

Το WP Google Fonts σας επιτρέπει να χρησιμοποιήσετε τον κατάλογο γραμματοσειρών Google. Ένα από τα εκπληκτικά οφέλη αυτής της προσθήκης είναι η προσθήκη σχεδόν 1000 γραμματοσειρών Google. Ενώ μπορείτε να ενεργοποιήσετε τις γραμματοσειρές Google με μη αυτόματο τρόπο, είναι πολύ πιο εύκολο να χρησιμοποιήσετε μια προσθήκη για τους περισσότερους χρήστες.

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

Ας πάρουμε, για παράδειγμα, γραμματοσειρές Google WP. Απλώς εγκαταστήστε αυτό το πρόσθετο από το επίσημο αποθετήριο WordPress και ανοίξτε την ενότητα Γραμματοσειρές Google.

WP Γραμματοσειρές Google

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

Επιλογή 2 – Εγκαταστήστε χειροκίνητα προσαρμοσμένες γραμματοσειρές WordPress

Μέσω της οδηγίας @ font-face, μπορείτε να συνδέσετε και μία ή περισσότερες γραμματοσειρές στον ιστότοπό σας. Αλλά αυτή η μέθοδος έχει τα πλεονεκτήματα και τα μειονεκτήματά της.

Πλεονεκτήματα:

  • Μέσω CSS, μπορείτε να συνδέσετε γραμματοσειρές οποιασδήποτε μορφής: ttf, otf, woff, svg.
  • Τα αρχεία γραμματοσειρών θα βρίσκονται στον διακομιστή σας – δεν θα εξαρτάται από υπηρεσίες τρίτων.

Μειονεκτήματα:

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

Αλλά δεν είναι πραγματικό πρόβλημα αν μπορείτε απλά αντιγράψτε έναν τελικό κωδικό και πού πρέπει να καθορίσετε τις τιμές σας.

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

Βήμα 1: Δημιουργήστε ένα φάκελο “γραμματοσειρές”

Στο θέμα του παιδιού σας δημιουργήστε έναν νέο φάκελο “γραμματοσειρές” κάτω από: wp-content / θέματα / το θέμα-το παιδί σας / γραμματοσειρές

Βήμα 2. Μεταφορτώστε τα ληφθέντα αρχεία γραμματοσειρών στον ιστότοπό σας

Αυτό μπορεί να γίνει μέσω του πίνακα ελέγχου της φιλοξενίας σας ή μέσω FTP.

Προσθέστε όλα τα αρχεία γραμματοσειρών στο φάκελο γραμματοσειρών που προστέθηκε πρόσφατα: wp-content / θέματα / το θέμα-το παιδί σας / γραμματοσειρές δημιουργήσατε.

Βήμα 3. Εισαγωγή γραμματοσειρών μέσω του φύλλου στυλ παιδικού θέματος

Ανοίξτε το αρχείο style.css του παιδικού σας θέματος και προσθέστε τον ακόλουθο κώδικα στην αρχή του αρχείου CSS (μετά το σχολικό θέμα του παιδιού):

@ γραμματοσειρά {
font-family: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: μορφή url ('fonts / WebFont.eot? #iefix') ('embedded-opentype'),
μορφή url ('fonts / WebFont.woff') ('woff'),
μορφή url ('fonts / WebFont.ttf') ('truetype'),
μορφή url ('fonts / WebFont.svg # svgwebfont') ('svg');
βάρος γραμματοσειράς: κανονικό;
στυλ γραμματοσειράς: κανονικό;
}

Οπου MyWebFont είναι το όνομα της γραμματοσειράς και η τιμή της ιδιότητας src (τα δεδομένα σε παρένθεση σε εισαγωγικά) είναι η θέση τους (σχετικοί σύνδεσμοι). Πρέπει να καθορίσουμε κάθε στυλ ξεχωριστά.

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

Βήμα 4. Κατά την προσθήκη πλάγια γραφή, γράψτε τα εξής:

@ γραμματοσειρά {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
μορφή src: url ('fonts / WebFont-Italic.eot? #iefix') ('embedded-opentype'),
μορφή url ('fonts / WebFont-Italic.woff') ('woff'),
μορφή url ('fonts / WebFont-Italic.ttf') ('truetype'),
μορφή url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
βάρος γραμματοσειράς: κανονικό;
στυλ γραμματοσειράς: πλάγια;
}

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

Βήμα 5. Για να προσθέσετε την έντονη γραμματοσειρά, προσθέστε τον ακόλουθο κώδικα:

@ γραμματοσειρά {
font-family: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
μορφή src: url ('fonts / WebFont-Bold.eot? #iefix') ('embedded-opentype'),
μορφή url ('fonts / WebFont-Bold.woff') ('woff'),
μορφή url ('fonts / WebFont-Bold.ttf') ('truetype'),
μορφή url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
γραμματοσειρά: έντονο;
στυλ γραμματοσειράς: κανονικό;
}

Όπου θέτουμε την ιδιότητα γραμματοσειράς σε έντονη γραφή.

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

Βήμα 6. Για να συνδέσετε έντονα πλάγια γράμματα πληκτρολογήστε τα εξής:

@ γραμματοσειρά {
font-family: 'MyWebFont';
src: url ('γραμματοσειρές / WebFont-Italic-Bold.eot');
src: μορφή url ('fonts / WebFont-Italic-Bold.eot? #iefix') ('embedded-opentype'),
μορφή url ('fonts / WebFont-Italic-Bold.woff') ('woff'),
μορφή url ('fonts / WebFont-Italic-Bold.ttf') ('truetype'),
μορφή url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
γραμματοσειρά: έντονο;
στυλ γραμματοσειράς: πλάγια;
}

Λοιπόν, όλα αυτά �� Τώρα έχετε συνδέσει τέσσερα στυλ γραμματοσειράς στον ιστότοπό σας.

Υπάρχει όμως μια παρατήρηση – αυτή η σύνδεση γραμματοσειράς θα εμφανίζεται εσφαλμένα στον Internet Explorer 8. Η παρηγοριά είναι ότι υπάρχουν πολύ λίγα άτομα που χρησιμοποιούν ακόμα IE8.

Αναδίπλωση προσαρμοσμένων γραμματοσειρών για WordPress

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

Βεβαιωθείτε ότι δεν χρησιμοποιείτε περισσότερες από δύο γραμματοσειρές στον ίδιο ιστότοπο. Δεδομένου ότι οι περισσότερες προσαρμοσμένες γραμματοσειρές προσθέτετε στον ιστότοπο, τόσο πιο αργή γίνεται η ταχύτητα του ιστότοπου.

Αυτό είναι όλο, μη διστάσετε να σχολιάσετε. 

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

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