Τετάρτη, 6 Απριλίου 2016

Γραμματοσειρές Google - Πως τις χρησιμοποιούμε


Η Google έχει μια σειρά φοβερών εργαλείων για τους web developers ώστε να τους βοηθήσει να χτίζουν ομορφότερες και πιο αποδοτικές ιστοσελίδες. Ένα από αυτά τα εργαλεία είναι και τα Google Fonts για τα οποία θα μάθουμε πως να τα χρησιμοποιούμε.

Το πρώτο βήμα για να επιλέξουμε τις γραμματοσειρές που ταιριάζουν περισσότερο στο project μας είναι φυσικά να δούμε όλες τις επιλογές που μας δίνει η google. Αρκεί λοιπόν να επισκεφθούμε την ιστοσελίδα https://www.google.com/fonts και να κάνουμε την επιλογή μας.

Αφού λοιπόν κάνουμε την επιλογή της κατάλληλης γραμματοσειράς τότε κάνουμε click στην επιλογή Quick-use όπως φαίνεται στην παρακάτω εικόνα.


Η επιλογή αυτή θα μας οδηγήσει στην επόμενη σελίδα που θα πρέπει να επιλέξουμε τι ακριβώς χρειαζόμαστε από τη γραμματοσειρά αυτή (κόκκινο τετράγωνο 1). Αν για παράδειγμα δεν θα χρησιμοποιήσουμε καθόλου τα bold της γραμματοσειράς δεν τα επιλέγουμε ή αν θα μας χρειαστούν τα italics τα επιλέγουμε. Καλό είναι η επιλογές μας να είναι ακριβής σε σχέση με το τι θέλουμε να κάνουμε αφού όσο περισσότερες επιλογές κάνουμε τόσο περισσότερο θα καθυστερεί η σελίδα να φορτώσει. Δεξιά στη σελίδα αυτή βλέπουμε και το ανάλογο μέτρο που μας ενημερώνει πόσο βαρύτερη γίνεται η γραμματοσειρά μας (κόκκινο τετράγωνο 2).


Και τώρα φτάνουμε στο τελικό στάδιο. Στην ίδια σελίδα, λίγο ποιο κάτω η google μας δίνει τρεις επιλογές για να φορτώσουμε τη γραμματοσειρά της στη σελίδα μας. Ο πρώτος τρόπος είναι απλά ένα link που βάζει κάποιος στη σελίδα του σαν να φόρτωνε ένα οποιοδήποτε css αρχείο. Ο δεύτερος τρόπος (κόκκινο τετράγωνο 4) είναι μια γραμμή κώδικα που πρέπει να αντιγράψουμε στο style.css της σελίδας μας και ο τρίτος είναι ένα javascript. Προσωπικά προτιμώ τον δεύτερο τρόπο όμως μια απλή αντιγραφή δεν αρκεί.



 Θα πρέπει αμέσως μετά την γραμμή κώδικα που μας δίνει η google να ενημερώσουμε το css μας πως, αν για παράδειγμα θέλουμε να έχει όλο το site μας την ίδια γραμματοσειρά:

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

Με αυτό το τρόπο ορίζουμε τη γραμματοσειρά μας ως βασική και στην περίπτωση που δεν μπορεσει να τη φορτώσει κάνει fallback σε sans-serif.

Έχουμε πλέον όμορφες γραμματοσειρές με ελάχιστο κόπο.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου