[Résolu] Fonts non reconnues

Bonsoir tout le monde,
J'arrête de me battre avec les fonts. Des heures que ça dure... je n'ai plus la force

Voici mes CSS
@font-face {
    font-family: 'avojaloinregular';
    src: url('./webfonts//avojaloin-webfont.woff2') format('woff2'),
         url(./webfonts//avojaloin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hartingplain';
    src: url('./webfonts/harting_plain-webfont.woff2') format('woff2'),
         url('./webfonts/harting_plain-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#my-modal h1{
    font-family: 'avojaloinregular';
}

Mon HTML

<div id="my-modal" class="modal fade modal-fade" data-bs-keyboard="true" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <!-- bandeau images -->
          <div class="row align-items-end justify-content-around">
            <img class="col-6" src="http://lapagetest.fr//imgs/PamSoYou.jpg" alt="moi">
            <img class="col-6" src="http://lapagetest.fr//imgs/logo_lddc.png" alt="logo">
          </div>
		  <button type="button" i class="fa fa-times news" data-bs-dismiss="modal"></button></div>
          <div>
            <h1>Un titre</h1>

          </div>

et une capture de mon dossier source.
A savoir que j'ai déjà un problème avec l'Impact qui fonctionne en local et non en ligne.
Mais j'ai abandonné à l'époque.
Merci pour votre aide

P.
Modifié par PLGPPUR (12 Aug 2022 - 21:17)

Bonsoir,

Le problème des font-face c'est dans 95% des cas un problème de chemin, pour le vérifier rien de plus simple : il suffit de mettre l'url des fichiers en entier, juste pour voir.

Et chez vous, sans même tester, on a ça :

./webfonts//avojaloin-webfont.woff2

Le double slash au beau milieu...
Modifié par Olivier C (12 Aug 2022 - 22:18)

Bonsoir Olivier C,
Bien vu pour le double slash
Pour le reste, ça ne fonctionne toujours pas.
Bon week-end,
P.

1. Avant tout deux remarques sur le screen de la hiérarchie des fichiers (qui fait flipper) :
- on a du camelCase, du PascalCase, du snake_case, du kebab-case... voir un mélange de tout ça,
- les fichiers javascripts et images semblent avoir un dossier qui leur est dédié, les styles... non.
Évidemment tout cela, à terme, est source d'erreur. Il faut choisir une convention et s'y tenir, c'est essentiel.

2. Par rapport à la question proprement dite, deux solutions :

/* Old : */
./webfonts/avojaloin-webfont.woff2

/* Première solution, suppression du point, juste un slash, on part de la racine du projet : */
/webfonts/avojaloin-webfont.woff2

/* Deuxième solution, deux points, on dit de remonter d'un dossier : */
../webfonts/avojaloin-webfont.woff2

Modifié par Olivier C (13 Aug 2022 - 08:28)

tu as raison. Les fichiers CSS sont bien rangés dans un dossier, ceux en vrac ne sont pas utilisés, ce sont des doublons que j'aurais dû jeter
Quoi qu'il en soit, ça ne fonctionne toujours pas
Bon week-end et merci pour ton aide.

Du coup il faut bien remonter d'un dossier et prendre la deuxième solution :

/* Deuxième solution, deux points, on dit de remonter d'un dossier : */
../webfonts/avojaloin-webfont.woff2

Si ce n'est pas ça il y a un truc qui m'échappe. Il faudrait isoler cette partie du code pour faire un test : un simple dossier index.html, un dossier css avec les @font-face et stylage d'un élément, un dossier font avec les fonts concernées.
Modifié par Olivier C (13 Aug 2022 - 08:32)

Bonjour Olivier C,
Alors, j'ai mis les fonts dans la page index... et ça fonctionne (avec un point)
par contre, j'ai tenté plusieurs choses (autres fichiers CSS), ça ne fonctionne pas
Topic résolu à 90%
As-tu une idée ?
Merci et bonne fin de week-end