Guide rapide des polices Web via @font-face

Paul Irish

Introduction

La fonctionnalité @font-face de CSS3 nous permet d'utiliser des typographies personnalisées sur le Web de manière accessible, manipulable et évolutive. Mais vous vous demandez peut-être pourquoi utiliser @font-face si Cufon, sIFR et l'utilisation de texte dans des images sont disponibles. Voici quelques avantages de l'utilisation de @font-face pour les polices personnalisées:

• Recherche complète avec "Rechercher" (ctrl-F)
• Accessibilité aux technologies d'assistance telles que les lecteurs d'écran
• Le texte est traduisible, via la traduction dans le navigateur ou des services de traduction
• Le CSS permet de modifier entièrement l'affichage typographique: line-height, letter-spacing, text-shadow, text-align et des sélecteurs tels que ::first-letter et ::first-line.

@font-face dans son essence

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

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

Utilisez-le ensuite:

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 quel nom, quel que soit le nom réel de la police. font-family: 'SuperDuperComicSans'; convient parfaitement, mais peut nuire à votre réputation. Dans la propriété src, nous indiquons l'emplacement où le navigateur peut trouver l'asset de police. Selon le navigateur, les types de polices valides peuvent être eot, ttf, otf, svg ou un URI de données intégrant l'intégralité des données de police en ligne.

Bien sûr, rien n'est jamais aussi simple que cela devrait l'être. La limitation initiale du code ci-dessus était qu'il ne diffusait pas d'EOT dans IE 6 à 8. La syntaxe @font-face infaillible a proposé une solution à ce problème. Une version robuste suit.

@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 avez déjà mal à la tête ? Si vous préférez vous lancer rapidement, accédez au générateur Font Squirrel. Cet outil simplifie l'ensemble du processus en prenant votre police et en préparant ses variantes et son CSS. Il est indispensable pour mettre en pratique les polices Web aujourd'hui.

Compatibilité avec les mobiles ?

Safari mobile est compatible avec les polices Web SVG à partir d'iOS 3.1 et Android est compatible avec les polices otf/ttf à partir de la version 2.2. Mais vos utilisateurs mobiles doivent-ils bénéficier de cette expérience typographique améliorée ? Je vous recommande de ne pas le faire. La raison principale est liée à la façon dont WebKit gère le texte qui attend une police personnalisée via @font-face: le texte est invisible. Par conséquent, sur une connexion mobile à faible bande passante, vos utilisateurs ne verront aucun texte tant que les 50 ko de données de police n'auront pas été chargés. L'équipe Webkit cherche à activer une police de remplacement au bout de quelques secondes, mais tant que ce n'est pas le cas, je ne pense pas qu'il soit juste d'imposer de tels obstacles à vos utilisateurs.

Services de police Web

De nombreux services encapsulent la fonctionnalité @font-face dans une API simple, ce qui vous permet souvent d'ajouter une seule ligne CSS ou de script à votre code HTML et de configurer quelques éléments. De nombreux services, comme WebInk, Typekit et Fontslive, vous permettent d'utiliser les polices (parfois jusqu'à un plafond de bande passante) moyennant des frais mensuels. L'utilisation de ces services est très pratique pour les développeurs occasionnels, car elle évite certaines complications liées à la diffusion d'une solution multinavigateur.

L'API Google Fonts vous permet d'utiliser un petit ensemble de polices sous licence libre en établissant simplement un lien vers une feuille de style et en laissant Google gérer les problèmes de compatibilité entre les navigateurs et les performances. C'est le moyen le plus rapide de commencer à utiliser des polices Web.

Trouver des typographies professionnelles pour @font-face

Les concepteurs sont souvent surpris de constater qu'ils ne peuvent pas utiliser une police dans @font-face simplement parce qu'ils ont acheté une licence de police (à utiliser dans leur conception graphique, par exemple). Les licences pour @font-face (ou l'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 autorisées à être utilisées avec @font-face. FontFont et d'autres fonderies ont commencé à vendre directement des licences @font-face, mais ne ciblent actuellement que les formats WOFF et EOT, ce qui exclut une part importante (mais en diminution) du marché des navigateurs. De nombreuses fonderies ajoutent des licences de polices Web à leur catalogue, mais si vous ne trouvez pas de licence pour la police de votre choix, contactez-les pour en savoir plus.

Gérer les erreurs FOUT

Le flash de texte non stylisé est un phénomène dans Firefox et Opera que peu de concepteurs Web apprécient. Lorsque vous appliquez une typographie personnalisée via @font-face, il se produit un bref moment, lors du chargement de la page, où la police n'a pas encore été téléchargée ni appliquée, et la police suivante de la pile font-family est utilisée. Une autre police (généralement moins attrayante) s'affiche alors brièvement avant d'être mise à niveau.

L'API Google Fonts est accompagnée du chargeur WebFont, une bibliothèque JavaScript qui vise à fournir un certain nombre de hooks d'événements vous permettant de contrôler le chargement. Voyons comment faire en sorte que d'autres navigateurs imitent le comportement de WebKit qui consiste à 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 tout le temps. En cas d'erreur de police, une police Serif de base est utilisée. Considérez cette solution comme une mesure provisoire. La plupart des experts en polices Web recommandent de masquer le texte de remplacement pendant deux à cinq secondes, puis de le révéler. Ce délai d'expiration est particulièrement utile pour les appareils mobiles et ceux dont la bande passante est faible. Mozilla s'efforce de corriger ce problème rapidement.

La propriété font-size-adjust, actuellement compatible uniquement avec Firefox, est une solution plus légère, mais moins efficace. Il vous permet de normaliser la hauteur-x dans une pile de polices, ce qui réduit la quantité de modifications visibles dans la FOUT. En fait, le générateur Font Squirrel vient d'ajouter une fonctionnalité qui indique le ratio de hauteur x des polices que vous importez. Vous pouvez ainsi définir précisément la valeur font-size-adjust.

Résumé

Les polices Web offrent une grande liberté aux concepteurs. Avec les fonctionnalités à venir, comme les ligatures facultatives et les variantes stylistiques, ils bénéficieront d'une flexibilité encore plus grande. Pour l'instant, vous pouvez implémenter cette partie de CSS3 en toute confiance, car elle couvre 98% des navigateurs déployés. Bonne lecture !