Bonjour à tous !

Je suis actuellement le cours de Matthieu(Mathieu) Nebra sur le HTML et le CSS. Dans le deuxième chapitre, leçon "Formatage du texte", il y a une section où on rajoute d'autres polices.

Seulement voilà, lorsque je suis la leçon et que je l'adapte à mon cas, les titres en h1(et certainement toutes les autres balises) ne prennent pas la police que je tente de créer.

Voici mon code :

Mon fichier CSS :

Les différents dossiers :

Là où est le code qui est FichierHTML, inséré au dessus (faites pas gaffes aux images) :

Et là où il y a les différents formats de ma police :

Si jamais une âme charitable arrivé à m'expliquer pourquoi ça ne fonctionne pas et m'aider à trouver la solution, je lui offrirais toute ma reconnaissance

Merci d'avance à ceux qui se pencheront sur mon cas !

Moi aussis je rencontres ce problème, une solution qui marche mettre le @font-face dans une balise <styles> au niveau de ton head... Ça marche mais ça fait moche dans le code, Ps: J'ai jamais compris pk ça marchait pas.

-
Edité par Saint Fleur Jean 12 février 2018 à 13:19:50

Saint Fleur Jean a écrit:

Moi aussis je rencontres ce problème, une solution qui marche mettre le @font-face dans une balise <style> au niveau de ton head... Ça marche mais ça fait moche dans le code, Ps: J'ai jamais compris pk ça marchait pas.

Merci de ta réponse ! En effet j'y avait pensé !

Pour ce fichier là ça ne poserai pas trop de problème, mais le jour où j'aurai 20 pages sur mon site et que je devrais le taper 20 fois, sans compter les mises à jour éventuelles ...

Donc j'aimerais bien comprendre quoi. Mais sinon oui, pour ce fichier je pourrais faire ça!

Bonjour,

déjà, modifie ton titre pour le rendre plus explicite : on est sur le forum HTML/CSS, on se doute bien que ton problème concerne l'un ou l'autre de ces langages.

Ensuite, des problèmes de polices ont été maintes fois traités sur ce forum, as-tu fait une recherche dedans ?

(et oui, mettre @font-face dans une balise <style> du HTML c'est pas propre et c'est à éviter, le problème est peut-être à voir dans la position des fichiers de police par rapport aux fichiers CSS et HTML)

Bonjour , essaie peut-être d'appelé les source avant font-family dans @font-face ( je ne suis pas sûr mais je crois ) ..

Lamecarlate a écrit:

Bonjour,

déjà, modifie ton titre pour le rendre plus explicite : on est sur le forum HTML/CSS, on se doute bien que ton problème concerne l'un ou l'autre de ces langages.

Ensuite, des problèmes de polices ont été maintes fois traités sur ce forum, as-tu fait une recherche dedans ?

(et oui, mettre @font-face dans une balise <style> du HTML c'est pas propre et c'est à éviter, le problème est peut-être à voir dans la position des fichiers de police par rapport aux fichiers CSS et HTML)

Merci de m'avoir répondu !

Alors oui, j'ai déjà fait des recherches, je suis bloqué là-dessus depuis hier soir, et je pense avoir fait le tour de mes connaissances et des sujets du forum.
Un deuxième problème est que je suis un grand débutant, aussi bien dans le HTML/CSS que dans n'importe quel autre langage.

Il me semblait pourtant que ma ligne <link rel="stylesheet"href="style.css"> était bonne, pourrais-tu m'expliquer pourquoi elle ne l'est pas (si c'est bien ce dont tu parles) ?

Je ne comprend donc toujours pas ce qui ne va pas avec mes fichiers

Merci d'avance de ton aide !

-
Edité par EvanHourrier 12 février 2018 à 13:50:57

Bonjour,

Pour moi le problème viens des différents url que tu déclare

EvanHourrier a écrit:

Là où est le code qui est FichierHTML, inséré au dessus (faites pas gaffes aux images) :

Et là où il y a les différents formats de ma police :

Si comme je le comprend ton fichier css est situer dans ton dossier ../formatage du texte et que tes différents fichiers de formats de police sont dans ../formatage du texte/cacchampagne_regular_macroman alors ce sont les sources de ton @font-face qui n'indique pas le bonne endroit

EvanHourrier a écrit:

Il faudrait donc que tu change tes différent

url('cacchampagne...')

par 

url('cacchampagne_regular_macroman/cacchampgne...')

En espérant avoir résolut ton problème

Si tu mets dans ton CSS

body {
  background: red;
}

est-ce que le fond de ta page devient rouge ? Si non, tu as un problème de lien entre le HTML et le CSS.

Bonjour,

perso la première chose qui me paraît étrange concerne les extensions de test fichiers. Elle sont masquées par défaut dans Windows. C'est ton cas puisque par exemple tu as "FichierHTML" et non pas "FichierHTML.html", même chose on ne voit pas les extensions .css ni .png.

Les fichiers de police sont étranges : on ne voit pas les extensions .ttf ou .svg mais on voit .eot et .woff... Ce n'est pas normal : dans Windows c'est maqué ou afficher mais pas un mix des deux. Il est probable que ton fichier "cac_champagne_webfont.eot" se nomme en réalité "cac_champagne_webfont.eot.eot".

Commence par vérifier cela. 

Bonjour !

Je vais certainement passer pour un gros boulet, mais ce que tu m'as demandé d'écrire (url('cacchampagne_regular_macroman/cacchampagne ...') est déjà écrit, c'est justement ce que j'ai non ?

J'ai très certainement TRES mal compris ce que tu voulais me dire, bien que j'ai l'impression que tu l'ai dit le plus simplement possible ^^'

Lamecarlate a écrit:

Si tu mets dans ton CSS

body {
  background: red;
}

est-ce que le fond de ta page devient rouge ? Si non, tu as un problème de lien entre le HTML et le CSS.

 

Ça m'as l'air bon !

Mewen_bzh a écrit:

Bonjour,

perso la première chose qui me paraît étrange concerne les extensions de test fichiers. Elle sont masquées par défaut dans Windows. C'est ton cas puisque par exemple tu as "FichierHTML" et non pas "FichierHTML.html", même chose on ne voit pas les extensions .css ni .png.

Les fichiers de police sont étranges : on ne voit pas les extensions .ttf ou .svg mais on voit .eot et .woff... Ce n'est pas normal : dans Windows c'est maqué ou afficher mais pas un mix des deux. Il est probable que ton fichier "cac_champagne_webfont.eot" se nomme en réalité "cac_champagne_webfont.eot.eot".

Commence par vérifier cela. 

Quand je regarde dans les propriétés, ça a l'air d'être le cas !

Je suppose que ça fausse le chemin que je lui indique ?

#EDIT : En fait non, quand j'essaie de supprimer le .eot dans le nom du fichier, ça change l'extension. Donc je pense pas que ce soit le cas au final.

-
Edité par EvanHourrier 12 février 2018 à 14:15:13

EvanHourrier a écrit:

Je vais certainement passer pour un gros boulet

Nan c'est moi le gros boulet qui est mal lut ce que tu avait écrit tu as fait exactement ce que je te demandais, my bad  :/

Essaie ce que te conseille lamecarlate et Mewen_bzh. Pour l'instant je ne voit pas ce qui ne passe pas :/

MartinLévêque a écrit:

EvanHourrier a écrit:

Je vais certainement passer pour un gros boulet

Nan c'est moi le gros boulet qui est mal lut ce que tu avait écrit tu as fait exactement ce que je te demandais, my bad  :/

Essaie ce que te conseille lamecarlate et Mewen_bzh. Pour l'instant je ne voit pas ce qui ne passe pas :/

Ah d'accord

Merci de toute même d'avoir pris le temps de m'aider, c'est vraiment gentil !

Pourrais tu envoyer ton code (html et CSS) en utilisant le bouton </> pour qu'on puissent regarder ce qu'il ce passe dans le DOM?

J'ai essayer de reproduire ton code html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css" />
        <title>test</title>
    </head>

    <body>

    	<h1>TEST</h1>

    </body>
</html>

et CSS :

@font-face
{
	font-family: 'cac_champagneregular';
	src: url('cacchampagne_regular_macroman/cac_champagne-webfont.eot');
	src: url('cacchampagne_regular_macroman/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
		 url('cacchampagne_regular_macroman/cac_champagne-webfont.woff') format('woff'),
		 url('cacchampagne_regular_macroman/cac_champagne-webfont.ttf') format('truetype'),
		 url('cacchampagne_regular_macroman/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
}

h1
{
    color: red; 
    font-size: 3em;
    font-family: 'cac_champagneregular', Arial, Serif;
    font-weight: bold;
    text-decoration: underline;
}

et sur mon pc ça marche essaie le pour voire si ça ne viens pas de tes fichier. Essaie aussi d'ouvrir ton fichier cac_champagne-demo pour voire si ce ne sont pas tout simplement tes fichiers qui ont étaient mal télécharger.

Voilà pour le CSS (j'ai mis mon fichier html et mon fichier css dans le dossier des polices, donc plus de chemin à rallonge)

@font-face { /*Définition d'une nouvelle police nommée CAC Champagne */
	font-family:'cac_champagneregular';
	src : url('cac_champagne-webfont.eot');
	src : url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
	    : url('cac_champagne-webfont.woff') format('woff'),
	    : url('cac_champagne-webfont.ttf') format('truetype'),
	    : url('cac_champagne-webfont.svg') format('svg');

}

h1
{
	font-family: 'cac_champagneregular', 'Courrier New';
}

 Et le code html.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Mon titre</title>
</head>
<body>
	<h1>Ceci est un titre en H1</h1>

	<p class="Wow">Oups j'ai failli oublier de mettre un titre en h1!</p>
	<p>Ceci est un premier paragraphe sur lequel je vais pouvoir m'amuser.</p>
	<p>Ceci en est un deuxième, et on va bien s'amuser.</p>

</body>
</html>

A noter que même en faisant ma manip' de changements de dossiers ça ne fonctionne pas

Ah je pense avoir trouvé ton erreur  : tu ne dois pas remettre le signe ":" à chaque début de ligne, regarde bien l'exemple du cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/formatage-du-texte#/id/r-1610265

Essaye ceci :

@font-face { 
    font-family:'cac_champagneregular';
    src : url('cac_champagne-webfont.eot');
    src : url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
          url('cac_champagne-webfont.woff') format('woff'),
          url('cac_champagne-webfont.ttf') format('truetype'),
          url('cac_champagne-webfont.svg') format('svg');
 
}

-
Edité par Mewen_bzh 12 février 2018 à 15:05:23

@font-face { /*Définition d'une nouvelle police nommée CAC Champagne */
	font-family:'cac_champagneregular';
	src : url('cac_champagne-webfont.eot');
	src : url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
	      url('cac_champagne-webfont.woff') format('woff'),
	      url('cac_champagne-webfont.ttf') format('truetype'),
	      url('cac_champagne-webfont.svg') format('svg');

}

h1
{
	font-family: 'cac_champagneregular', 'Courrier New';
}

Ça fonctionne !

J'avais réellement pas vu ça, la vache !

Bon je me le note 20 fois dans mes mémos ça!

Merci beaucoup à toi et à vous tous !

(et sinon, relire mon premier message, notamment la première phrase, merci d'avance)