Accueil
» LA TOILE
»
WebFonter : Prévisualisez les polices FontShop sur n’importe quel site web — Ce qui fonctionne actuellement
WebFonter : Prévisualisez les polices FontShop sur n’importe quel site web — Ce qui fonctionne actuellement
WebFonter était un outil en ligne permettant de tester les polices FontShop directement sur un site web avant de les acheter. Il permettait aux graphistes de modifier les titres et le texte sans avoir à se fier à un aperçu statique. Cette méthode n'est plus d'actualité : la boutique en ligne FontShop a fermé ses portes en 2023 et l'ancienne adresse WebFonter redirige désormais vers une page d'information FontShop plutôt que vers un outil d'installation. Vous pouvez toujours prévisualiser les polices via MyFonts et expérimenter avec la typographie de votre site grâce aux outils de développement de votre navigateur.
Est-il encore possible d'installer WebFonter ?
Ne vous fiez pas aux anciennes instructions d'installation de WebFonter. D'après la FAQ officielle de Monotype concernant la fermeture de sa plateforme , FontShop.com a été mise hors service le 15 décembre 2023. L'ancienne adresse web de WebFonter redirige désormais vers la page d'information de FontShop, qui oriente les clients vers MyFonts. Aucune extension ou aucun marque-page WebFonter actuellement compatible n'a pu être vérifié. Les anciennes instructions pour l'extension Chrome et le marque-page doivent donc être considérées comme un témoignage du fonctionnement du produit, et non comme un guide d'installation fonctionnel.
Ce que WebFonter faisait à l'origine
Le principal avantage de cet outil résidait dans la visualisation d'une police de caractères en contexte. Plutôt que d'ouvrir un spécimen de police séparé, un graphiste pouvait visualiser une page réelle et modifier sa typographie tout en conservant la mise en page visible.
Ouvrez un site web. L'outil d'origine était proposé sous forme d'extension Chrome et de marque-page pour les autres navigateurs. Il était décrit comme utilisable sur les sites en ligne et hébergés localement, à condition que son service de polices soit accessible.
Choisissez une famille de polices. La commande « Changer de famille » permet de parcourir et de rechercher des polices dans le catalogue FontShop. Le choix d'une famille met à jour l'aperçu de la page.
Attribuez et ajustez les styles. L'interface d'origine proposait initialement des titres et du texte courant, permettait d'ajouter d'autres éléments et offrait une fonction de réglage pour la taille, l'interligne et l'espacement.
Un outil de sélection de polices au niveau du site web illustre le type de comparaison contextuelle pour lequel WebFonter a été conçu.
Il s'agit de descriptions de fonctionnalités historiques, et non de menus actuels confirmés. Certaines anciennes critiques mentionnaient également un raccourci Ctrl+H pour masquer les commandes WebFonter. Évitez d'utiliser ce raccourci dans un navigateur moderne : Ctrl+H ouvre normalement l'historique de navigation si la page ou l'outil ne l'intercepte pas.
Comment tester les polices de caractères FontShop sur un site web aujourd'hui
La collection FontFont de FontShop est désormais disponible via la page d'information officielle de FontShop et MyFonts . L'approche suivante dissocie la découverte des polices de leur test sur une page web ; contrairement à l'ancien WebFonter, il ne s'agit pas d'un aperçu instantané de la police FontShop sur le site web.
1. Prévisualisez la police en utilisant vos propres mots
Trouvez une famille de polices adaptée sur MyFonts. Dans l'aperçu de la famille de polices ou du style individuel, saisissez un titre, une étiquette de navigation ou un paragraphe de votre projet. D'après la FAQ de MyFonts , vous pouvez ajuster la taille et les couleurs de l'aperçu et examiner les fonctionnalités OpenType prises en charge. La fonction Albums permet également de rassembler des polices pour les comparer. Testez différentes graisses : une police attrayante pour l'affichage peut ne pas convenir aux longs paragraphes.
Comparez une police de caractères candidate dans différents styles et tailles avant de l'intégrer à une mise en page.
2. Examinez le texte que vous souhaitez modifier.
Ouvrez votre site web dans Chrome, faites un clic droit sur un titre ou un paragraphe, puis choisissez « Inspecter » . Le panneau « Éléments » identifie le nœud HTML sélectionné ; le panneau « Styles » affiche le CSS qui l'affecte. Vous pouvez également utiliser le sélecteur d'éléments pour sélectionner du texte sur la page. Consultez le guide du mode Inspecter de Google pour obtenir la documentation des commandes.
Examinez un titre et repérez ses déclarations de police, de taille de police et de hauteur de ligne dans le volet Styles.
3. Expérimentez temporairement avec la typographie.
Dans Éléments → Styles , modifiez une déclaration de police existante ou ajoutez-en une à l'élément sélectionné. Par exemple, testez Georgia, serif comme police de substitution locale pour une direction de caractères à empattements, puis expérimentez avec font-size , line-height ou letter-spacing . Les modifications sont généralement visibles immédiatement, mais elles ne sont pas permanentes sur votre site publié. Google explique ces commandes dans sa documentation CSS des outils de développement .
Important : Saisir le nom d’une police commerciale dans le CSS ne la télécharge ni ne la charge automatiquement. Pour afficher la police commerciale sur votre page, elle doit être disponible via une ressource de police sous licence et chargée, ou via une installation locale autorisée. Dans le cas contraire, le navigateur affichera un aperçu de remplacement. Ne confondez pas cet aperçu avec la police que vous souhaitez acheter.
Comparez le même titre et le même paragraphe dans deux traitements typographiques différents, en vérifiant les habillages de texte et la hiérarchie.
4. Vérifiez la licence avant le déploiement
L'aperçu gratuit sur la boutique en ligne ne constitue pas une licence pour héberger les fichiers de police sur un site web public. MyFonts explique que les polices web sont intégrées via l'attribut @font-face et nécessitent une licence appropriée ; les domaines autorisés et les conditions d'affichage des pages dépendent de la licence proposée pour ce produit. Consultez les informations de licence de la famille de polices et vos conditions d'achat avant d'intégrer les fichiers à votre production. Une licence pour ordinateur ne couvre pas à elle seule l'intégration web.
Que vérifier avant de choisir une police définitive ?
Adaptation du titre : Le titre s’adapte-t-il naturellement à la largeur des écrans d’ordinateur et de mobile ?
Lisibilité du texte : La petite taille des caractères, la hauteur des lignes et la densité des paragraphes sont-elles confortables ?
Graisses et caractères : Les caractères gras, italiques, de ponctuation et les glyphes linguistiques dont vous avez besoin sont-ils disponibles ?
Chargement réel : le visage réel est-il affiché, ou s’agit-il simplement d’une image de repli du navigateur ?
Licence : Le forfait acheté couvre-t-il l'utilisation de votre site web ?
Si une modification semble sans effet, vérifiez si une règle CSS plus spécifique remplace votre modification, si la police est bien chargée et si vous avez sélectionné le bon élément de page. Testez sur plusieurs largeurs d'écran. À l'origine, WebFonter s'avérait être immédiatement accessible ; aujourd'hui, combiner un exemple MyFonts avec des modifications temporaires dans les outils de développement offre une solution pratique pour faire un choix typographique éclairé sans prétendre que cet outil, désormais abandonné, est toujours disponible.