Discussion :

[ml1234]

bonjour,

j'ai trouvé sur internet le code suivant pour utiliser une fonte que j'aime bien.
Quoiqu'elle ressemble fort à verdana quand j'enlève le ttf...

j'ai quelques questions :
- comment utiliser une font ? je n'avais jamais vu de ttf.
si je comprends bien la technique : chercher une fonte sur google, charger le ttf sur ce site libre de droit, l'uploader sur mon site et y faire référence dans mon code avec font-face ?
j'ai fait une recherche sur google sur futuralight.ttf et trouvé ce qui suit :
http://www.free-fonts-ttf.org/true-t...7-download.htm
mais aucune explication.

- j'ai installé les deux fichiers ttf dans le sous-répertoire images, index.htm étant dans la racine un étage plus haut que images. comment mettre à jour les deux url ? normalement pour une image, il n'y a pas d'apostrophes


merci
marc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
<!--
 
@font-face {font-family:"FuturaLightBT"; src:url("futuralightbt.ttf");}
@font-face {font-family:"FuturaBoldBT"; src:url("futuraboldbt.ttf");}
 
body {
	text-align:center;
	font-family:"FuturaLightBT",Verdana,sans-serif;
	color:#666;
	line-height:1.5;
	margin:0;
	background-color: #fff;
	background-image: url(images/back.jpg);
}
 
a {text-decoration:none; color:#4a87e2;}
a:hover {text-decoration:underline; color:#95b8d4;}
strong {font-family:"FuturaBoldBT",Verdana,sans-serif;}

[12monkeys]

Bonsoir

A priori ta méthode est correcte, il me semble juste y avoir un problème de chemin vers les fichiers de police. Dans ton cas les fichiers de police doivent être dans le même répertoire que le fichier html dans lequel ils sont appelés. En fait ce sont les mêmes règles que l'appel d'une image.

Utiliser un fichier ttf ne fonctionnera pas avec IE qui ne reconnait que des fichiers EOT. Cela ne fonctionnera pas non plus avec les navigateurs alternatifs plus anciens, utilise une version récente...

[Yorick]

salut,

Je pense que c'est un problème de chemin. Mais il manque le format aussi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

@font-face {font-family:"FuturaLightBT"; src: url(./image/futuralightbt.ttf) format("truetype"); }

Fais gaffe quand tu vas mettre les styles dans un fichier CSS (enfin si tu le fais), l'adresse sera relative à l'emplacement de ton fichier CSS.

Comme l'a dit 12monkeys, IE ne prends pas en charge les ttf. Il faut donc (encore une fois) prévoir une règle pour IE et une règles pour les autres. Il y a des subtilités à connaitre.

Une méthode recommandée est celle-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Plus d'info sur un billet de Paul Irish.

edit: ☺ correspond à ☺

[ml1234]

merci à tous
à propos, j'étais intéressé par une police de myfonts.com et ils disent que l'on ne peut pas uploader leurs polices sur le site, sinon on la rend publique !!!
dans ce cas, pas le choix il faut l'utiliser seulement en png dans un logo,...
donc, il faut bien choisir ses polices !!!
bon, je sens que je vais rester au verdana, arial,.... -(

marc