
Σήμερα έκανα μια βόλτα στο περιοδικό Smashing Magazine όταν παρατήρησα κάτι περίεργο στην μπάρα κατάστασης του περιηγητή μου. Καθώς έβλεπα τα ονόματα των συνδέσμων που άνοιγαν στον περιηγητή μου κατά το φόρτωμα της σελίδας, το μάτι μου έμεινε για λίγο στο σύνδεσμο fonts.googleapis.com ! Το συγκεκριμένο έτοιμα αφορούσε μια γραμματοσειρά που αποκαλείτε “Droid Sans” σε κανονική και σε bold μορφή.
<link href='http://fonts.googleapis.com/css?family=Droid Sans:regular,bold' rel='Stylesheet' type='text/css'/ >
Στη συνέχεια έψαξα λίγο περισσότερο και άνοιξα να δω το περιεχόμενο του CSS και είδα τον ακόλουθο κώδικα :
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: local('Droid Sans'),
url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g')
format('truetype');
}
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: bold;
src: local('Droid Sans'),
url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw')
format('truetype');
}
Από τα παραπάνω είναι εύκολο να διαπιστώσουμε πως η Google μπαίνει στη αγορά της διάθεσης online γραμματοσειρών μαζί με άλλες εταιρείες, όπως για παράδειγμα την TypeKit και την Fonts.com. Μπορείτε προφανώς να υποθέσετε πως αυτά είναι άσχημα νέα για αυτές τις εταιρείες, γιατί κατά πάσα πιθανότητα η Google θα διανέμει τις γραμματοσειρές της δωρεάν.
Ωστόσο αυτή η κίνηση της Google δεν έγινε για να κυριαρχήσει στην αγορά γραμματοσειρών, αλλά για συνεργασία. Η Google έχει συνεργαστεί με την TypeKit για να δημιουργήσει το WebFont Loader – μία API γραμμένη σε JavaScript που επιταχύνει το φόρτωμα των χαρακτήρων. Η Google έχει δημοσιεύσει επίσης και ένα παράδειγμα για το πως να χρησιμοποιήσετε την νέα API
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>
<style type="text/css">
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: 'Tangerine', serif
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px
}
</style>
</head>
<body>
<h1>This is using Cantarell</h1>
<p>This is using Tangerine!</p>
</body>
</html>
Raph Levien
Thanks for the writeup (and sorry for only commenting in English). We have Greek ranges in a number of our font families, and hope to be turning on additional subsets in the coming weeks.