Guide rapide des polices Web via @font-face

Paul Irish

Introduction

La fonctionnalité @font-face de CSS3 nous permet d'utiliser des polices de caractères personnalisées sur le Web de manière accessible, manipulable et évolutive. Mais vous pourriez dire : "Pourquoi utiliserions-nous @font-face si nous avons Cufon, sIFR et du texte dans les images ?" Voici quelques avantages liés à l'utilisation de @font-face pour les polices personnalisées:

• Visibilité complète par recherche (ctrl-F)
• Accessibilité aux technologies d'assistance comme les lecteurs d'écran
• Le texte est traduisible grâce aux services de traduction ou de traduction intégrés au navigateur.
• Le CSS peut modifier entièrement l'affichage typographique: line-height, letter-spacing, text-shadow, text-align, ainsi que des sélecteurs tels que ::first-letter et ::first-line.

@font-face dans son essence

Dans sa forme la plus élémentaire, nous déclarons une nouvelle police distante personnalisée à utiliser comme suit:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Puis utilisez-le pour utiliser:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Dans cette déclaration @font-face, nous utilisons la propriété font-family pour nommer explicitement la police. Il peut s'agir de n'importe quoi, quel que soit le nom de la police. font-family: 'SuperDuperComicSans'; fonctionnerait très bien, mais peut-être pas pour votre réputation. Dans la propriété src, nous indiquons où le navigateur peut trouver l'élément de police. Selon le navigateur, les types de polices valides sont eot, ttf, otf, svg ou un URI de données dans lequel l'intégralité des données de police est intégrée.

Bien sûr, rien n'est jamais aussi simple qu'il devrait l'être. La limite initiale du code ci-dessus était qu'il ne diffusait pas d'EOT dans IE 6-8. La syntaxe "bulletProof @font-face" proposait un moyen de résoudre ce problème. Il en existe une version robuste.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Vous vous trompez déjà ? Si vous préférez vous lancer rapidement, utilisez le générateur de polices d'écureuil. Il s'agit d'un outil qui simplifie l'ensemble du processus, en préparant les variantes et le CSS de votre police. Elles sont indispensables pour mettre en pratique les polices Web dès aujourd'hui.

Compatibilité mobile ?

Safari pour mobile prend en charge les polices Web SVG à partir d'iOS 3.1 et Android accepte les formats OTF/TTF à partir de la version 2.2. Mais vos utilisateurs mobiles devraient-ils bénéficier de cette expérience typographique améliorée ? Je recommanderais non. La raison principale est que WebKit gère le texte qui attend une police personnalisée via @font-face: le texte est invisible. Ainsi, sur une connexion mobile à faible bande passante, vos utilisateurs ne verront aucun texte tant que les environ 50 000 données de police n'ont pas été chargées. L'équipe Webkit cherche une solution pour activer une police de remplacement après quelques secondes, mais en attendant, je ne pense pas qu'il soit juste d'exposer vos utilisateurs à de tels obstacles entre eux et votre contenu.

Services de polices Web

Plusieurs services intègrent la fonctionnalité @font-face dans une API facile à utiliser, ce qui vous permet souvent d'ajouter une seule ligne CSS ou script à votre code HTML ainsi qu'une configuration, et c'est tout. De nombreux services comme WebInk, Typekit et Fontslive vous permettent d'utiliser les polices (dans certains cas, jusqu'à une limite de bande passante) moyennant des frais mensuels. L'utilisation de ces services est très pratique pour les développeurs occasionnels, ce qui complique la diffusion d'une solution multinavigateur.

L'API Google Font vous permet d'utiliser une petite sélection de polices sans frais sous licence. Il vous suffit de créer un lien vers une feuille de style, et de laisser Google gérer les problèmes de performances et d'utilisation de plusieurs navigateurs. C'est le moyen le plus rapide de démarrer avec les polices Web.

Trouver des polices de caractères professionnelles pour @font-face

Les concepteurs sont souvent surpris par le fait que le simple fait d'acheter une licence de police (à utiliser dans votre conception graphique, par exemple) ne signifie pas que vous pouvez l'utiliser dans @font-face. Les licences @font-face (ou d'intégration Web) sont généralement vendues séparément. Lisez attentivement le contrat et n’hésitez pas à contacter la fonderie de polices si vous avez des questions. Fontspring est une boutique de polices qui vend des centaines de polices professionnelles de qualité. Toutes ces polices sont autorisées à être utilisées avec @font-face. FontFont et d'autres fonderies ont commencé à vendre directement des licences @font-face, bien qu'elles ne ciblent actuellement que les WOFF et EOT, ce qui élimine une part importante (mais de taille moindre) du marché des navigateurs. De nombreuses fonderies ajoutent des licences de polices Web à leur catalogue, mais si vous ne trouvez pas la police que vous avez choisie, contactez-les pour en savoir plus.

Gérer FOUT

Le Flash of Unstyled Text est un phénomène dans Firefox et Opera que peu de concepteurs Web apprécient. Lorsque vous appliquez une police de caractères personnalisée via @font-face, pendant le chargement de la page, la police n'a pas encore été téléchargée ni appliquée. La police suivante dans la pile font-family est utilisée. Une police différente (généralement moins esthétique) apparaît avant qu'elle ne soit mise à niveau.

L'API Google Font est associée au chargeur WebFont, une bibliothèque JavaScript conçue pour fournir un certain nombre de hooks d'événement qui vous offrent un contrôle important sur le chargement. Voyons comment faire en sorte que d'autres navigateurs imitent le comportement de WebKit consistant à masquer le texte de remplacement pendant le chargement de la police @font-face.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

Si JavaScript est désactivé, le texte reste visible en permanence, et en cas d'erreur de police, il revient à une empattement de base en toute sécurité. Considérez qu'il s'agit d'une mesure provisoire pour le moment. La plupart des experts en polices de caractères Web souhaitent masquer le texte de remplacement pendant 2 à 5 secondes, puis le révéler. Ce délai est particulièrement bénéfique pour les appareils mobiles et les connexions à faible bande passante. Il est tout à fait possible que Mozilla cherche à résoudre ce problème au plus vite.

La propriété font-size-adjust, qui n'est actuellement compatible qu'avec Firefox, est une solution plus légère, mais moins efficace. Cela vous permet de normaliser x-height dans une pile de polices, ce qui réduit la quantité de modifications visibles dans le FOUT. En fait, le générateur d'écureuils de police vient d'ajouter une fonctionnalité qui indique le rapport x hauteur des polices que vous importez, afin que vous puissiez définir la valeur font-size-adjust avec précision.

Résumé

Les polices Web offrent une grande liberté aux concepteurs, et avec les fonctionnalités à venir telles que les ligatures discrètes et les variantes stylistiques, elles disposeront d'une bien plus grande flexibilité. Pour l'instant, vous pouvez être sûr d'implémenter cette partie de CSS3, car elle couvre 98% des navigateurs déployés. Profitez-en bien !