Βασικά στοιχεία του Google Font API - CSS-Κόλπα

Σύνδεση με αρχεία CSS

Ουσιαστικά, πραγματοποιείτε άμεση σύνδεση απευθείας σε αρχεία CSS στο Google.com. Μέσω παραμέτρων διεύθυνσης URL, προσδιορίζετε ποιες γραμματοσειρές θέλετε και ποιες παραλλαγές αυτών των γραμματοσειρών.

… 

Ιδέα: Μπορείτε να αποφύγετε ένα επιπλέον αίτημα δικτύου ανοίγοντας αυτό το φύλλο στυλ και αντιγράψτε και επικολλήστε το @ font-face stuff στο κύριο φύλλο στυλ σας. Προσοχή όμως: Η Google κάνει κάποιον πράκτορα χρήστη να εισπράττει πράγματα για να εξυπηρετεί μερικές φορές διαφορετικά πράγματα σε διαφορετικές συσκευές, όπως απαιτείται. Δεν θα επωφεληθείτε από αυτό εάν γίνει με αυτόν τον τρόπο.

CSS

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

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

Μπορείτε να χρησιμοποιήσετε το JavaScript FontLoader αντί να συνδεθείτε στο CSS. Έχει πλεονεκτήματα, όπως τον έλεγχο του Flash του Unstyled Text (FOUT) και επίσης μειονεκτήματα, όπως το γεγονός ότι οι γραμματοσειρές δεν θα φορτώνονται για χρήστες με JavaScript απενεργοποιημένη.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; ) 

Αυτά τα ονόματα τάξεων, π.χ. .wf-loadingεφαρμόζονται στο στοιχείο. Επομένως, παρατηρήστε όταν οι γραμματοσειρές φορτώνονται, μπορείτε να χρησιμοποιήσετε αυτό το όνομα κλάσης για να αποκρύψετε το κείμενο. Στη συνέχεια, όταν εμφανίζονται, κάντε τα ξανά ορατά. Έτσι ελέγχεται το FOUT.