@font-face Heeeelp Please :'''''''(

Je deviens folle

Sujet résolu

28 juin 2017 à 18:17:03

Salut tout le monde,

En ce moment je fais l'apprentissage HTML5/CSS3 sur openclassrooms. On me demande pour mon cv d'utilisé @font-face. Seulement voilà je ne comprend pas la police ne fonctionne pas ou j'ai du faire une erreurs. J'ai fait pleins de tuto vidéo , j'ai testé ma page sur tout les explorer , changé 5 fois de police et sa fonctionne toujours pas.

Je décide de quand même envoyer mon exercice et une personne qui ma corrigé me dit "Pour ce qui est de la police personnalisée, elle est bien intégrée dans le fichier css"

Aloors ou est le problème ???

J'utilise Dreamweaver CC 2017

voici mon code HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="styletest.css" rel="stylesheet" type="text/css">

<title>CV</title>
</head>

<body>

   <h1>DIVA LOCA DE LA POMPA</h1>
   
<h4>Top model</h4>
   
   <figure>
	<a href="Divamini.JPG"><img id="photocv" src="Divagrande.jpg"  alt="Photo cv"/></a>
	</figure>

<h2>Mon expérience</h2>
	
    <ul>
	  <li><strong>2013-2014</strong> ambassadeurice d'une marque de croquette.</li>
	  <li><strong>2014-2015</strong> actrice dans une série B.</li>
	  <li><strong>2012-2017</strong> Bodyguard.</li>
	</ul>

<h2>Mes compétences</h2>

	
	<ul>
		<li>Faire la belle</li>
		<li>Athléte de haut niveau</li>
		<li>Obéissante</li>
	</ul>	
	
<h2>Ma formation</h2>

	<p>C'est ma maitresse qui ma formé.</p> 

<h2>Hobbies</h2>
    <ul>
	   <li>Manger</li>
	   <li>Dormir sur ma maitresse</li>
	   <li>Sorir au parc</li>
   </ul>
	</body>	 
</html>

Mon code CSS

@charset "utf-8";
/* CSS Document */

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

    src: url('LearningCurve_OT-webfont.eot');

    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),

         url('LearningCurve_OT-webfont.woff') format('woff'),

         url('LearningCurve_OT-webfont.ttf') format('truetype'),

         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}
   



	


body
{
background-image: url("noir.jpg");
background-attachment: fixed;	
}

h1,h4
{
	text-align: center;
	color:aliceblue;
}

#photocv
{
display: block;
width: 100px;
    margin: auto;
	margin-bottom: 200px;
    margin-right: 5px;
    padding: 0px;	
	border:solid black 3px;
	box-shadow: 6px 6px 0px black;
	
}
h2
{
color:darkslateblue;
font-family:'LearningCurveProRegular';
}

et 1 screen ou se trouve mes dossiers et 1 de ma page "cv"

-
Edité par anthiProud 28 juin 2017 à 19:02:00

Vicompte

28 juin 2017 à 18:35:55

De ce que je vois, ta police fonctionne mais seulement pour les h2. Il n'y a que là que tu as dit qu'il fallait utiliser ta police. Dans ta page, clique droit sur un titre h2 et fait "inspecter". Regarde l'attribut "font-family" et dis nous ce que tu vois.

-
Edité par Vicompte 28 juin 2017 à 18:36:27

anthiProud

28 juin 2017 à 18:52:17

Quand je clique sur h2 sa met color: rgb(72, 61, 139);
font-family: "LearningCurveProRegular";

-
Edité par anthiProud 28 juin 2017 à 18:53:56

Lamecarlate

28 juin 2017 à 18:54:51

Bonjour,

ton CSS attend des fichiers nommés "LearningCurve_OT-webfont.*" : ils ne sont pas du tout dans la capture que tu nous montres.

(oh, autre chose : jamais de h4 sans h3 avant, ni de h3 sans h2, etc… la hiérarchie des titres est très importante)

-
Edité par Lamecarlate 28 juin 2017 à 19:03:47

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

anthiProud

28 juin 2017 à 19:00:49

Mince désolée c'est pas le bon screen j'aurais du vérifier je vais changer sa.

Du coup mon h4 qui est après mon h1 je dois le changer en h2 ? Je croyais que s’était en fonction de l'importance du titre qu'on choisissait le "h" qu'on doit mettre

Lamecarlate

28 juin 2017 à 19:04:33

> Je croyais que s’était en fonction de l'importance du titre qu'on choisissait le "h" qu'on doit mettre

C'est tout à fait ça : et l'importance est linéaire.

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

anthiProud

28 juin 2017 à 19:08:55

Ah donc du coup je dois changer. Mais sa vient de la mon problème avec @font-face ? j'avoue que sa me soul un peu ça va faire 2 jours que je bloque sur sa alors que c'est censé être simple .

Lamecarlate

28 juin 2017 à 20:00:00

Non, rien à voir, c'est pour quoi je l'avais mis entre parenthèses précédé de "autre chose".

Je vois que tu as corrigé la capture. Tes fichiers de police sont donc dans le dossier "learning_curve_4" ? Si oui, faut prévenir le CSS, il ne peut pas le deviner

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

anthiProud

28 juin 2017 à 20:21:25

Du coup je dois faire

@font-face {
    font-family: 'LearningCurveProRegular';
src:url(../TestCV.html/learning_curve_4.0/OpenType TrueType/learning_curve_bold_ot_tt.ttf) format ('truetype');
}

Mais sa je l'avais déjà test et toujours rien. Peut être que j'ai fait une erreur ?

-
Edité par anthiProud 28 juin 2017 à 20:24:59

Lamecarlate

28 juin 2017 à 20:34:17

Bah non, il te suffit de faire le chemin relatif entre le fichier CSS et les fichiers de police. Pas besoin de remonter d'un cran.

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

anthiProud

28 juin 2017 à 20:42:06

je dois juste faire

src:url('learning_curve_4.0/OpenType TrueType/LearningCurve_OT-webfont.ttf') format('truetype')

Parce que j'ai mon dossier Learning_curve_4 et dedans j'ai un autre dossier openType TrueType ou il y la police

-
Edité par anthiProud 28 juin 2017 à 20:42:27

Lamecarlate

28 juin 2017 à 20:49:32

Oulà, tu peux simplifier

Un dossier "fonts" (ou "polices", comme tu le sens), et tu mets dedans tous les fichiers de polices, tranquille.

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

anthiProud

28 juin 2017 à 20:55:26

Trooooop contente sa fonctionne enfiiin. Merci vraiment je désespéré je voulais pas continuer le cour sans réussir sa. La dans ma tête j'ai gagné la coupe du monde lol.

J'ai fait ce que tu m'as dis avec le dossier

Lamecarlate

28 juin 2017 à 21:32:28

Super, tu m'en vois ravie !

Bonne continuation

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

anthiProud

29 juin 2017 à 8:46:46

Merci