Probleme avec @Font-face

Sujet résolu

23 juin 2017 à 20:08:28

Bonjour,

Je suis entrain d'étudier le cours de CSS, et je n'arrive pas a mettre en place @font-face.

Mes fichiers html et css ont le meme nom "skazka.html" et "skazka.css", et sont places dans un meme dossier appelé "skazka", ainsi que la police "Alice" telechargee sous .ttf. Cependant, la page html ne reproduit pas cette police sous @font-face, ni aucune autre non plus. Pouvez-vous me guider et dire ou je fais erreur? Et comment bien utiliser @font-face ? Je vous remercie d'avance.

Voici comment se présente mon fichier skazka.css :

@font-face {font-family: 'Alice';

src: url('Alice/Alice-regular-webfont.ttf') format('truetype');}

{ font-family: 'Alice', Arial, serif;}

Voici comment se présente mon fichier html :

<!DOCTYPE html>

<html>

<head>

<title>Premiers tests du CSS</title>

</head>

<body>

<h1>Mon super site</h1>

</body>

</html>

Lamecarlate

23 juin 2017 à 20:20:27

Bonjour,

le fichier de police est-il dans le dossier "Alice", comme le suggère le CSS ?

Est-ce qu'il y a autre chose dans le CSS, comme des couleurs ? Si oui, s'affichent-elles bien ?

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

JulieDupont2

23 juin 2017 à 22:42:05

Bonjour,

Oui, le fichier de police se trouve dans le dossier "Alice" qui lui se situe dans le dossier "Skazka".

Je viens de tester la couleur, et ça marche. Mais la police elle ne change pas.

Lamecarlate

23 juin 2017 à 22:46:26

Quand tu regardes ta console web (ça s'ouvre avec F12, ou Ctrl + Shift + K, ou Ctrl + Shift + J, ça dépend des navigateurs), que tu recharges ta page, est-ce que tu vois une erreur ? Regarde aussi dans l'onglet Réseau des outils de développement.

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

JulieDupont2

23 juin 2017 à 23:08:25

Lorsque je clique sur "Afficher les ressources de la page", il est écrit "erreurs de la console" et "l'URL demandée est introuvable sur ce serveur".

Lamecarlate

24 juin 2017 à 9:04:34

Bah voilà : le chemin (incluant le nom du fichier, et sa casse) doit être erroné. Est-ce qu'on peut voir une capture d'écran de tes dossiers (et fichiers) ?

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

nanart

24 juin 2017 à 15:17:56

JulieDupont2 a écrit:

Mes fichiers html et css ont le meme nom "skazka.html" et "skazka.css", et sont places dans un meme dossier appelé "skazka", ainsi que la police "Alice" telechargee sous .ttf.

Voici comment se présente mon fichier skazka.css :

@font-face {font-family: 'Alice';

src: url('Alice/Alice-regular-webfont.ttf') format('truetype');}

Bonjour,
Sauf erreur de ma part, quand on indique une url dans un fichier css, le lien est relatif à ce fichier.
Cad:

si le css est dans un dossier X et la font dans le même dossier: url('mafont')
si le css est dans un dossier X et la font dans un "sous dossier" X/Y: url('Y/mafont')
si le css est dans un dossier X et la font dans un autre dossier parent Y: url('../Y/mafont')

Bref, ce n'est pas par rapport au fichier html qu'il faut informer l'url, mais bien par rapport au fichier css...

-
Edité par nanart 24 juin 2017 à 15:19:42

JulieDupont2

24 juin 2017 à 15:37:31

Voici les captures d'écran

nanart

24 juin 2017 à 17:27:57

src: url('Alice/Alice-regular-webfont.ttf') format('truetype');}

erreur sur le nom du fichier font ??

src: url('Alice/Alice-regular.ttf') format('truetype');}

++
Éviter majuscules et caractères accentués dans les noms des dossiers et fichiers.
Cela risque aussi de poser problème...
Ex avec Regular et regular.

-
Edité par nanart 24 juin 2017 à 17:35:30

Lamecarlate

24 juin 2017 à 20:19:49

Ah, en effet, nanart a bien vu : le nom du fichier est incorrect.

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

nanart

24 juin 2017 à 21:34:09

Ne pas oublier "d'harmoniser" vos noms de fichiers et dossiers.
Pour exemple, sauf erreur, un serveur Apache fait la différence entre minuscules et majuscules.
Ainsi il ne trouvera pas une url Alice-regular... pour un fichier qui, en fait s'appelle Alice-Regular (idem pour les dossiers).

-
Edité par nanart 24 juin 2017 à 21:36:16

Lamecarlate

24 juin 2017 à 21:50:17

nanart > techniquement ce n'est pas Apache, mais l'OS sur lequel il est installé : ce sera très souvent GNU/Linux, et cet OS est sensible à la casse. (jamais compris pourquoi Windows ne l'était pas)

-
Edité par Lamecarlate 24 juin 2017 à 21:50:29

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

JulieDupont2

25 juin 2017 à 18:37:15

Merci beaucoup pour votre aide! J'ai essayé et ça marche. J'ai bloqué pendant plusieurs jours sur ce problème, et vous l'avez enfin résolu

Merci