Failed to load resource: net::ERR_FILE_NOT_FOUND

Problème pour charger un @font-face

17 mars 2024 à 21:58:29

Bonjour lorsque je réalise ma page avec visual studio code et la preview tout vas bien tout se charge mais lorsque je tente de l'ouvrir avec Google Chrome celui ci m'affiche que pour les "@font-face il n'arrive pas à trouver le document

Voici mon code HTML:

Et le CSS :

@font-face {

font-family: "Mercado";

src: url("/font/Mercado.otf") format("opentype");

}

@font-face {

font-family: "Sephir";

src: url("/font/Sephir-Regular.otf") format("opentype");

}

@font-face {

font-family: "VALORANT";

src: url("/font/Valorant.ttf") format("truetype");

}

.accueil{

float: left;

display: flex;

margin: 20px;

margin-top: 2px;

}

ul {

list-style-type:none;

}

li{

float: right;

margin: 20px;

}

ul li a {

display:block;

text-align:center;

transition: color 0.3s ease-out 100ms

}

ul li a:hover {

color: #AFC5D1;

}

img{

border-radius: 40px;

}

.code{

font-family: courier, courier new, serif;

font-weight: bold;

border:1px dashed;

padding:2px

}

body{

padding:20px;

margin: 20px auto;

width:80%;

height: 100vh;

width: 100vw;

background-image: url("/img/backgroundblue.png");

background-repeat: no-repeat;

background-size: cover;

font-family: "Mercado";

}

.profil_photo{

position:relative;

float:left;

width:100px;

}

text-decoration: none;

list-style: none;

}

color: #FFFFFF;

}

.important{

font-family: "Sephir";

color: #FFFFFF;

font-size: 30px;

}

.t1{

text-align: center;

font-size: 50px;

color: #FFFFFF;

font-family: "Sephir";

}

.Valorant{

font-family: "VALORANT";

}

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</ul>

<ul>

<li><a href="passions.html">Passions</a></li>

<li><a href="index.html">Accueil</a></li>

</ul>

</header>

<main>

<h1>Lorem ipsum</h1>

<h2>Lorem ipsm</h2>

<p>

Lorem ipsum

</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem impedit, consequuntur voluptatum alias consectetur voluptates dicta nulla provident placeat molestias aliquam itaque veniam expedita non, illum nihil numquam aliquid accusantium.</span>

</p>

</main>

</body>

</html>

AbcAbc6

17 mars 2024 à 22:25:15

Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code </>

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Bonsoir, pour quelles raisons vous utilisez des URL absolue pour les polices et des URL relative pour vos liens? Quelle est l'URL de votre page quand vous l'ouvrez avec votre navigateur?

Quel est la hiérarchie de votre projet?

La balise <img> ne sort jamais sans son attribut alt obligatoire.

Dans un paragraphe vous avez une fermeture de balise <span> sans ouverture. Passez votre code au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Pour la propriété CSS font-family elle se termine par une famille de police générique. Validateur CSS => https://jigsaw.w3.org/css-validator/

Pour le sélecteur body vous avez deux propriétés width, la dernière écrase les précédentes.

Pour ceci c'est NON :

*{
    text-decoration: none;
    list-style: none;
}

Tous les éléments ne sont pas impacter par ces propriétés, inutile donc de cibler tous les éléments pour leurs attribuer des propriétés qu'ils ne peuvent appliquer.

-
Edité par AbcAbc6 17 mars 2024 à 22:50:16