Intégration de polices

Les technologies telles que Cufon, sIFR, FLIR et @font-face représentent les différents groupes de développeurs qui croient être l'avenir de typographie en ligne. Il n'existe pas de consensus dans ce jeu en constante évolution. Toutes ces méthodes ont des arguments parfaitement valables à la fois pour et contre leur utilisation. En outre, même les navigateurs les plus populaires supportent chacune de ces technologies dans des degrés très divers. Cependant, la méthode de @font-face CSS est parmi les plus fortes, les concurrents les plus simples et les plus flexibles dans ce match. Un grand nombre de sites proposent à la fois ces polices de caractères gratuites et primes en faveur de celui-ci.

Ce guide va vous apprendre à mettre en œuvre @font-face avec la compatibilité des navigateurs les plus connus (cross-browser compatibility) et examinera également certains services de soutien qui rend encore plus facile à utiliser des polices personnalisées dans vos créations web.


 
 
 

Licence & Polices gratuites

La licence de police présente des maux de tête et l'obstacle à la typographie plus intéressante sur le web. Naturellement, les fonderies de polices aimeraient être payés pour leur travail et donc elles imposent des restrictions strictes sur l'utilisation de leurs polices. Le problème de licences de polices a provoqué une hausse majeure de la popularité des sites proposant des polices de caractères gratuites de qualité. Parmi ceux-ci, les deux que j'aime le mieux sont Font Squirrel et Fontex. Ces sites fournissent des tonnes de ressources complétement libres et proposent beaucoup d'autres choix dans la catégorie similaire des polices.

 

La syntaxe de base

  • @font-face ne nécessite que quelques lignes de CSS et est donc très facile à utiliser sans outils tiers. Pour commencer, rendez-vous sur le site Font Squirrel et téléchargez Chunkfive (ou toute autre police que vous aimez).
  • Une fois que vous avez téléchargé la police, placez le fichier OTF dans le répertoire racine de votre page web.
  • Maintenant, allez dans votre feuille de style et insérez le code suivant:
     

    @font-face {
    font-family: Chunkfive;
    src: url('Chunkfive.otf');
    }

    La première ligne dans le code définit un identifiant de "Chunkfive". Il est préférable de garder les choses simples en utilisant toujours le nom d'origine de la police, mais vous pouvez finalement utiliser n'importe quel nom. "MaCoolPolice" serait tout aussi bien mais seulement si vous vous référez à la police ailleurs en utilisant le même nom.

    La deuxième ligne indique au navigateur que lorsque "Chunkfive" est appelée, il doit charger le fichier Chunkfive.otf de l'URL mentionnée. Cette URL est tout simplement là où vous choisissez de placer votre fichier de polices. Si vous aviez placé Chunkfive dans un dossier appelé Polices, cet attribut doit être url (Polices/'Chunkfive.otf').

  • Lorsque vous souhaitez utiliser cette police n'importe où dans votre site, il suffit d'utiliser le code suivant :
     

    font-family: "Chunkfive", Georgia, Palatino, Times New Roman, serif;

    Il est important de mettre en place ces solutions de repli au cas où la police personnalisée ne fonctionne pas pour une raison quelconque.

  • Selon votre navigateur, cela devrait vous donner une page avec une police personnalisée en marche. Voici la résultat :
     

    Police gratuite Chunkfive

     
    Ici, vous devez voir le même type d'écriture que vous voyez sur l'image ci-dessus. Si non, votre navigateur utilisé ne support pas le type de fichier .otf :
     

    C'est la police appelée "Chunkfive"

 

Compatibilité entre navigateurs

Ce serait bien si l'utilisation en ligne était aussi simple que ça, mais il n'est pas. Tous les principaux navigateurs ont décidé de suivre leur propre chemin avec les différents formats de police.

  • Internet Explorer ne supporte que EOT,
  • Mozilla Firefox supporte OTF et TTF,
  • Google Chrome supporte TTF et SVG,
  • Safari et Opera supportent OTF, TTF et SVG.

Puis, les navigateurs de mobile comme Safari sur iPad et iPhone requièrent SVG.

Pour les intégrer, il existe des systèmes à suivre. La méthode la plus populaire pour utiliser @font-face sur plusieurs navigateurs semble être Bulletproof @font-face syntaxe de Paul Irish. En utilisant la méthode de Irish, vous incluez plusieurs versions de la police pour qu'elle fonctionne sur tous les navigateurs. De plus, le code contient une petite astuce qui ignore les polices installées localement avec le même nom.

Jetons un coup d'oeil à la syntaxe Bulletproof utilisant Chunkfive:
 

@font-face {
    font-family: 'chunkfiveroman';
    src: url('chunkfive-webfont.eot');
    src: local('ò∫'),
        url('chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
        url('chunkfive-webfont.woff') format('woff'),
        url('chunkfive-webfont.ttf') format('truetype'),
        url('chunkfive-webfont.svg#chunkfiveroman') format('svg');
    font-weight: normal;
    font-style: normal;
}
  • Comme précédemment, nous déclarons d'abord un identifiant pour le reste de notre code.
  • Ensuite, nous référons à la version EOT de la police pour IE. Si le navigateur n'est pas IE, il ignore cela et descende la ligne jusqu'à ce qu'il trouve un type de police qu'il peut effectivement utiliser.
  • Le src:locale est l'astuce pour la police locale que j'ai mentionné ci-dessus. Il dit au navigateur d'utiliser un nom fictif qui ne sera pas présent sur ​​votre machine, donc il n'y aura pas d'affichage de police incorrecte.
  • Enfin, le réglage font-weight et font-style à la normale garantira que tous les navigateurs font référence aux mêmes valeurs. Il vous permettra que vous puissiez appliquer un style faux gras ou italique plus tard dans la CSS. Sans cet extrait de code, les navigateurs vont ignorer toutes les commandes de style !

Gardez à l'esprit que le rendu des polices peut varier considérablement entre les différents navigateurs et systèmes d'exploitation. Beaucoup de développeurs ont connu tels mauvais résultats sur Windows et Internet Explorer qu'ils éviter d'utiliser des polices personnalisées. Assurez-vous toujours d'examiner de près les résultats sur autant de navigateurs que vous puissiez si la qualité est acceptable.

 

Où puis-je obtenir tous ces types de polices ?

Vous avez probablement remarqué que la méthode ci-dessus vous oblige à avoir au moins quatre versions différentes de chaque police personnalisée. De nombreuses sources, telles que Fontex, seront souvent offrir un seul type de fichier en téléchargement. Alors, que pouvez-vous faire ?

  • La réponse est d'ajouter Font Squirrel à votre liste de nouveaux sites préférés. Font Squirrel offre des tonnes de kits @font-face gratuits qu'on peut télécharger en un seul clic, qui contiennent tout ce que vous avez besoin pour la personnalisation et ils sont cross-browser compatibles. Chaque kit contient tous les types de polices dont vous avez besoin ainsi que la démo HTML et CSS pour vous aider à démarrer.

    Tout ce que vous devez faire est de télécharger le kit, prenez les fichiers de police et CSS, et vous êtes prêt à partir ! Le CSS utilisé par Font Squirrel est basé sur bulletproof @font-face syntaxe de Paul Irish montré ci-dessus, de sorte que vous pouvez être sûr que c'est la meilleure méthode actuellement disponible pour assurer la conformité pour autant d'utilisateurs que possible.

  • Que faire si Font Squirrel n'a pas le kit dont vous avez besoin ? Pas de problème. Si vous avez une police que vous avez obtenu d'une autre source, tout simplement rendez-vous à la Font Squirrel @font-face kit générateur. Il vous suffit de télécharger votre fichier de police et ce merveilleux outil convertit automatiquement à tous les types de fichiers nécessaires et génère un kit pour le télécharger.

    Notez que l'utilisation du @font-face kit générateur signifie que vous garantissez que vous avez le droit/licence de convertir et d'intégrer les polices que vous téléchargez sur le site.

    Ce service est entièrement gratuit et vous pouvez l'utiliser avec zéro inscription.
     

    générateur de polices personnalisées sur le net

 

Services populaires de @font-face

Voici une liste de services parmi les sites les plus populaires qui offrent des solutions à la fois gratuites et payantes pour simplifier le processus @font-face.

  • Google Font API : l'une des solutions les plus faciles et les plus récentes pour insérer des polices personnalisées dans vos créations. Description dans un article précédent : cliquez ici !
  • TypeKit : l'un des premiers services dédiés pour faciliter la mise en œuvre @font-face. L'équipe TypeKit a établi un partenariat avec les fonderies de polices de partout dans le monde pour fournir des centaines d'excellents polices sans complication de licence aussi longtemps que vous utilisez le service. Il y a un plan d'essai gratuit qui vous permet d'utiliser un nombre de polices limité sur un seul site.
  • Typotheque : vente de polices pour le web. La bonne chose à propos de ce service, c'est que, au lieu d'un plan annuel, il y a un forfait (frais uniques) pour l'achat de la police. Une fois que vous l'achetez, il suffit de copier et coller le code CSS.
  • Fonts Live : il vous apporte des centaines de polices de haute qualité provenant des meilleurs créateurs et des fonderies. Avec Fonts Live, vous achetez chaque police individuellement et payez une cotisation annuelle pour l'utilisation. Une fois que vous l'achetez, ils fournissent des extraits de code simples pour incorporer les polices dans votre site.
  • Kernest : ce système est pratiquement identique à celui de la Google Font API. Il suffit de trouver une police que vous aimez, prenez le lien pour intégrer dans la balise <head> de vos documents HTML et vous êtes prêt à commencer son utilisation. Kernest a des polices gratuites et payantes. Malheureusement, le système de navigation sur Kernest.com tente de charger beaucoup de ces polices simultanément et peut donc être très lent et difficile à utiliser. Préparez-vous à un accident de navigateur si vous tombez sur une page avec un trop grand nombre aperçus de polices.

Si les solutions gratuites ne fournissent pas suffisamment d'options et vous pensez que les licences de polices vous donne un mal de tête, consultez les services ci-dessus qui prennent en charge des choses juridique complexe et rendent l'utilisation de polices premium en ligne extrêmement simple.

Source : Sixrevisions.com

Les commentaires sont fermés.