Παίρνουμε λίγο διάλειμμα από την αναζήτηση για να λύσουμε ένα μικρό πρόβλημα.
Το "FOUT" είναι το "Flash of Unstyled Text". Αυτό είναι φαινόμενο όπου οι γραμματοσειρές @ font-face χρειάζονται λίγο για φόρτωση και έτσι βλέπετε την εναλλακτική γραμματοσειρά πριν από την προσαρμοσμένη γραμματοσειρά. Αυτό δεν είναι συνήθως πρόβλημα στο Typekit. Ούτε είναι πραγματικά πρόβλημα στα σύγχρονα προγράμματα περιήγησης αυτές τις μέρες (εκτός του IE 9). Ωστόσο, είναι πρόβλημα για εμάς, επειδή επιλέξαμε συγκεκριμένα να φορτώσουμε το JavaScript Typekit ασύγχρονα.
Η ελπίδα όμως δεν χάνεται, η Typekit έχει καλύψει αυτό το πρόβλημα, απλώς πρέπει να κάνουμε μια δουλειά στον ιστότοπό μας. Βάζουμε ένα νέο όνομα κλάσης στο στοιχείο που ονομάζεται "wf-loading" (φόρτωση γραμματοσειράς web). Στη συνέχεια, στο CSS μας, δηλώνουμε ότι οποιοσδήποτε επιλογέας που χρησιμοποιεί μια προσαρμοσμένη γραμματοσειρά είναι ορατά κρυμμένος μέχρι να εξαφανιστεί το όνομα της τάξης. Λίγο ριψοκίνδυνα μπορεί να σκεφτείτε, αλλά εάν η γραμματοσειρά αποτύχει να φορτώσει υπάρχει ένα χρονικό όριο που καταργεί την τάξη ούτως ή άλλως. Αυτό είναι μόνο για την καταπολέμηση του FOUT, να θυμάστε, λίγο οπτική ομορφιά.
Τα κάνουμε όλα αυτά κάνοντας ένα μικρό Sass που @mixinονομάζεται "preventFOUT" και -το το @includeκάνουμε στις προσαρμοσμένες στοίβες γραμματοσειρών μας, οι οποίες είναι επίσης @mixins.
Αυτό λειτουργεί καλά για εμάς τώρα. Τελικά σε αυτόν τον σχεδιασμό μεταβαίνουμε σε γραμματοσειρές HF&J στις οποίες φορτώνουν απευθείας μέσω του @ font-face, οπότε ουσιαστικά σταματάμε να ανησυχούμε γι 'αυτό.