Comment importer une police avec CSS

Lili_754 -  
Bonjour,

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

Merci d'avance,

Linda

10 réponses

Résumé de la discussion

L'importation d'une police via CSS soulève des questions pratiques sur le placement des fichiers, la gestion des chemins et la compatibilité entre navigateurs, ce qui influence le rendu. La meilleure réponse conseille d'optimiser la compatibilité entre navigateurs en utilisant des services comme Font Squirrel, qui proposent des jeux de polices compatibles et des règles @font-face adaptées. D'autres indiquent de placer les fichiers avec le CSS ou dans un dossier police, en précisant le chemin relatif, tout en évoquant le poids des fichiers et le téléchargement éventuel par le client.

Bobot (l’IA à votre service)
  1. pascal_sevran
    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
      }
      0
    2. Lili_754 Auteur
      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
      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 Auteur
      Ben le fichier de la font est dans bien sur mon bureau et je l'ai appelé futura...
      0
    5. pascal_sevran
      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
    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 Auteur
      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
    je pense que ca devrai fonctionner normalement je procède de la même façon
    0
    1. Lili_754 Auteur
      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
      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
      je m'explique mal desole
      0
  4. txiki Contributeur
    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
    2. pascal_sevran
      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
      1. pascal_sevran
        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 Auteur
          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
      2. pascal_sevran
        bonsoir,
        Pouvez vous envoyer la partie de votre code html et css concerner?
        0
        1. Lili_754 Auteur
          @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
      3. pascal_sevran
        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 Auteur
          J'ai fait tout ce que tu m'as dit et ça ne fonctionne tjr pas :-(
          0
      4. pascal_sevran
        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
          et celui ci nn plu je vien de le tester et il fonctionne chez moi
          0
        2. Lili_754 Auteur
          ben c bisar la je me demande si je l'ai bien installé...
          0
        3. pascal_sevran
          essaye la retelecharger on c jamais ou avec une autre
          0
      5. pascal_sevran 
        @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

        10 réponses
        Quel police est utilisé dans le logo Cartier?
        Ciboulette123

        1 réponse
        Police d'écriture Ricard
        ponkie

        2 réponses
        Quel est la police d'écriture utilisée ?
        duff01

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

        1 réponse