Partage
  • Partager sur Facebook
  • Partager sur Twitter

comment importer police via css

et la faire apparaitre vraiment ! ;)

Sujet résolu
26 avril 2011 à 17:27:48

bonjour

j'essaie de charger une police via mon css, mais ça n'a pas l'air de marcher. La police n'apparait pas.

Après recherche sur google, je m'aperçois que certains disent que ça marche, d'autres pas encore. On en est où ? :p

j'ai essayé avec ce code, mais ça ne fonctionne pas : :o

des idées ? merci

@font-face {
	font-family: "Hittheroad";
	src: url('HITROAD.TTF');
	}	
#menuDeroulant
{
 font-family: "Hittheroad",arial, sans-serif;
 font-size:12px ;
 text-align:center;
 font-weight:bold;
 width: 500px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 top: 0;
 left: 0;
 margin-top:130px;
 margin-bottom:50px;
 margin-left:22%;
position:absolute;
z-index:10;
}
  • Partager sur Facebook
  • Partager sur Twitter
26 avril 2011 à 17:33:51

En fait ça marche mais...comme d'habitude si tu veux que ton site soit fonctionnel sous IE tu peux oublier :p

Perso j'avais fait comme ça dans mon css :

@font-face {
    font-family: "faith";
    src: url("../css/FaithCollapsing.ttf") format("truetype");
}


(bien sûr il faut avoir téléchargé la police)

Puis dans le style du div :

font-family: "faith",arial,sans-serif;




Cette méthode fonctionne sur Safari, Opera, Chrome et Mozilla ;)


EDIT : Ah oui et j'oubliais, sinon y'a ça : http://www.alsacreations.com/tuto/lire [...] r-et-php.html
J'ai pas testé donc je sais pas ce que ça donne mais ça vaut peut-être le coup d'y jeter un oeil ;)
  • Partager sur Facebook
  • Partager sur Twitter
26 avril 2011 à 17:47:51

Bonjour,

Pour un maximum de compatibilité, je te conseille d'aller sur font-squirel et de te servir de leur générateur de font-face : il te suffit d'uploader la police que tu veux et il te la sort en plusieurs formats. Ça te génère un code pour l'intégrer aussi, mais la façon la plus compatible est comme ceci :

@font-face {
	font-family: 'KristenITC';
	src: url('itckrist-webfont.eot?') format('eot');
	src: local("☺"), url('itckrist-webfont.woff') format('woff'), url('itckrist-webfont.ttf') format('truetype'), url('itckrist-webfont.svg#webfontgZJfpDYB') format('svg');
	font-weight: 400;
	font-style: normal;
}


Le "☺" est normal et voulu, et doit être laissé ; il me semble que c'est pour corriger un bug sur de vieilles versions de navigateurs.
  • Partager sur Facebook
  • Partager sur Twitter

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

27 avril 2011 à 11:53:26

salut Tyrant et warp

Tyrant : j'ai essayé cette méthode et ça marche peut etre sur chrome etc... mais ça n'a pas l'air de fonctionner sur firefox... entr eIE et firefox ça fait bcp de navigateur laissé de côté.

je vais tenter la methode de warp, je vous dis.

EDIT : ça marche avec la méthode de warp !

le seul hic, c'est que ma typo est rogné... pas joli joli tout ça... peut etre un affinage à faire lors de la sortie sur squirel ? Warp tu saurais quoi me conseiller pour éviter que ma police sortent avec des pixels qui manquent ? :-°
  • Partager sur Facebook
  • Partager sur Twitter
27 avril 2011 à 23:51:35

Pas du tout, j'avoue que je ne me suis pas penché sur la question... Tu peux faire une image du problème ?
  • Partager sur Facebook
  • Partager sur Twitter

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

30 avril 2011 à 14:32:44

Image ci dessous du probleme.

( la compression jpeg de cette image fait qu'on ne voit plus bien ce dont je parle, notamment les pixels vides, mais on voit qu'il y a des pixels en trop ou en moins par exemple le " S " de ourstuff, et d'un point de vu général la font n'est plus nette )

Image utilisateur
  • Partager sur Facebook
  • Partager sur Twitter
30 avril 2011 à 22:27:03

Mmh, bizarre... Je t'avoue que je ne saurais pas non :/ essaie de bidouiller les paramètres de font-squirrel, ou de trouver un autre éditeur qui puisse transformer un fichier de police en multiformat :/

Désolé.
  • Partager sur Facebook
  • Partager sur Twitter

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

29 mars 2019 à 4:02:05

moi ce que jaimerais savoir c'est où mettre les fichiers et lesquels exactements et doit ton link la police dans le html ?
  • Partager sur Facebook
  • Partager sur Twitter
29 mars 2019 à 7:50:15

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Manque de recherche

La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.

Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)