Les polices dynamiques

dans vos pages web

[ne fonctionne que sous IE 4.0 et +]

* La problèmatique : vous souhaitez enrichir vos pages web avec vos propres polices !

Lors de la création de votre page, vous pouvez utiliser librement les polices de votre choix ; seulement le visiteur, ne disposant pas forcément de la police de caractère que vous avez sélectionnée, ne visualisera votre page qu'avec les polices par défaut (Arial, Helvetica, Geneva, Times, Courrier, Verdana....). Votre page risque de perdre tous ses effets.

2 solutions s'offrent à vous

1- Créez une image avec un logiciel de PAO et l'intégrer dans votre page. Par exemple, comme ceci :

Si vous souhaitez en intégrer plusieurs, cela risque de ralentir considérablement le chargement de la page, sans compter le temps de création des images, et les difficultés d'intégration et de mise en page. C'est certes pratique pour un titre, mais si vous souhaitez un paragraphe entier, cela devient impossible !

2- Utilisez les polices dynamiques et forcer la police dans le navigateur du visiteur. Avantage : la souplesse et la légèreté du texte.

Voici comment procéder :

Pour commencer il vous faut télécharger un petit gratuiciel de Microsoft, disponible seulement en anglais pour l'instant. WEFT sert tout simplement à convertir un fichier .ttf (True Type Font) en fichier .eot (Embedded Open Type) qui se télécharge dans le cache de vos visiteurs pour que leur visiteur puisse le reconnaître. Donc la police ne s'installe pas dans le fichier "Fonts" de Windows et est vu que par votre page.

Télécharger WEFT à l'adresse suivante : http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm puis l'installer sur votre PC.

Le logiciel peut faire énormément de choses, mais pour l'instant, nous nous occupons uniquement de la création de polices dynamiques web.

Lancer l'application et procédez comme suit :

En premier, cliquez sur "Annuler" sur la première fenêtre qui va ouvrir, elle n'est pas nécessaire.

Allez ensuite dans le menu Tools > Fonts to Embed et cliquez sur Add et choisissez la police que vous voulez introduire à votre page. Pour l'exemple ici j'ai choisi la police "Morpheus". (Elle doit être installé sur votre système bien évidemment !)

Cliquez ensuite sur "Close" et cliquez sur le bouton "Embed" dans la barre d'outils. Choisissez ensuite un endroit où sauvegarder votre police en format .eot. Cliquez ensuite sur "Edit" pour entrer un nom de domaine (votre URL de site web) où la police peut être utilisée. Ceci empêchera les autres sites d'utiliser vos ressources. les trois boîtes à cocher restent comme elles sont par défaut.

Cliquez ensuite sur "Finish" et voilà votre fichier .eot est où vous le vouliez, maintenant pour le placer dans votre page. La façon la plus facile est de l'imposer à l'aide d'une CSS.

- Si vous avez déjà un fichier CSS pour votre page, simplement rajouter la formule qui suit.

- Sinon, ouvrir un fichier de texte vide avec le Bloc-Notes et sauvegarder le texte suivant en vous assurant de le nommer avec une extension .css (au lieu de .txt)

@font-face {
font-family: Morpheus;
font-style: normal;
font-weight: normal;
src: url(MORPHEU0.eot);
}

Remarquez que l'avant dernière ligne contient notre fichier .eot et que nous avons créé le nom de Morpheus comme attribut de font-family, mais vous pouvez le nommer comme vous voulez. Dans le même fichier .css vous devez créer une classe qui utilise cette police que nous venons de créer. Tapez quelque chose comme ça :

.police {
font-family: Morpheus, Arial, sans-serif;
font-size: 36px;
color: #008000;
}

La première ligne est le nom de notre classe. La deuxième inclut les polices à utiliser. C'est à dire, notre police Morpheus, si ça ne fonctionne pas, comme par exemple avec Netscape ou Opéra, utiliser Arial, et si ça ne fonctionne pas, utilisez la police par défaut sans-serif. Simple si vous connaissez les CSS. Sauvegarder votre fichier .css

Télécharger le fichier .css et le fichier .eot dans le même dossier de votre serveur web. Maintenant quand vous voulez utiliser cette classe dans votre page web, votre nouvelle police apparaîtra. Dans l'exemple <p class="police"> voici notre police Morpheus</p>

Voici la police Morpheus

Passez la souris sur le texte ci-avant, et vous verrez qu'il ne s'agit pas d'une image mais bel et bien de texte.

Attention : il se peut que cela ne fonctionne pas à chaque fois malheureusement. Lors de l'ouverture de la page, il se peut que les fichiers CSS et EOT ne soient pas correctement chargés. Cliquez sur le bouton ACTUALISER (ou F5) pour rafraîchir l'affichage, cela devrait fonctionner. De même, toutes les polices ne supportent pas les caractères accentués.

retrouvez ces polices et bien d'autres sur le site