Archives par mot-clé : Police

Sélection et utilisation d’une police de Google Web Font

Pour faire suite à l’article précédent concernant les font web, je vais revenir un peu plus en détail sur l’utilisation d’une police web en utilisant le service Google Web Fonts.

La première chose à faire est de se rendre sur le site de Google Web Fonts afin de sélectionner la ou les polices que vous souhaitez utiliser.

La page est composée de plusieurs parties :

  • Une partie centrale qui permet la comparaison des polices disponibles avec 4 modes :
    • Word : Comparaison par mot
    • Sentence : comparaison par phrase
    • Paragraph : comparaison par paragraphe
    • Poster : Affichage sous forme de « poster »

    Pour chaque mode, il est possible de configurer la taille, le texte (sauf en mode poster où le nom de la police est affichée) et le tri (popularité, date d’ajout, …).

  • Une zone de filtre sur la gauche
  • Une zone de gestion de votre collection de police. En effet, Une fois que vous avez trouvé la police qui vous plaît, il suffit d’ajouter la police à votre collection.

Page d'accueil de Google Web FontPour chaque police, plusieurs actions sous forme de liens/boutons :

  • Un lien qui ouvre la page d’explication permettant d’utiliser la police. Cette page est décrite dans la partie Use/Utilisation ci-dessous.
  • un lien permet d’accéder à la page concernant la police affichant les informations (description, auteur, licence), des exemples de texte utilisant la police et la liste des caractères de la police.
  • Le bouton d’ajout/suppression de la collection

Affichage d'un police dans Google Web FontVoyons comment gérer votre collection et les actions possibles.

Review / Comparaison

Une fois votre sélection effectuée, vous pouvez comparer les polices sélectionnées. Plusieurs modes de comparaisons sont disponible :

  • Specimen: 2 modes
    • Headline : Affiche les différents niveaux de titre avec la police
    • Paragraph : Affiche un paragraphe avec différentes tailles pour la police
  • Styles : Comparaison, pour une phrase donnée des différentes variantes d’une police (italique, gras, …)
  • Test Drive : Utilisation des polices dans le cadre d’une page d’exemple
  • Character Set : Comparaison cote à cote des caractères disponibles
  • Compare : Comparaison de 2 police l’une sur l’autre
  • Description : Affichage des informations (description, licence, auteur) de chaque police
Google Web Font : Comparaison en mode Specimen
Comparaison en mode Specimen
Google Web Font : Comparaison en mode Styles
Comparaison en mode Styles
Mode Test Drive de Google Web Font
Utilisation des polices dans une page test
Google Web Font : Comparaison en mode Character Set
Comparaison en mode Character Set
Google Web Font : Comparaison en mode Compare
Comparaison en mode Compare
Google Web Font : Comparaison en mode Description
Comparaison en mode Description

Use / Utilisation

La page est composée de plusieurs blocs :

  • une partie qui permet de sélectionner les polices de la collection à utiliser.
  • Sélection des jeux de caractères à inclure (latin, latin étendu, cyrillique, …)
  • Le code à utiliser pour inclure les police dans votre page. Il y a 3 façons d’inclure les polices : Link, @import et JavaScript.
  • Un exemple de code CSS pour l’utilisation de chaque police.

Google Web Font : Page d'explication de l'utilisation de polices

Divers

Il est à noter qu’il est possible de télécharger les polices de votre collection et d’enregistrer une collection sous la forme d’un marque page, ce qui peut être utile afin de sauvegarder/partager une collection.

Conclusion

Google met à disposition avec Google Web Fonts un outil complet et simple afin d’utiliser les polices web. Cela permet de facilement personnaliser un site web.
Adobe vient de sortir Adobe Edge Web Fonts, une alternative gratuite à Google Web Fonts, se basant sur typekit, la solution de web fonts payante d’Adobe.

Installation et Utilisation de Source Code Pro

Adobe vient de sortir une police de caractère Source Code Pro dédiée au développement, cette police permet d’avoir une meilleure visibilité lors du développement notamment permettant de distinguer facilement un l d’un I (i majuscule) et d’un 1, qui peuvent se ressembler avec certaines polices.

Voyons comment installer cette police et l’utiliser sous Visual Studio.

La première chose à faire est de télécharger le zip de Source Code Pro à cette adresse sous forme de fichier zip.

Dézipper le fichier. Cette police est composé de 12 fichiers qui faut installer. Sous Windows, ouvrez le dossier C:\WINDOWS\Fonts. Il s’agit du dossier contenant les polices sous Windows.

L’installation de Source Code Pro se fait simplement en faisant un glisser-déposer des 10 fichiers dans le dossier C:\WINDOWS\Fonts.

Une fenêtre indique l’installation des fichiers.

Voyons maintenant comment utiliser cette police dans Visual Studio (Si votre Visual Studio était ouvert pendant l’installation des fichier, Il est nécessaire de le redémarrer). Il faut afficher la fenêtre de configuration via Outils > Options. La configuration des polices se trouve dans Environnement > Polices et couleurs. Il suffit de sélectionner Source Code Pro dans la liste des polices.

Configuration de Source Code Pro dans Visual Studio Voici un petit exemple d’un fichier utilisant la police :

Exemple de fichier avec Source Code ProPour information, la police est déjà disponible sur Google Web Fonts

CSS : Utilisation des web font

Le design d’un site est important et il peut se jouer sur des détails comme une police de caractères. Les polices standard (Arial, Times New Roman, Verdana, …) sont peu nombreuses et communes. CSS apporte la possibilité d’utiliser des polices web (web fonts) afin de personnaliser votre site. Par exemple, mon blog utilise la police ‘Amaranth’ pour les titres (h1 à h6). Voyons comment les utiliser.

Il faut savoir que la possibilité d’utiliser des polices web a été apportée par la version 2.0 de CSS. Malheureusement, aucun consensus n’ayant été trouvé entre les navigateurs et les fondeurs, en ajoutant le poids de ces fonts, trop important pour l’époque (on était encore au modem 56K à l’époque 🙂 ), cette fonctionnalité a été supprimée de CSS 2.1.

Une des pratiques courantes consiste alors à utiliser une image contenant le texte écrit avec la police.

CSS3 réintroduit cette fontionnalité avec le module CSS Fonts

Présentation @font-face

Syntaxe

Dans la théorie, l’utilisation des web fonts est simple. Voici la déclaration d’une police qu’on appelera MaFont. Cette déclaration se fait via l’utilisation de @font-face qui permet d’indiquer la déclaration d’une police.

/* Déclaration de la police */
@font-face {
  font-family: MaFont;
  src: local("MaFont"), url('MaFont.ttf');
}

/* Utilisation de la police */
h1 {
    /*Utilisation de MaFont par défaut*/
    font-family: MaFont, Helvetica, Arial, sans-serif;
}

Voici les principaux attributs possible :

  • font-family : Il permet de définir le nom de la police que vous utiliserez dans votre css
  • src : l’attribut qui permet de définir ou récupérer la police. Il est possible de déclarer plusieurs sources afin de définir un ordre d’utilisation : local permet d’indiquer que l’on souhaite utiliser la police si elle est disponible sur l’ordinateur de l’utilisateur et url permet d’indiquer l’url de la police à utiliser. Bien entendu, on privilégiera toujours l’utilisation d’une police locale qui ne nécessite pas le téléchargement du fichier de police.
  • font-weight : l’ attribut permet de définir le « poids » de la police (normal, bold, …)
  • font-style : l’attribut permet de définir le style de la police (normal, italic, …)
  • font-size : la taille de la police

On peut voir que la définition d’une police web est assez aisée. Dans la pratique, il existe différents format de police qui rendent la définition d’une police plus complexe.

Différents format de police

En effet, il serait trop simple de n’avoir qu’un seul type de format de police pour le web. Il en existe 4 principaux :

  • le format SVG (.svg)
  • les formats TrueType et OpenType (.ttf, .otf)
  • le format Embedded OpenType (.eot)
  • Le format de police WOFF (.woff) : le petit dernier spécialement conçu pour le web, proposé par Mozilla

Bien entendu, les navigateurs ne supportent pas tous les même format de police (compatibilité des polices suivant les navigateurs).

Pour en savoir plus sur les format de police, je vous invite à lire
cet article sur le site typographisme.net

Ainsi la syntaxe de définition d’une police web prend en compte cette multitude de format de police et permet de définir le type de police lors de l’ajout d’une source de type url avec l’attribut format.

Voici donc la déclaration mise à jour en spécifiant le format de notre police :

/* Déclaration de la police */
@font-face {
  font-family: MaFont;
  src: local("MaFont"), url('MaFont.ttf') format('truetype');
}

Afin que votre site ait le même rendu dans les différents navigateurs, il va falloir déclarer les polices dans les différents format afin d’assurer la compatibilité avec les formats de police.

On obtient donc maintenant une syntaxe du type :

@font-face{
    font-family : "maFont";
    src : local("MaFont"),
          url('maFont.eot?') format('eot'),
          url('maFont.woff') format('woff'),
          url('maFont.svg#svgFontName') format('svg'),
          url('maFont.ttf') format('truetype');
}

L’attribut format permet au navigateur de connaitre le format sans avoir besoin de télécharger la police. Si le navigateur ne supporte pas le format, la fichier de police ne sera pas téléchargé.

LA bonne syntaxe à adopter

Certains navigateurs ont des problèmes avec la syntaxe (utilisation de local() sous Android, non compréhension de la syntaxe CSS3 pour IE, …). L’équipe du site fontspring.com a trouver LA syntaxe à utiliser pour être compatible sur tout les navigateurs. La voici :

@font-face {
	font-family: 'MaFont';
	src: url('MmFont.eot?#iefix') format('embedded-opentype'), 
	     url('maFont.woff') format('woff'), 
	     url('MaFontttf')  format('truetype'),
	     url('MaFont.svg#svgFontName') format('svg');
	}

2 articles si vous voulez en savoir plus :

Outils

Google Web Fonts

Google a créé le service Google Web Font qui permet de mettre à disposition facilement les police web les plus utilisées. L’inclusion est facilitée car il suffit juste d’inclure une feuille de style.

<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>

L’avantage de ce service est qu’il renvoi le bon format de police en fonction du navigateur de l’utilisateur. Il n’est pas possible d’utiliser des polices personnelles mais le nombre de police disponible aujourd’hui est de plus de 500, de quoi trouver son bonheur. Lors de la sélection des polices, Google vous indique même l’impact en terme de performance de l’utilisation de chaque police.

Squirrel

Si vous ne trouvez pas votre bonheur avec les google web font et que vous souhaitez utiliser une font perso, Font face generator de FontSquirrel est l’outil qu’il vous faut. Il permet de générer les différents formats (woff, ttf, otf, eot, svg) à partir d’un fichier source (quelque soit ce dernier) et vous fourni également le code CSS qui va avec.

A noter que le site FontSquirrel fournit, en plus du générateur de police, des polices gratuites et libre d’utilisation, même commerciale, à télécharger.

FontFriend

FontFriend est un book­marklet permettant de facilement appliquer une police via un sélecteur. Cette police peut être une police standard (Arial, Times New Roman, …), une police google web font ou une police perso via un drag’n drop. Un must have !

Autres

Il existe également d’autres outils dont voici une liste non exhaustive :

  • 2 sites équivalent à Google Web Font mais payant :Typekit et Fontdeck
  • Fontspring : Annuaire de police (payant)
  • Dafont : Le site de référence pour le téléchargement de police gratuite
  • What Font Is : Site qui à partir d’une image permet de retrouver une police de caractère (des extensions Firefox et Chrome sont également disponible).

Conclusion

A priori simple, l’utilisation des web font s’avère complexe à gérer afin de supporter les différents format de police. Il faut espérer que le format woff, le plus adapté pour le web, s’imposera et sera supporté par l’ensemble des navigateurs. Des outils (Google Web Fonts, Sqirrel) permettent cependant de facilement utiliser ces polices web. Attention toutefois à ne pas abuser du nombre de police dans une seule page au risque de dégrader les performances de votre site.

Améliorer le rendu de vos polices sous Linux

Vous n’êtes peut être pas satisfait du rendu de vos polices sous Linux. Voici un moyen simple d’en améliorer le rendu.

Une des première chose à faire d’aller dans le menu de configuration des polices : Système -> Préférences -> Apparence et de choisir l’onglet Polices. Si vous utiliser un écran LCD, choissiser l’option de rendu Lissage souspixel (LCD). Cliquez sur Détails … pour accéder aux options avancées. Jouez avec les paramètres pour obtenir le résultat souhaité.

Beaucoup d’autres options sont accessibles avec un fichier de configuration .fonts.conf. Voici un fichier qui permet d’améliorer le rendu de vos polices.




  
    
      true
    
  

Copier/ Coller ce texte ci dessus dans un fichier et sauvegarder le dans votre dossier personnel en tant que  .fonts.conf (Le fichier va être caché). Déconnecter vous pour que les changement soient pris en compte.

Vous pourrez trouvez d’autres fichier .fonts.conf plus complexe afin d’améliorer encore le rendu de vos police comme celui disponible ici.

Pour ma part, j’utilise le fichier le fichier ci-dessus.

Sources : Cet article est inspiré d’un article paru sur Tombuntu.com, site que je vous conseille de lire si vous êtes à l’aise avec l’anglais.