Πως να διορθώσετε το πρόβλημα με το rendering των Open Sans & Roboto Google Fonts στον Mozilla Firefox.
Οι Έλληνες Site Developers εμπιστεύονται τα Google fonts στα Site που κατασκευάζουν σε διάφορες πλατφόρμες (WordPress, Blogger, Joomla κλπ) διότι είναι δωρεάν, είναι της Google, και δεν χρειάζεται να τα κατεβάσουν και να επιβαρύνουν τον διαθέσιμο χώρο τους.
Τα πιο διαδεδομένα είναι τα Open Sans και Roboto διότι υποστηρίζουν την Ελληνική γραμματοσειρά. Και ενώ οι περισσότεροι Browsers δεν έχουν πρόβλημα στο rendering της Ελληνικής γραμματοσειράς των Open Sans και Roboto, ο Mozilla Firefox έρχεται να ταράξει τα νερά και να δημιουργήσει πρόβλημα.
Με χαρά λοιπόν και μετά από τα γνωστά ραντεβού με τον πελάτη, έχουμε βρει το κατάλληλο theme για να ξεκινήσουμε το development. Κοιτάμε σε όλους τους Browser τη δουλειά μας και διαπιστώνουμε ότι ο Mozilla FireFox δεν κάνει σωστά render στη γραμματοσειρά (rendering issue), επιλέγοντας τη δεύτερη ή την τρίτη κατά σειρά γραμματοσειρά που έχουμε δηλώσει στον κώδικα.
Κοιτάμε το αρχικό theme σε Mozilla FireFox και βλέπουμε ότι δουλεύει σωστά. Τι κάναμε λάθος;
Τίποτα δεν κάνατε λάθος είναι η απάντηση. Δυστυχώς για εμάς τους Έλληνες και για όλους όσους έχουν άλλη γραμματοσειρά πρέπει να προσθέσουμε την υποστήριξη των Ελληνικών στη γραμματοσειρά για να μπορέσει ο Mozilla FireFox να την κάνει σωστά render.
Πηγαίνουμε στον κώδικα του site μας και ψάχνουμε να βρούμε την γραμματοσειρά μας:
<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic’ rel=’stylesheet’ type=’text/css’>
Όλα καλά ως εδώ! Αυτό δουλεύει άψογα για τα site με λατινικούς χαρακτήρες και είναι χρήσιμο μόνο στις περιπτώσεις δίγλωσσων site ώστε να μην φορτώνει κάθε φορά όλα τα styles της γραμματοσειράς.
Εμείς όμως, θέλουμε το παρακάτω για να δουλέψει σωστά ο Mozilla FireFox:
<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek,greek-ext’ rel=’stylesheet’ type=’text/css’>
Στην ουσία αυτό που κάνει την διαφορά είναι το &subset=latin,greek,greek-ext
Μετά την προσθήκη αυτή, δοκιμάστε να κάνετε refresh το site σας στον Mozilla FireFox και ως δια μαγείας το πρόβλημα έχει επιλυθεί.
