Προγραμματισμός

Λίγα λόγια για την Open Sans Condensed του Google web fonts

Google web fonts

Η υπηρεσία web fonts της Google είναι εξαιρετικά χρήσιμη, αφού κάνει εύκολη και προσιτή την χρήση γραμματοσειρών που δεν υπάρχουν εγκατεστημένες στο λειτουργικό σύστημα του χρήστη, προσθέτοντας ενδιαφέρον και δίνοντας παραπάνω δημιουργικές επιλογές στον web designer. Δυστυχώς, η ευκολία και οι πολλαπλάσιες επιλογές έχουν κόστος, που στη συγκεκριμένη περίπτωση μετριέται σε όγκο και προβλήματα συμβατότητας. Για να το μελετήσουμε λίγο…

[UPDATE - 9/11/2012] Από τότε που γράφτηκε αυτό το άρθρο μέχρι σήμερα, το Google έχει κάνει αλλαγές και στέλνει λίγο διαφορετικό CSS σε Internet Explorer 7 και 8.

Για τις δοκιμές μου επέλεξα την γραμματοσειρά Open Sans Condensed, για τον απλούστατο λόγο ότι δεν υπάρχουν άλλες Ελληνικές condensed γραμματοσειρές σε μια τυπική εγκατάσταση Windows (XP, Vista, 7), εξαιρώντας φυσικά την Impact. Το αν είναι καλή ή κακή, είτε αυτή είτε οι άλλες γραμματοσειρές της Google, δεν είμαι σε θέση να το κρίνω, κατανοώ ωστόσο τους λόγους για τους οποίους ένας web designer μπορεί να την επιλέξει.

Ο κώδικας HTML ή CSS που προτείνει η Google είναι πολύ απλός και έχω φτιάξει μια εξίσου απλή σελίδα δοκιμής όπου (μεταξύ άλλων) χρησιμοποιώ το <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'>. Μια άλλη λύση είναι το CSS @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700); και μια τρίτη είναι ένα κoμμάτι Javascript, με το οποίο δεν θα ασχοληθώ αφού τα fonts τελικά φορτώνονται με CSS. Η Google στέλνει διαφορετικό CSS σε κάθε browser και από εκεί πηγάζουν τα προβλήματα που ανέφερα προηγουμένως, σε Internet Explorer 7 και 8. Αν φορτώσετε την δοκιμαστική σελίδα με IE 7 ή 8 θα παρατηρήσετε πως δεν φαίνεται σωστά Open Sans Condensed Bold. Το γιατί είναι σχετικά εύκολο να το καταλάβουμε, αν δούμε τα rules που στέλνει η Google σε IE 7:

@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 300;
	src: url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xC6kCn9XFT9tXM-RebqqdG0.eot);
	src: local('Open Sans Cond Light'),
		 local('OpenSans-CondensedLight'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xC6kCn9XFT9tXM-RebqqdG0.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xLF0I8LnmRdLRTOvKd-OXMQ.woff) format('woff');
}

Ναι, δεν στέλνει καν την font-weight:700 (Bold) γραμματοσειρά! Ναι, μου πήρε πολύ χρόνο να το καταλάβω και να βρω λύση! Για να δούμε όμως το CSS που το ίδιο URL φέρνει σε Chrome:

@font-face {
	font-family: 'Open Sans Condensed';
	font-style: italic;
	font-weight: 300;
	src: local('Open Sans Cond Light Italic'),
		 local('OpenSans-CondensedLightItalic'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/jIXlqT1WKafUSwj6s9AzV1qvxng10Zx7YyzmqNB25XX3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 700;
	src: local('Open Sans Condensed Bold'),
		 local('OpenSans-CondensedBold'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xHNgOh3tnSaUO_KV-glCkRs.woff) format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 300;
	src: local('Open Sans Cond Light'),
		 local('OpenSans-CondensedLight'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xLF0I8LnmRdLRTOvKd-OXMQ.woff) format('woff');
}

Ορίστε και το CSS που φτάνει σε IE 9:

@font-face {
	font-family: 'Open Sans Condensed';
	font-style: italic;
	font-weight: 300;
	src: url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/jIXlqT1WKafUSwj6s9AzVzp4IPV9oYeHMY2wU6RLN0v3rGVtsTkPsbDajuO5ueQw.eot);
	src: local('Open Sans Cond Light Italic'),
		 local('OpenSans-CondensedLightItalic'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/jIXlqT1WKafUSwj6s9AzVzp4IPV9oYeHMY2wU6RLN0v3rGVtsTkPsbDajuO5ueQw.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/jIXlqT1WKafUSwj6s9AzV1qvxng10Zx7YyzmqNB25XX3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 700;
	src: url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGyr62ydRBu71CNvNZLm74I.eot);
	src: local('Open Sans Condensed Bold'),
		 local('OpenSans-CondensedBold'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGyr62ydRBu71CNvNZLm74I.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xHNgOh3tnSaUO_KV-glCkRs.woff) format('woff');
}
@font-face {
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 300;
	src: url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xC6kCn9XFT9tXM-RebqqdG0.eot);
	src: local('Open Sans Cond Light'),
		 local('OpenSans-CondensedLight'),
		 url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xC6kCn9XFT9tXM-RebqqdG0.eot) format('embedded-opentype'), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xLF0I8LnmRdLRTOvKd-OXMQ.woff) format('woff');
}

Είναι φανερό νομίζω πως διαφορετικά CSS καταλήγουν σε διαφορετικούς browsers και αυτό είναι ένα από τα πλεονεκτήματα της χρήσης των Google web fonts, αφού τελικά ο χρήστης κατεβάζει λιγότερα kilobytes. Δεν ξέρω όμως γιατί δεν στέλνονται τα πλήρη CSS σε IE 7/8. Έτσι δοκίμασα να καλέσω τις γραμματοσειρές ξεχωριστά, με το παρακάτω HTML…

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,greek' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic&subset=latin,greek' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,greek' rel='stylesheet'>

…το οποίο, αισίως, διορθώνει το πρόβλημα σε IE 7 και 8 αλλά χαλάει τον Opera! (11.64 είναι η version που έχω εγκατεστημένη). Μικρό το κακό μπορεί να πεις αλλά γιατί να συμβαίνει; Ίσως να μπορούμε να το βελτιώσουμε:

<!--[if lt IE 9]>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,greek' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic&subset=latin,greek' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,greek' rel='stylesheet'>
<![endif]-->
<!--[if gt IE 8]><!--><link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,greek' rel='stylesheet'><!--<![endif]-->

Ορίστε! Αυτή είναι η σωστή μέθοδος για να φορτώσετε την Open Sans Condensed στην σελίδα σας και να «παίξει» σε όλους τους browsers!

Και τι είναι το local?

Η δεύτερη λίστα της σελίδας δοκιμής φορτώνει την γραμματοσειρά με διαφορετικό τρόπο. Αρχικά κατέβασα τα fonts από τη Google και τα μετέτρεψα σε χρήσιμη μορφή με το generator του Font Squirrel. Τα αρχεία πλέον θα καλούνται από τον server σας, το οποίο γενικώς δεν είναι καλό αλλά με αυτό τον τρόπο ίσως μπορέσετε να κερδίσετε κάμποσα kilobytes αφού μπορείτε να ελέγξετε καλύτερα το τι ακριβώς θα περιλαμβάνει η γραμματοσειρά (αν μελετήσετε το forum του Font Squirrel για τις διάφορες ρυθμίσεις του generator). Επίσης, δουλεύουν σωστά σε όλους τους browsers και αποθηκεύονται στην cache του client. Οι κανόνες @font-face προφανώς μοιάζουν με αυτούς που στέλνει η Google και προέρχονται από τη σύνταξη «Bulletproof». Ορίστε τα σχετικά CSS:

@font-face {
    font-family: 'OpenSansCondensed';
    src: url('opensans-condlight.eot');
    src: url('opensans-condlight.eot?#iefix') format('embedded-opentype'),
         url('opensans-condlight.woff') format('woff'),
         url('opensans-condlight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('opensans-condlightitalic.eot');
    src: url('opensans-condlightitalic.eot?#iefix') format('embedded-opentype'),
         url('opensans-condlightitalic.woff') format('woff'),
         url('opensans-condlightitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'OpenSansCondensed';
    src: url('opensans-condbold.eot');
    src: url('opensans-condbold.eot?#iefix') format('embedded-opentype'),
         url('opensans-condbold.woff') format('woff'),
         url('opensans-condbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Σχολιάστε

Η ηλ. διεύθυνσή σας δεν κοινοποιείται. Τα υποχρεωτικά πεδία σημειώνονται με *

Επιτρέπονται τα εξής στοιχεία και ιδιότητες HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>