Share
Au cours des cinq dernières années, la typographie sur le Web a pris une tournure extrême (désolé, jeu de mots). Auparavant, les concepteurs Web étaient contraints d'utiliser uniquement des polices Web sécurisées; polices système disponibles sur les ordinateurs de tous les utilisateurs. Comme vous pouvez l’imaginer (ou expérimenté de première main), c’était frustrant pour nous, les diables de type, mais nous avons réglé le problème. Cependant, de façon étrange, c’était plutôt sympa, car vous disposiez d’un nombre limité de polices, le temps consacré à la sélection de la police parfaite était donc minime (je ne me plains pas). Maintenant, cependant, une police de caractères spécifique à l'apparence que vous souhaitez obtenir est possible, et les entreprises peuvent désormais projeter le langage visuel de leur marque au moyen de la typographie.
Quelques méthodes de diffusion de types sur nos sites Web sont donc apparues, la plus utilisée étant @ font-face. Cette règle CSS nous donne la possibilité de télécharger des polices à partir d’un serveur et de les utiliser sur nos superbes pages Web. Au début, la prise en charge du navigateur était minimale, mais elle est maintenant largement prise en charge. La seule exception notable est Opera Mini (allez les gars).
@ font-face est une règle CSS qui spécifie le nom de la police, son emplacement et son épaisseur. Dans l'exemple simplifié ci-dessous, la police est stockée sur font-face.com et le chemin spécifique est défini. Cela pourrait ressembler à quelque chose comme ça:
Accentsconagua
@ font-face font-family: 'DeliciousRoman'; src: url ('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf'); poids de la police: 400; Vous pouvez voir que le nom de la police est défini sur «DeliciousRoman». C'est le nom de la police qui serait ensuite référencé dans notre pile de polices CSS, avec les polices de secours si la police ne se charge pas:
.exemple font-family: 'DeliciousRoman', Arial, sans-serif;
Cependant, les choses ne sont pas si simples. Étant donné que différents navigateurs requièrent différents formats de police, nous devons nous assurer de fournir toutes les options nécessaires..
Voici une liste des navigateurs avec les types de fichiers qu’ils supportent:
@ Font-face a eu recours à différentes conventions pour résoudre le problème de la compatibilité des navigateurs. Il est bon de savoir comment @ font-face a évolué, et l'historique rapide suivant fournit des liens vers de nombreuses lectures sur le sujet..
Paul Irish a initialement proposé la syntaxe Bulletproof @ font-face en 2009. Au fil des ans, quelques piratages ont semblé résoudre le problème de la compatibilité des navigateurs, le plus controversé étant le piratage du visage souriant..
Une autre version est sortie, intitulée "Mo 'Bulletproofer Syntax" de Richard Fink, qui résout les problèmes de police de caractères survenus sous Android..
Enfin, nous sommes arrivés à la syntaxe FontSpring @ font-face. Cette approche simplifie une grande partie du langage et se présente comme suit:
@ font-face font-family: 'DeliciousRoman'; src: url ('fonts / DeliciousRoman-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / DeliciousRoman-webfont.woff') format ('woff'), url ('fonts / Format DeliciousRoman-webfont.ttf ') (' type Trueet '), url (' polices / DeliciousRoman-webfont.svg # svgDeliciousRoman ') format (' svg '); Dans l'exemple ci-dessus, vous pouvez voir que les polices sont auto-hébergées et stockées sur le serveur dans un dossier appelé "polices"..
Font Squirrel (et quelques autres) fournit un générateur de police Web pratique qui convertira toute police en un kit de fichiers Web à intégrer. Ce kit contient tous les fichiers de police requis, la syntaxe CSS spécifique de @ font-face et une démonstration HTML. Vous pouvez ensuite placer les fichiers de police directement sur votre serveur et ajuster le chemin dans le fichier CSS @ font-face..
Remarque: Attention, assurez-vous de disposer des droits suffisants pour utiliser les polices que vous exécutez via le générateur et utiliser sur votre site..
Selon que vous hébergez vous-même ou utilisez un service de polices tel que Typekit (nous en parlerons plus tard), votre CSS sera légèrement différent. Par exemple, avec un service tel que Typekit, vous créez des "kits" de polices contenant toutes les polices que vous utiliserez pour chaque site Web spécifique. Pour chaque kit que vous créez, vous recevez un extrait de code JavaScript à placer dans le dossier. de votre document HTML. Cet extrait charge les règles @ font-face correctes pour ce navigateur spécifique..
Pour plus d'informations sur les raisons pour lesquelles TypeKit utilise JavaScript, consultez l'article Chargement de polices Web améliorées avec JavaScript..
Dans les paramètres de kit proposés par fonts.com, vous trouverez trois options de publication différentes pour les abonnements premium. En plus d'une option javascript similaire à Typekit, ils offrent également une option non-JavaScript qui renvoie à une feuille de style servie et une option auto-hébergée. En fonction de ce que vous choisissez, évidemment, votre CSS sera légèrement différent.
Comme vous pouvez l’imaginer, l’octroi de licences de polices devient un problème majeur lors de l’utilisation de polices sur le Web. L'utilisation généralisée de @ font-face a provoqué une véritable explosion de polices gratuites, dont certaines sont vraiment bonnes, d'autres non. Les polices Squirrel, Fontex et DaFont sont quelques-unes des options les plus connues pour les polices gratuites. Lost Type Coop est un autre endroit idéal pour récupérer des polices, des dons acceptés. Google Fonts propose également une vaste sélection de polices gratuites, bien que certaines soient, à mon avis, de mauvaise qualité..
L'industrie de l'hébergement de polices a connu une croissance fulgurante au cours des deux dernières années. L'hébergement de polices vous permet d'utiliser sous licence certaines de vos polices préférées - et dans de nombreux cas, une qualité supérieure à celle des polices gratuites - pour une utilisation sur le Web. Typekit a été l’un des premiers grands acteurs de ce marché et propose une très belle sélection de polices. Au fil du temps, ils ont ajouté des polices mieux connues comme Futura et Meta et ont fait connaître plusieurs polices bien connues dans le monde Web..
Fonts.com propose des licences pour sa bibliothèque de plus de 150 000 polices, parmi lesquelles figurent certaines des polices les plus populaires au monde, telles que Avenir, Frutiger, Univers et Din. Ce service présente quelques fonctionnalités uniques que j'aime beaucoup: En fonction de votre niveau d'adhésion, il intègre SkyFonts, ce qui vous permet en principe de "louer" des polices pour une période donnée, le plus souvent par incréments d'un ou trente jours. Cela vous permet d'utiliser la police dans des applications de bureau à des fins de maquette. De plus, avec un abonnement premium, vous pouvez télécharger le kit de polices et héberger vos propres polices, ce qui augmente les temps de chargement..
L’un des nouveaux services à avoir fait sensation récemment est le lancement par HF & J de la typographie en nuage. HF & J est largement considéré comme l’autorité en matière de typographie et leurs polices sont à la hauteur de cette réputation. Une offre Web de ces utilisateurs était attendue depuis longtemps, car ils ont repensé chacune de leurs polices pour l’écran. Ils ont à peu près élevé la barre, faisant 9 pt. Gotham lisible à l'écran. C'est vraiment incroyable.
Leur interface astucieuse regorge de fonctionnalités géniales, telles que la sélection des caractères de la police dont vous avez besoin, ce qui économise de l’espace et augmente le temps de chargement. Vaut vraiment le détour.
La structure de tarification des services d'hébergement de polices varie, mais la plupart d'entre eux sont basés sur les pages vues de chaque site sur lequel vous utilisez leurs polices. En plus de cela, de nombreux services tels que fonts.com ont des niveaux de tarification différents qui offrent différents add-ons tels que les polices de bureau, les polices de maquette et les options d'hébergement autonome. Il est préférable de voir ce qui est disponible et de choisir le service et le plan qui correspondent à vos besoins..
Alors, est-il préférable d'utiliser un service d'hébergement de polices ou de s'auto-héberger? En fait ça dépend. Voici quelques avantages de chacun:
Service d'hébergement (typeKit, Fonts.com, HF & J)
Auto-hébergement
Notez que vous devez savoir combien de polices vous utilisez. En ce qui concerne les performances, plusieurs poids de la même police signifient que vous chargez une autre police entière. Soyez donc prudent, plus vous utilisez de polices, plus le temps de chargement est long. Vous activerez certaines alarmes sur TypeKit une fois que votre kit aura dépassé 500 000 $, mais moins est plus dans ce cas..
Bien fait, vous êtes maintenant familiarisé avec les bases de @ font-face et les nombreuses façons de l'utiliser! Assurez-vous de vous tenir au courant des nouveaux outils et méthodes d’intégration de polices sur le Web, comme c’est le cas pour tout élément du Web, cela change rapidement.!
