[Résolu] Problème de compatibilité Https et css

Bonjour à tous,
ça faisait tellement longtemps... et comme d'habitude, après avoir galéré pendant 1 semaine et plus d'une dizaine d'heures , j'ai pensé à alsacréations!
ma pages https://delaplacem.fr/loisirs.htm contient un css style2.ccs
quand je veux y accéder, ma feuille css ne se charge pas et j'ai un failed to load ressources 404 et un mixed content

et ma page se transforme en un gros pavé noir avec des lettres rouges...

ces fichiers proviennent d'un site que j'ai fait migrer chez un hébergeur sécurisé.

Pouvez vous m'exp liquer ce que je dois faire?
merci d'avance
Michel

Salut,
À la vue de ton message d'erreur ça vient du fait que tu charges ta font Google Fonts Lato dans https. Il faut donc que tu changes l'url d'import pour un protocole https au de http.
C'est dans ton fichier https://delaplacem.fr/css/demo.css
Modifié par MatthieuR (18 Mar 2021 - 23:06)

Bonjour MatthieuR ,
et merci d'avoir pris un peu de ton temps pour aider un bricoleur de 70 ans...

voilà donc le texte du demo.css concernant le la police en question

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}

body {
background: #34495e;
}

.container > header,
.codrops-top {
color: #fff;
font-family: 'Lato', Arial, sans-serif;
}

et si j'ai bien compris, c'est au moment de ce chargement que ça plante.
j'ai rajouté un s derrière le http et le problème pourrait être résolu ...
depuis j'ai travaillé un peu sur le sujet et j'ai des pages de structure identique qui fonctionne sans cette modification...

mais si j'ai bien compris, c'est là que sont chargées les polices utilisées dans le script du menu , et si je pouvais m'en passer, ce serait aussi bien...

puis-je supprimer directement cette ligne @import et remplacer cette police lato dans tous les éléments qui suivent par une police de mon choix, par exemple le comic MS ou autre Verdana ...

mais là , ça devient un peu compliqué pour moi :
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}

si j'ai été clair, je préfèrerais utiliser un code CSS simple pour ne pas avoir à "tripatouiller" ensuite dans les codes du menu de chaque page, qui sont pour moi incompréhensibles...

Merci pour ton aide
Michel

Salut,
Alors en effet tu as résolu le problème du "Mixed content" (le problème de charger des ressources non https dans un contexte http).

Les lignes `@font-face` concernent des icônes et il y a un souci sur le chargement des ces fichiers .woff, .ttf et autres. Je pense qu'ils ne sont pas sur le serveur ou bien au mauvaise endroit.

Si tu veux utiliser d'autres polices de caractères, tu peux procéder de la même manière que pour Lato, via des fonts sur Google Fonts. Il y a un choix très grand.
`@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);` permet de charger la police et ensuite dans ton code tu peux l'utiliser comme ça :

.element {
    font-family: 'Lato', sans-serif;
}