Utilisation de police Exotique

WRInaute occasionnel
Bonjour à tous,

Je souhaiterais utiliser pour mon site (sur les H1) une police dite "exotique" (Lobster).

J'ai lu pas mal de trucs sur l'utilisation des polices exotiques et parfois il y a de grosses contradictions.
Certains affirment que dans la déclaration de la Css, si le navigateur ne trouve pas la police en question, il va la remplacer par la police déclarée en deuxième position, d'autres affirment au contraire qu'il faut impérativement embarquer la police sur le serveur au risque de ne rien pouvoir afficher du tout.

Qu'en pensez vous ?
 
WRInaute accro
Pour afficher des polices exotiques, il y a une technique qui s'appelle "font face"

Sinon, c'est la police déclaré en deuxième, voir la famille si la feuille css est bien faite, qui est utilisée
 
WRInaute passionné
Salut,

Dès qu'on utilise des polices "non standard", j'entend par là non présente d'origine sous Windows (Mac on s'en fout z'ont pas la majorité), il faut soit la mettre sur son serveur, soit la linker depuis des serveurs externes.

Et dans tous les cas, il faut prévoir une police de remplacement dite "standard".
 
WRInaute passionné
Bonsoir,

Certains affirment que dans la déclaration de la Css, si le navigateur ne trouve pas la police en question, il va la remplacer par la police déclarée en deuxième position
C'est en effet le cas si l'on a une déclaration sous cette forme :
Code:
font-family: "MaPolicePerso", Arial, Verdana, sans-serif;
Si la police MaPolicePerso n'est pas chargé, la suivante sera chargé... et ainsi de suite.

d'autres affirment au contraire qu'il faut impérativement embarquer la police sur le serveur au risque de ne rien pouvoir afficher du tout
Non. Ce n'est pas un impératif d'héberger la police d'écriture sur son propre serveur. Par exemple, des services comme Google Web Fonts mettent à disposition des déclarations CSS à inclure dans sa feuille de style qui link vers les fonts hébergés sur les serveurs de Google :
Code:
@font-face {
  font-family: 'Cantora One';
  font-style: normal;
  font-weight: 400;
  src: local('Cantora One'), local('CantoraOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/cantoraone/v1/2Tarv7Qs4oCEU-xItQ7PXYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}

Le plus simple et le plus propre est, comme le conseil Marie-Aude, d'utiliser la propriété @font-face de CSS. Cependant il est très difficile de rendre compatible font-face avec Internet Explorer si l'on ne passe pas par un "générateur" de font-face. Ces générateurs permettent, à partir d'un fichier .ttf (ou autre) de générer les fonts eot (nécessaire pour IE), woff et svg.

Quelques générateurs :
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/

Je souhaiterais utiliser pour mon site (sur les H1) une police dite "exotique" (Lobster).
Navigue dans l'onglet "@font-face Kit" de http://www.fontsquirrel.com/fonts/Lobster/
Clique sur "Download font-face kit", télécharge l'archive et admire le résultat.

Si vous rencontrez des problèmes avec la propriété @font-face, vous pouvez toujours passer par des systèmes alternatifs comme Cufon (full JavaScript) ou sIFR (JavaScript + Flash). Mais dans tout les cas, se sera moins propre (d'un point de vue code et référencement). En dernier recours, tester typekit (Adobe)... très bien mais payant.
 
Discussions similaires
Haut