Comment importer une police avec CSS

Lili_754 Messages postés 137 Statut Membre -  
pascal_sevran Messages postés 165 Statut Membre -
Bonjour,

J'aimerai savoir comment on importer une police avec CSS.

Merci d'avance,

Linda

10 réponses

  1.
    pascal_sevran Messages postés 165 Statut Membre 6
     
    bonjour
    vous pouver faire comme ca : 
    @font-face {
    font-family: 'MaSuperPolice';
    src: url('MaSuperPolice.eot') format('eot'),
         url('MaSuperPolice.woff') format('woff'),
         url('MaSuperPolice.ttf') format('truetype'),
         url('MaSuperPolice.svg') format('svg');
    0
    1. pascal_sevran Messages postés 165 Statut Membre 6
       
      }
      0
    2. Lili_754 Messages postés 137 Statut Membre 2
       
      j'ai fait ce que tu m'as dis

      @font-face {
      font-family: 'Futura Light';
      src: url('Futura Light.eot') format('eot'),
      url('Futura Light.woff') format('woff'),
      url('Futura Light.ttf') format('truetype'),
      url('Futura Light.svg') format('svg');
      }

      mais rien ne change :-(
      0
    3. pascal_sevran Messages postés 165 Statut Membre 6
       
      ha bizarre chez moi ca fonctionne, vous n'auriez pas oublier de la télécharger par hasard ou es ce que le chemin de l'url est bon?
      0
    4. Lili_754 Messages postés 137 Statut Membre 2
       
      Ben le fichier de la font est dans bien sur mon bureau et je l'ai appelé futura...
      0
    5. pascal_sevran Messages postés 165 Statut Membre 6
       
      futura ou Futura et je pense qu'il faut créer un dossier ou vous mettez votre fichier css ainsi que le fichier de la police, sur le bureau je sait pas si sa fonctionne!
      ete vous sur que votre police est valable?
      sur quel site l'avez vous telecharger?
      0
  2. pascal_sevran Messages postés 165 Statut Membre 6
     
    Le fichier de police (Futura Light.eot) doit ici être situé dans le même dossier que le fichier CSS (ou dans un sous-dossier si vous utilisez un chemin relatif).
    0
    1. Lili_754 Messages postés 137 Statut Membre 2
       
      fontsquirrel.com ne fonctionne pas pour le moment... Bon je laisse tomber ça fait plus de 3h que je suis de dessus....
      0
  3. abilify Messages postés 180 Statut Membre 6
     
    je pense que ca devrai fonctionner normalement je procède de la même façon
    0
    1. Lili_754 Messages postés 137 Statut Membre 2
       
      ben ouii je comprends pas alors.... ben je sais pas comment prendre le fichier de ma police et de le mettre dans le dossier CSS
      0
    2. pascal_sevran Messages postés 165 Statut Membre 6
       
      non a coter du fichier css dans le meme dossier.cote a cote
      si vous creer un dossier police il faut rentrer le chemin
      0
    3. pascal_sevran Messages postés 165 Statut Membre 6
       
      je m'explique mal desole
      0
  4. txiki Messages postés 6514 Date d'inscription   Statut Contributeur Dernière intervention   609
     
    C'est bon pour toi mais ce sera chez le client. Il devra lui aussi télécharger cette font. C'est pas terrible d'imposer une font qui n'est pas dans un système (Windows ou autre du reste).

    Le bonheur est la seule chose que l'on peut donner sans l'avoir.
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. pascal_sevran Messages postés 165 Statut Membre 6
     
    ben je suis pas expert je me trompe peut être mais il me semblai que j'avais le résultat chez moi également quand je visionnai la page
    et que le navigateur du client télécharge automatiquement la police, mais le problème c est que ce sont souvent des fichier assez lourd
    je pense qu il y a une erreur car le résultat devrai être visible
    0
  7. pascal_sevran Messages postés 165 Statut Membre 6
     
    Certain format de police ne sont pas compatible avec tout les navigateur

    .ttf : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs.
    .eot : Embedded OpenType. Fonctionne sur Internet Explorer uniquement, toutes versions. Ce format est propriétaire de Microsoft.
    .otf : OpenType Font. Ne fonctionne pas sur Internet Explorer
    .svg : SVG Font. Le seul format reconnu sur les iPhone et iPad pour le moment.
    .woff : Web Open Font Format. Nouveau format conçu pour le Web qui fonctionne sur IE9 et tous les autres navigateurs.
    0
    1. Lili_754 Messages postés 137 Statut Membre 2
       
      j'ai meme essayé de le faire en chemin relatif
      @font-face {
      font-family: 'futura-light';
      src:url("file://futura/futura-ligh.eot") format('eot'),
      url("file://futura/futura-ligh.woff") format('woff'),
      url("file://futura/futura-ligh.ttf") format('truetype'),
      url("file://futura/futura-ligh.svg") format('svg');

      }

      mais rien n'y fait :-(
      0
  8. pascal_sevran Messages postés 165 Statut Membre 6
     
    bonsoir,
    Pouvez vous envoyer la partie de votre code html et css concerner?
    0
    1. Lili_754 Messages postés 137 Statut Membre 2
       
      @font-face {
      font-family: 'FuturaLtCnBTLight';
      src: url('futura-light-webfont.eot');
      src: url('futura-light-webfont.eot?#iefix') format('embedded-opentype'),
      url('futura-light-webfont.woff') format('woff'),
      url('futura-light-webfont.ttf') format('truetype'),
      url('futura-light-webfont.svg#FuturaLtCnBTLight') format('svg');
      font-weight: normal;
      font-style: normal;

      }

      body {
      margin:0;
      padding:50px;
      font-family:FuturaLtCnBTLight,Verdana, Geneva, sans-serif;
      width: 900px; /* par defaut il prend 100% alors je lui ai imposé une taille pr avoir un aperçus plus juste */
      height: 825px;
      }
      0
  9. pascal_sevran Messages postés 165 Statut Membre 6
     
    Bonjour es ce que le fichier de la police se trouve dans un dossier
    dossier police = FuturaLtCnBTLight
    fichier police = futura-light-webfont
    si c est le cas il faut ecrire : 
    @font-face { 
font-family: 'FuturaLtCnBTLight'; 
src: url('FuturaLtCnBTLight/futura-light-webfont.eot'); 
src: url('FuturaLtCnBTLight/futura-light-webfont.eot?#iefix') format('embedded-opentype'), 
url('FuturaLtCnBTLight/futura-light-webfont.woff') format('woff'), 
url('FuturaLtCnBTLight/futura-light-webfont.ttf') format('truetype'), 
url('FuturaLtCnBTLight/futura-light-webfont.svg#FuturaLtCnBTLight') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 

body { 
margin:0; 
padding:50px; 
font-family:'FuturaLtCnBTLight',Verdana, Geneva, sans-serif; 
width: 900px; /* par defaut il prend 100% alors je lui ai imposé une taille pr avoir un aperçus plus juste */ 
height: 825px; 
}

    et mettre les quotes quand vous appellez la police dans votre body
    j espere que ce la va fonctionner
    tenez moi au courant
    bonne journee

    0
    1. Lili_754 Messages postés 137 Statut Membre 2
       
      J'ai fait tout ce que tu m'as dit et ça ne fonctionne tjr pas :-(
      0
  10. pascal_sevran Messages postés 165 Statut Membre 6
     
    Moi j ai essayer avec un dossier police qui s 'appelle :PixieFont-fontfacekit
    et un fichier police :PixieFont-webfont 

    @font-face
        				
	{
        					
	font-family : "PixieFont-fontfacekit";
        						
        src :url("PixieFont-fontfacekit/PixieFont-webfont.eot");
        src :url("PixieFont-fontfacekit/PixieFont-webfont.svg");
        src :url("PixieFont-fontfacekit/PixieFont-webfont.ttf");
        src :url("PixieFont-fontfacekit/PixieFont-webfont.woff");
        					}
        h1
        	{
        		font-family : "PixieFont-fontfacekit";
        		text-align : center;
			color : red;
        	}


    et ce code fonctionne
    0
    1. pascal_sevran Messages postés 165 Statut Membre 6
       
      et celui ci nn plu je vien de le tester et il fonctionne chez moi
      0
    2. Lili_754 Messages postés 137 Statut Membre 2
       
      ben c bisar la je me demande si je l'ai bien installé...
      0
    3. pascal_sevran Messages postés 165 Statut Membre 6
       
      essaye la retelecharger on c jamais ou avec une autre
      0
  11. pascal_sevran Messages postés 165 Statut Membre 6
     
    @font-face
        				
	{
        					
	font-family : "PixieFont-fontfacekit";
        						
        src :url("FuturaLtCnBTLight/futura-light-webfont.eot");
        src :url("FuturaLtCnBTLight/futura-light-webfont.svg");
        src :url("FuturaLtCnBTLight/futura-light-webfont.ttf");
        src :url("FuturaLtCnBTLight/futura-light-webfont.woff");
        					}
        h1
        	{
        		font-family : "FuturaLtCnBTLight";
        		text-align : center;
			color : red;
    0

Discussions similaires

Bref. Je cherche la police d'écriture de Bref
Ratus -
Calo mnie -

10 réponses
Police d'écriture Ricard
ponkie -
Mike-31 -

2 réponses
Quel police est utilisé dans le logo Cartier?
Ciboulette123 -
^^Marie^^ -

1 réponse
Quel est la police d'écriture utilisée ?
duff01 -
Utilisateur anonyme -

16 réponses
Police d'écriture des BD "Martine"
gagazee -
alain -

1 réponse