Aujourd'hui, nous allons apprendre ce qu'est la nouvelle police Google et comment l'implémenter immédiatement dans vos conceptions.
Il est gratuit à utiliser et peut être installé en moins d'une minute une fois que vous avez compris!
introduction
Au cours de la dernière année, de nombreuses options ont été offertes pour la mise en œuvre de polices personnalisées sur le Web. Tout le monde sait que l'avenir de la typographie Web est prometteur, mais personne ne sait exactement quel en sera le résultat.
Plusieurs entreprises ont à juste titre considéré cette technologie naissante comme un moyen de gagner de l'argent. Nous avons récemment examiné en détail certaines des options disponibles dans ce domaine. Nos articles sur TypeKit et FontDeck montrent que ces solutions sont rapides, faciles et pas si différentes. Ces types de services continueront sans aucun doute à fournir des tonnes de polices haut de gamme à des prix abordables pendant un certain temps.
Cependant, si vous jetez un coup d'œil à la technologie très populaire sur le Web, vous verrez une tendance émerger: le libre. HTML, CSS, JavaScript, PHP, ceux-ci ne coûtent pas un centime à utiliser. Il est donc raisonnable de penser que le véritable avenir de la typographie Web réside dans une solution libre qui peut être utilisée par les masses sans aucune condition.
Un changeur de jeu?
De toute évidence, lorsque Google met son chapeau dans n'importe quel anneau, il a tendance à tout changer. Récemment, Google (conjointement avec Typekit) a lancé discrètement une API de fonte Web qui pourrait entraîner un tel changement à long terme. Alors que d’autres entreprises mettent en place des abonnements, des plans de paiement et des abonnements, Google a décidé de renoncer à un service réservé aux membres, au profit d’un moyen simple et gratuit pour tout développeur Web de charger rapidement des polices personnalisées dans une conception Web.
Pour voir comment cela fonctionne, passons à un exemple rapide. Avant de commencer, voici un aperçu rapide et une démonstration en direct de ce que nous allons construire.
Le HTML
Pour plus de plaisir, utilisons HTML5 et CSS3 avec l'API de police de Google. De cette façon, nous aurons un aperçu décent du futur possible de la conception Web! N'oubliez pas qu'il existe encore des problèmes de compatibilité de navigateur avec ces technologies. Donc, si vous utilisez un navigateur insipide, sachez que votre expérience sera légèrement réduite, mais qu'elle devrait se dégrader correctement.
Le code de démarrage
Pour commencer, collez un extrait de code HTML5 vierge.
J'ai trouvé sur Snipplr une version modifiée d'un fichier de démarrage contenant un piratage JavaScript afin d'aider le bon vieil IE avec HTML5.
Les divs
Nous allons garder la page super simple et inclure uniquement un titre, une copie de sous-titre et un pied de page simple. Cela nous donnera trois zones uniques pour jouer. Nous utiliserons ces zones pour implémenter deux polices différentes à partir de l'API Google.
Comme vous pouvez le constater, j'ai utilisé une balise h1 pour le titre, une balise p pour le sous-titre et la balise de pied de page HTML5 pour le pied de page. Pour ce dernier, j'ai jeté une liste non ordonnée de liens pour avoir quelque chose en bas. N'hésitez pas à changer complètement tout cela si vous suivez, peu importe ce que vous insérez tant que vous en avez un exemplaire.
À ce stade, vous devriez avoir quelque chose de fondamental et de moche comme dans la capture d'écran ci-dessous.
C'est tout le HTML dont nous avons besoin! Passons au CSS.
Le CSS
Pour le CSS, j'ai choisi d'implémenter un bel effet typographique inspiré de ce tutoriel Line25 CSS3. Sur les navigateurs qui ne prennent pas en charge l’ombre de texte, le texte sera toujours parfaitement lisible et devra conserver la police Web de Google.
Styles de base
Premièrement, nous allons implémenter une réinitialisation CSS super basique et ajouter une couleur de fond.
Le titre
Prochaine lancer dans certains styles pour le titre. Nous voulons une couleur de police plus sombre que l'arrière-plan et une couleur d'ombre plus claire que l'arrière-plan pour créer cette belle illusion typographique.
Notez que nous avons également centré la div et le texte. J'évite généralement les mises en page Web centrées pour plusieurs raisons, mais c'est simplement pour montrer du texte, de sorte qu'une div centrée fonctionne parfaitement. Si vous ne l'aimez pas, n'hésitez pas à aligner votre texte à gauche.
Le sous-titre
La prochaine étape est la copie du sous-titre ou du paragraphe. Nous appelons cela essentiellement de la même manière que le titre en plus petit.
Notez que nous avons également ajouté des styles de lien et de survol. Lorsque l'utilisateur survole un lien, sa couleur devient plus claire et l'effet typographique devient une ombre normale.
Le pied de page
Enfin, nous allons transformer notre liste non ordonnée en une ligne horizontale de copie uniformément espacée.
Ici, j'ai appliqué des styles de lien et de survol similaires à ceux de la copie de paragraphe et ajouté des éléments de remplissage pour espacer les liens.
Prévisualisation
Notez que j'ai intentionnellement omis de mentionner les références de famille de polices. En effet, dans notre prochaine étape, nous allons insérer certaines des polices de l'API Google. Pour l'instant, votre page devrait ressembler à la capture d'écran ci-dessous. N'oubliez pas que vos polices seront probablement différentes en fonction des valeurs par défaut de votre navigateur.
Comme vous pouvez le constater, notre effet typographique fonctionne très bien. C'est subtil mais rend le texte un peu plus joli.
Ajout de polices avec l'API Google Font
Maintenant que nous avons une page de base pour jouer, il est temps de charger des polices! Commencez par passer à la page API Google Font et cliquez sur le répertoire de polices Google.
Vous verrez ici une brève liste (actuellement 18) de polices à choisir. Chaque police a plusieurs variantes et sous-familles à choisir. Lorsque vous en trouvez un que vous aimez, cliquez dessus pour voir les options supplémentaires. Je vais choisir? Je suis tombé? et la première famille sous cette police (IM Fell DW Pica).
Lorsque vous arrivez à l'écran ci-dessus, cliquez sur le bouton? Obtenir le code? languette. Sous cet onglet, vous trouverez les extraits de code dont vous aurez besoin pour insérer la police dans votre page Web. Il existe deux manières d'importer la police: en créant un lien dans la section d'en-tête de votre code HTML ou en utilisant une instruction @import. Nous utiliserons les deux pour avoir une idée de leur fonctionnement.
Méthode 1: Lien principal
Tout d’abord, prenez un extrait de code qui ressemble à celui ci-dessous et collez-le dans la partie principale de votre page HTML.
Maintenant, copiez l’extrait de code CSS et collez-le dans les sections Titre et Sous-titre de votre feuille de style.
C'est tout! Deux actions copier-coller suffisent pour créer un nouveau webfont.
Méthode 2: @Import
Maintenant, pour la police de bas de page, nous allons répéter le même processus avec un changement. Trouver la police? Inconsolata? Dans la liste de polices de Google, accédez à la rubrique? Obtenir le code? onglet et regarder sous? Les variantes de police et les techniques avancées? section pour l'extrait suivant:
Collez-le simplement dans la partie supérieure de votre page CSS, puis copiez l’extrait de code CSS de la famille de polices et collez-le dans la section du pied de page.
Voila! Votre pied de page devrait maintenant contenir la police Inconsolata.
Aperçu final
Maintenant que nous avons tous terminé, jetez un autre regard sur l'aperçu final pour le voir en action. Cliquez sur l'image pour voir la démo en direct.
Pour un contrôle plus avancé du chargement des polices, consultez WebFont Loader, une bibliothèque JavaScript fournie par Google pour vous aider à peaufiner le processus.
Avantages
Il va sans dire que c'est la solution de contrôle Web la plus rapide et la plus simple que j'ai rencontrée. Je sais que j'ai dit cela dans des articles précédents, mais ces choses ne cessent de s'améliorer! L'absence de procédure d'inscription permet au système de Google de gagner beaucoup de temps. De plus, comme vous n'avez pas à enregistrer des noms de domaine spécifiques pour obtenir une licence d'utilisation des polices, vous pouvez même les tester localement dans votre processus de développement! Cette intégration transparente dans mon flux de travail actuel a été un formidable stimulant pour moi, car je détestais développer localement avec la mauvaise police et appliquer la police personnalisée sur la page en direct.
Comme à peu près toutes les solutions WebFont populaires, le système de Google utilise @ font-face pour faire le travail. Alors pourquoi ne pas le faire vous-même? Chris Coyier souligne trois avantages principaux dans son article sur l'API de police de Google: «Les économies de bande passante (Google pondère)», la vitesse de mise en cache (même police utilisée sur plusieurs sites, la mise en cache du navigateur), et la vitesse en général (le CDN de Google est plus rapide que votre site).?
Donc, essentiellement, cela se résume à la vitesse et la vitesse! Juste une note technique au cas où vous vous poseriez la question: tout le texte est entièrement sélectionnable et copie / colle très bien. Je déteste quand les polices personnalisées sont sélectionnables sur un site, mais ne copiez pas correctement!
Les inconvénients
L'un des principaux inconvénients est qu'il existe actuellement très peu de polices parmi lesquelles choisir, ce qui peut réellement limiter vos conceptions. Par exemple, au départ, j'allais utiliser un script fluide, mais je détestais les deux choix proposés par Google.
Gardez à l'esprit que ce système est encore très récent, vous pouvez donc vous attendre à le voir grandir à mesure que de nouvelles polices gratuites sont ajoutées. Cependant, vous ne verrez probablement jamais la qualité et la diversité que vous obtiendrez d'une option haut de gamme comme FontDeck ou TypeKit.
De plus, comme l'ont souligné les membres de FontSquirrel dans un récent tweet, il n'y a pas de version SVG de la police fournie, ce qui signifie que vous devrez créer la vôtre si vous souhaitez une prise en charge iPhone / iPad.
Ma dernière plainte est qu’il existe certainement des problèmes de crénage évidents avec quelques-unes des polices disponibles (rappelez-vous qu’elles sont gratuites). Je suis un gars de l'imprimé, alors ça me fait vraiment grincer des dents. Ils sont probablement possibles à corriger avec CSS, ça va juste être un peu fastidieux et ennuyeux.
Conclusion
L'API de police de Google représente un autre chapitre de l'histoire des méthodes @ font-face permettant de créer une typographie plus diversifiée sur le Web. Bien que les choix de polices soient actuellement limités, il s'agit certainement de la meilleure implémentation que j'ai encore essayée car elle est tellement simple et rapide.
La possibilité d’abandonner le processus d’inscription et de tester localement sans les problèmes liés à l’enregistrement de domaine spécifique est pour moi un réel avantage, mais j'aimerais entendre ce que vous pensez? Aimez-vous le système de Google et si oui, l'utiliserez-vous? Utilisez la section de commentaires ci-dessous pour partager vos pensées.