Discussion :

[hadidi]

Bonjour,

cette discussion fait suite à https://www.developpez.net/forums/d2...s-navigateurs/

merci encore pour avoir jeté un œil à mes problèmes.
J'ai pu regarder ce que ASCIIDEFOND me proposais aujourd'hui, et j'ai réussi à l'adapter pour lui donner la forme que je voulais.
Je teste sur mes navigateurs (safari, chrome, opéra et firefox) en local, en glissant mon fichier index.html directement dans le navigateur et tout fonctionne.

Lorsque je transfère les fichiers de mon site à l'aide de filezilla (j'ai pris un hébergement et un nom de domaine chez hostinger) pour le mettre en ligne, les choses ne s'affichent pas du tout de la même façon... Et le site est illisible et inutilisable.
Je ne comprends pas pourquoi se produit un tel changement.

Apparence du site lorsque je teste en local


Apparence du site lorsque je le met en ligne


Merci pour votre aide et votre patience

[ASCIIDEFOND]

Y a-t-il une famille de police de caractère défini dans ton code CSS ?

ex.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body {
  font-family: Arial, sans-serif;
}

[hadidi]

Oui, j'ai bien appelé une police de caractère, comme suit :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 /* APPEL DE LA POLICE DE CARACTERES */
 
        @font-face {
            font-family: "maintype";
            src: url("../types/HuttemonoV1-Regular.otf");
        }
 
 
        * {
            box-sizing: border-box;
        }
 
        html, body {
            font-family: "maintype", sans-serif;
            width: 100%;
            height: 100%;
            border: 0 none;
            margin: 0;
            padding: 0;
            vertical-align: baseline;
        }

[ASCIIDEFOND]

Et comme ça ?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
@font-face {
    font-family: "HuttemonoV1";
    src: url("../types/HuttemonoV1-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
 }
 
 html {
    font-family: "HuttemonoV1";
}

Le chemin de l'url est bien correct sur ton serveur.

[hadidi]

Bonjour,

J'ai appliqué vos conseils et le résultat est toujours le même.
C'est comme si le script ne s'appliquait pas...
Dois-je appeler dans mon html la bibliothèque jquery pour que le style fonctionne ?

[ASCIIDEFOND]

Ce code fonctionne bien chez moi en local mais avec cette police "Kaushan Script" téléchargée sur https://www.fontsquirrel.com/fonts/list/popular

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
        @font-face {
            font-family: 'Kaushan Script';
            src: url('types/KaushanScript-Regular.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }
 
        html {
            font-family: "Kaushan Script";
        }

Si avec la police "HuttemonoV1-Regular.otf" ça fonctionne en local mais pas sur ton serveur, il faut peut-être regarder au niveau des attributs et droits d'accès qui sont accordés au répertoire "types".

Voir ici pour les droits d'accès des fichiers et des dossiers: https://support.hostinger.fr/fr/arti...t-les-dossiers

Sinon, je ne pense pas que JQuery résoudra ce problème.