@font-face ne fonctionne pas :/

17 octobre 2017 à 18:44:14

Salut tout le monde alors voilà mon problème est le suivant :

J'essaye d'intégrer une nouvelle font sur mon site comme nous demande de le faire le tuto html/css mais à ma grande surprise et à mon grand désarroi ça ne fonctionne pas...

Lors du tuto j'avais effectivement réussi à changer la police mais maintenant que je le fais de mon coté ça ne veut plus fonctionner et pourtant j'ai bien pris soin d'indiquer le chemin correct des fichiers fonts dans ma déclaration @font-face. Voici le code de mon fichier /css/main.css. Mes fichier fonts se trouve dans /css/fonts/

voici le code de mon fichier /css/main.css

@font-face {
    font-family: 'fortysecondstreethbregular';
    src: url('fonts/FORTSSH_-webfont.eot');
    src: url('fonts/FORTSSH_-webfont.woff') format('woff'), 
        url('fonts/FORTSSH_-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/FORTSSH_-webfont.woff2') format('woff2'),
        url('fonts/FORTSSH_-webfont.ttf') format('truetype'),
        url('fonts/FORTSSH_-webfont.svg#fortysecondstreethbregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'fortysecondstreethbregular';
    color: aqua;
}

et voici le code de mon fichier /html/main.html

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../css/main.css" />
</head>

Lorsque je décide de changer mon titre de couleur le code css est bien pris en compte par le code html donc pas de soucis d'adresse à ce niveau là.

J'ai essayé avec plusieurs fonts télécharger sur FontSquirell et toujours rien voilà pourquoi je fais appel à vous.

Merci !

-
Edité par TruffierAxel 17 octobre 2017 à 18:45:57

Usuruki

17 octobre 2017 à 18:49:18

Le dossier fonts est-il bien dans le dossier css ?

UsurukiPickles coming soon !

TruffierAxel

17 octobre 2017 à 18:59:37

oui css/fonts/ et css/main.css

KFoxLDG

17 octobre 2017 à 21:08:16

J'ai eu le même problème. Pour le résoudre j'ai renommé le fichier de manière simple (un truc du style "font") puis j'ai retirer le format.

@font-face {
font-family: 'font';
src: url('fonts/font.eot');
font-weight: normal;
font-style: normal;
}

Après le problème est que le .eot n'est lu que sur explorer je crois donc tu devras soit attendre la réponse de quelqu'un d'autre ou alors changer de police pour une avec une autre extension.

-
Edité par KFoxLDG 17 octobre 2017 à 21:09:02

TruffierAxel

17 octobre 2017 à 22:24:53

Et je peux pas juste retirer la ligne avec font.eot ?

J'ai essayé de changer le nom du répertoire mais ça marche pas c'est vraiment étrange. Pourtant ça a fonctionné lors du tuto et le font utilisé avait l'extension .eot... je comprends pas ce qui bug là... je suis sur la version 56.0.1 de firefox

je m'en arrache les cheveux

Supprimer

Modérer

Signaler le message aux modérateurs