Plusieurs options sont apparues récemment pour ajouter des polices personnalisées à votre site Web à l’aide du sélecteur @ font-face. TypeKit est un nouveau joueur excitant dans ce jeu car il se distingue dans deux domaines clés: la facilité d'utilisation et la richesse des polices disponibles. Ce tutoriel vous guidera à travers plusieurs étapes simples et super simples pour que TypeKit soit opérationnel sur votre site. Vous ne trouverez pas de techniques avancées ou de script ici, donc même si vous êtes un concepteur web novice, cela devrait être un jeu d'enfant!
Première: les mauvaises nouvelles
Si vous naviguez sur le site Web TypeKit, vous verrez que vous avez seulement le choix de vous inscrire pour une invitation. Cela ne signifie pas que vous en obtiendrez un immédiatement, vous devrez peut-être attendre un moment avant de pouvoir vous inscrire. Heureusement, j'ai pu décrocher une invitation du propriétaire du site Design Shack, David Appleyard, afin de vous faire visiter les environs!
S'enregistrer
Lorsque vous vous inscrivez, vous devez choisir entre quatre plans. Pendant que vous secouez la tête avec déception, laissez-moi vous expliquer pourquoi ce n'est pas simplement un service gratuit. En termes simples, les polices coûtent de l'argent. Il existe quelques grandes fonderies de polices qui créent et vendent des polices de qualité qu'ils ne téléchargeront pas gratuitement. Auparavant, même si en tant que bon citoyen, vous payiez le prix fort pour une police de qualité, vous ne pouviez toujours pas mettre cette police sur votre site en raison de problèmes de licence. En bref, l'intégration de la police signifiait que les utilisateurs pouvaient la voler pour eux-mêmes. TypeKit évite ce problème en raison des accords passés avec les principales fonderies pour autoriser les polices à utiliser uniquement sur le Web. Cela signifie que vous n'êtes pas coincé avec des polices gratuites vilaines et de qualité médiocre pour votre site, mais plutôt avec une large sélection de polices professionnelles de premier ordre, comme dans le monde de l'impression. En bref, la qualité a un prix. Voici les plans que vous pouvez choisir:
Notez que pour ce didacticiel, je vais utiliser la démo gratuite. Nous allons donc voir une sélection de polices réduite et nous limiterons à deux polices personnalisées sur notre site. Dans cet esprit, jetons un coup d'œil à notre terrain d'essai!
Le site de test
Pour ce tutoriel, j'ai construit un site simple et rapide avec des tonnes de texte. Vous aurez besoin de savoir que j'ai stylé l'en-tête principal en utilisant le? H1? balise et le texte du paragraphe en utilisant un simple? p? étiquette. Pour voir le site de test en direct (et beaucoup plus grand), cliquez ici ou regardez simplement la capture d'écran ci-dessous.
Kit d'installation
Après avoir choisi un plan, votre prochaine étape consiste à créer votre premier kit et à configurer une URL. Gardez à l'esprit que vous n'avez pas besoin d'insérer une adresse de page spécifique, mais plutôt l'URL du site dans son ensemble. Par exemple, vous pouvez voir que je viens de taper l'URL principale de Design Shack.
Lors de votre inscription, vous devriez également recevoir un script à intégrer à votre site. Ensuite, nous verrons quoi faire avec cela.
Code intégré
La clé pour que TypeKit écrase votre CSS est l'extrait de code suivant, qu'il vous donne à insérer dans votre code HTML:
Il suffit de placer ce code dans la section d’en-tête de la page HTML à modifier. C'est tout le codage que vous devez faire! Juste un simple copier-coller et vous êtes prêt à partir. Assurez-vous de publier la page HTML mise à jour sur votre site avant de commencer à ajouter des polices.
Ajout de polices
Croyez-le ou non, nous avons presque terminé. Tout ce qui reste à faire est de choisir des polices et de leur dire où aller. Comme je l'ai déjà mentionné, TypeKit vous offre un grand choix de polices de haute qualité parmi lesquelles choisir si vous choisissez l'un des forfaits payants. Rappelez-vous que le plan gratuit a une sélection beaucoup plus limitée (bien que non médiocre). Pour remplacer notre en-tête principal, nous allons sélectionner une police en difficulté avancée. Sur le côté droit de la liste des polices, vous verrez une série de balises. Cliquez sur le bouton? balise pour ne voir que les polices en détresse.
N'hésitez pas à parcourir et à choisir ceux que vous aimez. Lorsque vous en trouvez un que vous aimez, cliquez sur le bouton? Ajouter? bouton (j'ai choisi Bodedo). Après avoir cliqué sur? Ajouter? bouton, la fenêtre de l'éditeur de kit devrait apparaître.
L'éditeur de kit
Après avoir ajouté une police, la fenêtre suivante devrait s'afficher:
C'est là que vous allez appliquer la police que vous avez choisie à votre site. Remarquez dans le coin supérieur gauche de l'éditeur un sélecteur personnalisé à utiliser dans votre code (dans notre cas, .tk-bodedo). Vous pouvez entrer le code sur votre site et remplacer le sélecteur de votre choix par celui indiqué ici pour remplacer la police. Cependant, nous allons plutôt indiquer à TypeKit les balises existantes que nous avons utilisées sur notre site. Comme je l'ai déjà dit, notre en-tête principal est simplement un? H1? balise donc tout ce que nous devons faire est de taper? h1? (sans guillemets) dans le champ sous? sélecteurs? et cliquez sur Ajouter.
Maintenant, cliquez sur le bouton publier. C'est tout! TypeKit fera le reste. Après une minute ou deux, actualisez votre page et vous devriez voir la police apparaître.
Ajuster votre CSS
L'un des avantages de TypeKit est qu'il ne remplace que la police. Tous les paramètres liés à la police sont toujours contrôlables dans votre CSS. Consultez ma page de test après avoir ajouté une police personnalisée à la copie de paragraphe.
Notez que la nouvelle police a vraiment l’air bizarre avec mes paramètres de hauteur de ligne actuels. Il est beaucoup trop étendu et consomme maintenant beaucoup plus d'espace vertical. Pour résoudre ce problème, je viens d’entrer dans mon fichier CSS et de composer la hauteur de ligne de ma copie de paragraphe. Toute modification apportée dans mon CSS, hormis la police elle-même, aura une incidence sur la nouvelle police de mon site. Vous pouvez ainsi personnaliser le style de votre coeur et votre police personnalisée restera en place! Voici ma hauteur de ligne ajustée.
Le produit fini
Jetez un coup d'œil au site fini ici pour voir TypeKit en action. Malgré le fait que le site était sans doute beaucoup plus attrayant avant de commencer, vous pouvez facilement voir les avantages de TypeKit. Notez que les polices personnalisées que vous voyez ne sont pas résidentes sur votre ordinateur et pourtant, elles sont parfaitement prévisualisées et facilement sélectionnables.La meilleure partie est que tout cela a été réalisé avec une interface graphique conviviale et un extrait de code que nous n'avions pas à écrire! Cependant, je ne fais pas que des éloges et des compliments à propos de TypeKit. Avant de conclure, parlons brièvement de ce que j’ai trouvé moins que parfait.
La critique
Parlons d'abord des bugs techniques. J'ai mentionné plus tôt que lorsque vous frappez le? Publier? bouton, vous devez attendre une minute avant la mise à jour du site. Lorsque vous êtes habitué à voir les modifications codées se mettre à jour immédiatement, cela peut être extrêmement frustrant. La partie frustrante est l'incohérence. Parfois, les modifications prennent effet presque instantanément, tandis que d'autres personnes vous laissent appuyer sur le bouton d'actualisation pendant des minutes et attendent la modification. J'ai également rencontré des problèmes avec le site lui-même. La fenêtre de l'éditeur de kit refuse de s'ouvrir pour moi environ 50% du temps, mais une fenêtre vierge avec une animation de chargement sans fin. La fermeture de la fenêtre et la réouverture de l’éditeur de kits résolvent le problème, mais c’est quand même assez gênant. Enfin, la structure de coûts n'est pas facile à justifier pour tous les concepteurs. Bien sûr, avoir du texte sélectionnable sur votre site est une bonne chose, mais pour 250 dollars par an, beaucoup de gens vont probablement s'en tenir à l'insertion de titres fantaisistes sous forme d'images.
Conclusion
C'est à peu près tout ce que vous devez savoir pour commencer à utiliser TypeKit. Nous sommes allés au-delà de l’inscription et de la sélection d’un plan, de la configuration de votre premier kit, de l’ajout de polices à votre site, de la publication de vos modifications et du réglage de votre CSS après l’implémentation de polices personnalisées. C'est un long article, mais c'est uniquement parce que j'ai scindé le processus en de petites étapes faciles à gérer. En réalité, TypeKit est opérationnel sur votre site en quelques minutes. Inscrivez-vous à votre invitation et assurez-vous de nous dire ce que vous pensez de TypeKit et des autres solutions de polices personnalisées que vous avez trouvées. N'hésitez pas à poser des questions en utilisant les commentaires ci-dessous ou via Twitter.