Adobe a récemment lancé un service de polices Web gratuit pour compléter Typekit, son incroyable service premium. Adobe Edge Web Fonts vous offre actuellement environ 500 familles de polices gratuites que vous pouvez utiliser sur votre site aujourd'hui avec peu d'effort. C'est génial ça?
Le processus de mise en œuvre de ces polices n'est pas aussi simple que certains des autres services auxquels vous êtes peut-être habitué. Nous allons donc aujourd'hui nous intéresser de plus près à la manière dont tout cela fonctionne.
Faites connaissance avec les polices Web Edge
Lancer Adobe Web Fonts est un geste surprenant pour Adobe. Cela donne aux fans d'Adobe une nouvelle raison de renoncer à l'achat d'un abonnement Typekit. Cependant, étant donné la force des concurrents libres tels que Google Web Fonts, il s’agissait peut-être d’une décision nécessaire.
La partie vraiment étrange pour moi est à quel point l'idée semble fragmentée pour le moment. Edge Web Fonts utilise réellement Typekit pour les servir, mais il ne s’agit pas, comme on pouvait s’y attendre, d’un nouveau plan gratuit ajouté à Typekit. Il s’agit actuellement d’un service autonome. Ce service est implémenté directement dans certaines applications d'Adobe, mais il est également disponible pour une utilisation sans ces applications, moyennant une visite rapide de la documentation.
"Ce n'est pas, comme vous pouvez vous attendre, simplement un nouveau plan gratuit ajouté à Typekit."Peut-être que Adobe utilise le? Edge? outils et services comme une sorte de? Google Labs? style de jeu, ce qui signifie que les polices Web Edge pourraient éventuellement devenir un jour un élément de Typekit. Mais ce n’est que conjecture, pour le moment, les deux sont conceptuellement distincts.
Mise en œuvre: Choisissez votre poison
Edge Web Fonts est en fait un service assez fantastique en termes de sélection. Il existe une tonne d'excellentes polices fournies par Adobe, Google (Concurrent? Partenaire? Google brouille toujours cette ligne) et d'autres.
La question est, "comment l'utilisez-vous?" C'est une question assez simple, mais la réponse est un peu plus compliquée. Ce n’est pas sorcier, mais vous devez connaître quelques options:
- Outil de prévisualisation - Un petit widget sur le site Web Edge Fonts qui vous aide à choisir une police et à récupérer le code.
- App support - Certaines applications Adobe intègrent directement le service afin que vous puissiez accéder facilement à la bibliothèque de polices complète et gratuite.
- Manuel - Vous pouvez utiliser la documentation et écrire votre propre code pour implémenter n’importe laquelle des polices où vous le souhaitez.
En fin de compte, les options sont bonnes et nous en avons plusieurs parmi lesquelles choisir. Jetons un coup d'oeil à chacun de près.
Outil de prévisualisation
Pour utiliser l'outil de prévisualisation, ouvrez la page Adobe Edge Web Fonts et faites défiler l'écran jusqu'au bas de la page. Vous devriez trouver l'outil suivant dans la colonne de gauche:
Ce petit outil est simple mais pratique. Vous choisissez simplement une police dans le menu déroulant et la petite boîte de prévisualisation se met à jour en direct avec votre sélection. Vous pouvez même personnaliser le texte dans l'aperçu:
Comme nous l'avons vu dans la capture d'écran ci-dessus, votre sélection produit deux extraits de texte qui peuvent être utilisés pour implémenter la police sur votre site. Cela commence par une intégration JavaScript:
Ensuite, passez à votre code CSS et utilisez le nom de la police dans votre code, comme vous le feriez avec une police native.
Le problème
C'est assez facile, non? Choisissez la police, prenez le code; terminé. Je ne suis pas sûr que cela pourrait devenir beaucoup plus simple. Malheureusement, ce que vous rencontrez avec cet outil, c'est qu'il est assez laborieux de choisir réellement une police, étant donné que c'est votre méthode de le faire:
Comme vous pouvez le constater, vous obtenez une énorme liste de textes en clair. Cela signifie que vous devez parcourir et sélectionner chaque option une par une afin d'afficher l'aperçu. Évidemment, ce n'est pas idéal!
App support
Actuellement, la prise en charge des applications est limitée, mais cela se développera probablement dans un proche avenir. Vos deux options actuelles sont Edge Code (Brackets) et Muse.
Je ne suis pas un fan de Muse. Voyons donc comment fonctionne le support des applications dans Edge Code, qui est en train de devenir un éditeur de texte plutôt cool.
Polices Web dans le code Edge
Pour utiliser les polices Web dans Edge Code, passez au CSS et commencez à taper une famille de polices. Cela fera apparaître un menu contextuel avec un? Parcourir les polices Web? option en bas:
Cliquez sur cet article et vous obtiendrez quelque chose qui beaucoup mieux que la liste de texte en clair que nous avons vu dans l'exemple précédent. Nous voyons ici une grille d’aperçu des polices semblable à celle que vous retrouviez sur Google Web Fonts.
Ici, vous pouvez rechercher les polices, les faire défiler manuellement ou utiliser les filtres à gauche. Les deux boutons en haut à gauche vous permettent de choisir entre les polices d'en-tête et de paragraphe et les huit boutons en bas vous permettent de filtrer par styles tels que slab serif et manuscrit.
Pour choisir une police, sélectionnez-la et cliquez sur le bouton? Terminé? bouton. Cependant, tout ce que cela fait vraiment, c’est d’insérer le nom de la police dans votre CSS, puis de définir manuellement des polices de sauvegarde.
Le problème
Bien que j'aime le support intégré à l'application pour choisir une police, ce qui se passe lorsque vous faites ce choix est un peu décevant. C'est bien que cela insère le nom pour vous dans le CSS, mais cela ne suffit pas pour implémenter réellement la police sur votre site, vous avez toujours besoin de cet extrait HTML auparavant. Ceci n'est pas généré automatiquement en utilisant les étapes ci-dessus, et il ne semble pas y avoir de moyen clair de le faire à partir du document HTML.
En fin de compte, la prise en charge intégrée à l'application est suffisamment limitée pour que vous puissiez continuer à parcourir la documentation complète en vue d'une implémentation manuelle.
Mise en œuvre manuelle
Notre dernière option concerne la mise en œuvre manuelle et Adobe dispose d’une documentation complète pour vous aider à le faire.
La clé de la mise en œuvre manuelle des polices consiste à comprendre la syntaxe du lien dans le code intégré. Voici un exemple tiré de la documentation:
Comme vous pouvez le constater, il se passe beaucoup de choses ici. Ce que nous faisons consiste à mettre en œuvre plusieurs familles et à cibler des variations spécifiques dans celles-ci. Voici un petit tableau que j'ai préparé pour nous aider à comprendre ce qui se passe dans ce lien:
Comme vous pouvez le constater, nous devons nous concentrer sur trois aspects. Jetons un coup d'oeil à chacun.
famille
Celui-ci est facile, il suffit de mélanger le nom de la police que vous souhaitez utiliser. C'est techniquement tout ce dont vous avez besoin pour que la police personnalisée fonctionne. Cela seul attirera la famille dans son ensemble. Vous pouvez importer plusieurs familles avec un point-virgule comme séparateur.
fvd
Certaines familles proposent de nombreuses variantes telles que? Extra Light? ou? Semibold.? Vous pouvez les importer de manière sélective à l’aide de la? Description de la variante de police? ou fvd, qui est désigné par une lettre minuscule et un chiffre.
En utilisant ce tableau de la documentation, nous pouvons facilement saisir des variantes spécifiques de la famille au lieu de tout saisir, ce qui permet de gagner du temps sur l’étape de chargement. Voici à quoi ça ressemble en action:
Comme vous pouvez le constater, vous tapez d’abord la famille, puis vous insérez deux points, suivis des codes fvd, séparés par des virgules.
sous-ensemble
Les sous-ensembles vous permettent de contrôler la taille du fichier de police incorporé en choisissant si vous avez besoin de tous les glyphes disponibles. Il y a deux options pour le moment: default et all.
Le défaut? ensemble contient vos caractères standard, et est généralement tout ce dont vous aurez besoin. Le tout? set est une version étendue qui vous donne tout ce que la police a à offrir, donc tous les petits extras et caractères étranges seront situés ici. Chaque police est différente et peut contenir ou non le glyphe que vous souhaitez implémenter.
Si vous voulez le? Default? sous-ensemble, vous ne devez pas vous soucier de taper quoi que ce soit d’extra. Si vous voulez le tout? sous-ensemble, mélanger dans un colon et le mot "tout".
html]
[/ html]
Le problème
De toute évidence, la méthode d'implantation manuelle est la meilleure, car elle vous donne un contrôle considérable sur les fichiers de polices que vous intégrez. Le problème avec cette méthode est que vous n’avez pas vraiment le moyen de voir dans quoi vous vous engagez. La documentation propose simplement une liste géante de polices non formatées et de leurs options:
Pour pouvoir prévisualiser une police, vous devrez la tester, utiliser la fonctionnalité in-app ou l'outil de prévisualisation présenté ci-dessus.
Conclusion
Adobe Edge Web Fonts est une solution de polices Web incroyablement robuste et expansive et je suis ravi qu’Adobe l’ait rendue disponible gratuitement.
Il existe différentes manières d'implémenter une police Web Edge, chacune d'elles disposant de sa propre liste d'avantages et d'inconvénients. En fin de compte, j'aimerais voir une application Web de type Typkit qui vous aide à prévisualiser et à parcourir les polices sans être forcé à utiliser Edge Code ou Muse. Sans cela, je vais probablement m'en tenir à Google Web Fonts la plupart du temps.
Qu'est-ce que tu penses? Le nouveau service de polices gratuites d'Adobe est-il suffisant pour vous faire réfléchir à deux fois avant de vous tourner vers votre solution de polices Web classique? Pourquoi ou pourquoi pas?