Χρησιμοποιώντας τις γραμματοσειρές Google στο σχεδιασμό ιστοσελίδων σας μπορεί πραγματικά να καλύψει τον ιστότοπό σας, δίνοντάς του την γυαλισμένη και επαγγελματική εμφάνιση. Αλλά πώς το κάνεις; Λοιπόν, είναι ευκολότερο από ό, τι νομίζετε! Βασικά, θα χρειαστεί να επιλέξετε μια γραμματοσειρά από τη βιβλιοθήκη γραμματοσειρών Google, στη συνέχεια, προσθέστε κάποιο κωδικό στο αρχείο CSS. Μετά από αυτό, μπορείτε να ξεκινήσετε τη χρήση της γραμματοσειράς που επιλέξατε στο σχεδιασμό του ιστότοπού σας. Ας βουτήξουμε στις λεπτομέρειες.
Βήμα προς βήμα Tutorial: Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google στο CSS
Πριν φτάσουμε στο Nitty-Gritty, είναι σημαντικό να καταλάβουμε τι στοχεύουμε εδώ. Ακολουθώντας αυτά τα βήματα, θα είστε σε θέση να ενσωματώσετε οποιαδήποτε γραμματοσειρά από την τεράστια βιβλιοθήκη της Google στον ιστότοπό σας, η οποία θα σας επιτρέψει να προσαρμόσετε την τυπογραφία του ιστότοπού σας ώστε να ταιριάζει με το στυλ της μάρκας σας.
Βήμα 1: Επιλέξτε τη γραμματοσειρά σας Google
Επιλέξτε μια γραμματοσειρά από τις γραμματοσειρές Google που θέλετε να χρησιμοποιήσετε στον ιστότοπό σας.
Η επιλογή της σωστής γραμματοσειράς μπορεί να ρυθμίσει τον τόνο για ολόκληρο τον ιστότοπό σας. Εξετάστε την αναγνωσιμότητα και την προσωπικότητα της γραμματοσειράς και πώς συμπληρώνει το σχεδιασμό του ιστότοπού σας. Οι γραμματοσειρές Google παρέχουν εκατοντάδες επιλογές γραμματοσειράς, οπότε πάρτε το χρόνο σας για να επιλέξετε αυτό που ταιριάζει καλύτερα στις ανάγκες σας.
Βήμα 2: Αποκτήστε τον κώδικα ενσωμάτωσης
Κάντε κλικ στο κουμπί "+" δίπλα στη γραμματοσειρά και, στη συνέχεια, ανοίξτε την καρτέλα "Embed" για να πάρετε τον κώδικα Embed.
Μόλις επιλέξετε μια γραμματοσειρά, οι γραμματοσειρές Google θα σας δώσουν ένα κομμάτι κώδικα HTML για να ενσωματώσετε τον ιστότοπό σας. Αυτός ο κωδικός συνδέεται με το API Google Fonts και είναι απαραίτητο για την επιλεγμένη γραμματοσειρά σας για να εμφανιστεί σωστά στον ιστότοπό σας.
Βήμα 3: Προσθέστε τον κώδικα ενσωμάτωσης στο HTML σας
Τοποθετήστε τον κώδικα ενσωμάτωσης στην ενότητα του εγγράφου HTML.
Είναι σημαντικό να τοποθετήσετε αυτόν τον κώδικα ενσωμάτωσης στο τμήμα κεφαλής του HTML σας για να βεβαιωθείτε ότι η γραμματοσειρά φορτώνει πριν από το υπόλοιπο του περιεχομένου σας. Αυτό βοηθά στην αποτροπή κάθε φλας του μη στρωμένου κειμένου όταν φορτώνει η σελίδα σας.
Βήμα 4: Καθορίστε τη γραμματοσειρά Google στο CS σας
Χρησιμοποιήστε την ιδιοκτησία της οικογένειας γραμματοσειράς στο αρχείο CSS για να καθορίσετε πού θα θέλατε να εμφανιστεί η επιλεγμένη γραμματοσειρά Google.
Για παράδειγμα, εάν θέλετε όλες τις επικεφαλίδες στον ιστότοπό σας να είναι στη γραμματοσειρά Google που έχετε επιλέξει, θα προσθέσετε την ιδιοκτησία της οικογένειας γραμματοσειράς στο H1, H2, H3, κλπ., Επιλογές. Βεβαιωθείτε ότι το όνομα της γραμματοσειράς στο CSS σας ταιριάζει ακριβώς με το όνομα που παρέχεται από τις γραμματοσειρές Google.
Αφού ολοκληρώσετε με επιτυχία αυτά τα βήματα, ο ιστότοπός σας θα εμφανίσει τώρα τη γραμματοσειρά Google που επιλέξατε!
Μόλις ρυθμιστούν όλα, ο ιστότοπός σας θα έχει μια νέα ματιά με τη νέα σας γραμματοσειρά. Οι χρήστες που επισκέπτονται τον ιστότοπό σας θα δουν τη γραμματοσειρά που επιλέξατε, εφόσον έχουν σύνδεση στο Διαδίκτυο. Δεδομένου ότι η γραμματοσειρά φιλοξενείται από την Google, θα πρέπει να φορτώνεται γρήγορα και δεν θα επιβραδύνει τον ιστότοπό σας.
- Επιλέξτε γραμματοσειρές που είναι βελτιστοποιημένες στο Web για να βεβαιωθείτε ότι φορτώνουν γρήγορα και φαίνονται υπέροχα σε όλες τις συσκευές.
- Εξετάστε τη σύζευξη συμπληρωματικών γραμματοσειρών για επικεφαλίδες και κείμενο του σώματος για συνεκτικό σχεδιασμό.
- Χρησιμοποιήστε βάρη γραμματοσειράς και στυλ με φειδώ για να διατηρήσετε μια καθαρή και επαγγελματική εμφάνιση.
- Δοκιμάστε την επιλεγμένη γραμματοσειρά Google σε διαφορετικά προγράμματα περιήγησης και συσκευές για να εξασφαλίσετε τη συμβατότητα.
- Ελέγξτε τακτικά για ενημερώσεις ή νέες γραμματοσειρές που προστίθενται στη βιβλιοθήκη γραμματοσειρών Google για να ανανεώσετε το σχεδιασμό του ιστότοπού σας.
Συχνές ερωτήσεις
Πόσες γραμματοσειρές Google μπορώ να χρησιμοποιήσω στον ιστότοπό μου;
Μπορείτε να χρησιμοποιήσετε όσες γραμματοσειρές Google θέλετε, αλλά είναι καλύτερο να περιορίσετε τον αριθμό για λόγους απόδοσης.
Κάθε γραμματοσειρά που προσθέτετε θα κάνει τον ιστότοπό σας λίγο πιο αργό να φορτώσει, οπότε είναι καλή ιδέα να χρησιμοποιήσετε μόνο μερικές γραμματοσειρές που λειτουργούν καλά μαζί.
Πρέπει να κατεβάσω τις γραμματοσειρές Google στον υπολογιστή μου;
Όχι, δεν χρειάζεται να κατεβάσετε τις γραμματοσειρές. Φιλοξενούνται από την Google και έχουν πρόσβαση μέσω του κώδικα Embed.
ΣΥΓΓΕΝΕΥΩΝ:Πώς να κατεβάσετε τις γραμματοσειρές στο iPad: Ένας οδηγός βήμα προς βήμα για αρχάριους
Αυτό σημαίνει ότι δεν χρειάζεται να αποθηκεύσετε τα αρχεία γραμματοσειράς στο διακομιστή σας, τα οποία μπορούν να σας εξοικονομήσουν χώρο και εύρος ζώνης.
Μπορώ να χρησιμοποιήσω τις γραμματοσειρές Google για εμπορικά έργα;
Ναι, όλες οι γραμματοσειρές Google είναι δωρεάν και ανοιχτό κώδικα, ώστε να μπορείτε να τις χρησιμοποιήσετε για προσωπικά και εμπορικά έργα.
Απλά φροντίστε να συμπεριλάβετε τον κώδικα ενσωμάτωσης στα έργα σας για να διασφαλίσετε ότι οι γραμματοσειρές εμφανίζονται σωστά.
Τι γίνεται αν η γραμματοσειρά Google που θέλω να χρησιμοποιήσω δεν είναι διαθέσιμη;
Εάν η συγκεκριμένη γραμματοσειρά Google που θέλετε δεν είναι διαθέσιμη, ίσως χρειαστεί να βρείτε μια παρόμοια γραμματοσειρά ή να εξετάσετε τη χρήση μιας εναλλακτικής λύσης για το διαδίκτυο.
Θα μπορούσατε επίσης να επικοινωνήσετε με την ομάδα Google Fonts για να δείτε αν σχεδιάζουν να προσθέσουν τη γραμματοσειρά στο μέλλον.
Είναι δυνατόν να χρησιμοποιήσετε τις γραμματοσειρές Google εκτός σύνδεσης;
Όχι, χρειάζεστε μια σύνδεση στο Διαδίκτυο για να χρησιμοποιήσετε τις γραμματοσειρές Google καθώς έχουν πρόσβαση μέσω του API Google Fonts.
Εάν χρειάζεστε τη γραμματοσειρά για να είναι διαθέσιμη εκτός σύνδεσης, θα χρειαστεί να κατεβάσετε τα αρχεία γραμματοσειράς και να τα φιλοξενήσετε στο διακομιστή σας.
Περίληψη
- Επιλέξτε τη γραμματοσειρά σας Google
- Λάβετε τον κώδικα ενσωμάτωσης
- Προσθέστε τον κώδικα ενσωμάτωσης στο HTML σας
- Καθορίστε τη γραμματοσειρά Google στο CSS σας
Σύναψη
Εκεί το έχετε, λαοί-ένας οδηγός φιλικός προς τους αρχάριους για τον τρόπο χρήσης των γραμματοσειρών Google στο CSS. Δεν είναι πραγματικά τόσο εκφοβιστικό όσο φαίνεται. Σκεφτείτε τις γραμματοσειρές Google ως θησαυρό των τυπογραφικών δυνατοτήτων που μπορούν να αυξήσουν την εμφάνιση και την αίσθηση του ιστότοπού σας. Με μια απλή διαδικασία λήψης γραμματοσειράς, ενσωμάτωσης και εφαρμογής της στο CSS σας, μπορείτε να μεταμορφώσετε την τυπογραφία του ιστότοπού σας σε χρόνο μηδέν.
Θυμηθείτε, το κλειδί είναι να το κρατήσετε απλό. Μην πηγαίνετε στη θάλασσα με πολλαπλές γραμματοσειρές, καθώς μπορεί να κάνει τον ιστότοπό σας να φαίνεται γεμάτο και να επηρεάσει την απόδοσή του. Κολλήστε σε μία ή δύο γραμματοσειρές που αντικατοπτρίζουν την προσωπικότητα της μάρκας σας και είναι εύκολο να διαβαστούν. Και πάντα να έχετε επίγνωση του τρόπου με τον οποίο οι γραμματοσειρές σας καθιστούν σε διαφορετικά προγράμματα περιήγησης και συσκευές για να εξασφαλίσετε μια απρόσκοπτη εμπειρία χρήστη.
Τελικά, η χρήση γραμματοσειρών Google είναι ένα αεράκι και είναι ένας εξαιρετικός τρόπος για τους σχεδιαστές ιστοσελίδων και τους προγραμματιστές να έχουν πρόσβαση σε τυπογραφίες υψηλής ποιότητας χωρίς κανένα κόστος. Είναι μια πρόσκληση να είστε δημιουργικοί, να πειραματιστούν και να βρείτε αυτό το τέλειο ζευγάρωμα γραμματοσειρών που μιλάει στο κοινό σας. Συνεχίστε λοιπόν, δοκιμάστε το και παρακολουθήστε το σχέδιο του ιστότοπού σας να ζωντανεύει με τη δύναμη της τυπογραφίας!