Font-Face marche sur pc, pas sur mobile

Bonjour à tous,

sur mon site Wordpress, j'utilise Font-Face pour ajouter des polices.

Les polices s'affichent correctement avec Chrome et Cafari sur mon Mac, mais Chrome et Safari sur mon iphone n'affiche pas les polices.

@font-face {
font-family: 'Raleway';
src: url('Raleway-ExtraLight.eot');
src: url('Raleway-ExtraLight.eot?#iefix') format('embedded-opentype'),
    url('Raleway-ExtraLight.woff2') format('woff2'),
    url('Raleway-ExtraLight.woff') format('woff'),
    url('Raleway-ExtraLight.ttf') format('truetype'),
    url('Raleway-ExtraLight.svg#Raleway-ExtraLight') format('svg');
font-weight: 200 !important;
font-style: normal;
}

@font-face {
font-family: 'Open Sans';
src: url('OpenSans.eot');
src: url('OpenSans.eot?#iefix') format('embedded-opentype'),
    url('OpenSans.woff2') format('woff2'),
    url('OpenSans.woff') format('woff'),
    url('OpenSans.ttf') format('truetype')
    url('OpenSans.svg#OpenSans') format('svg');
font-weight: normal;
font-style: normal;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: 'Raleway' !important;
font-display: swap; 
  }



body {
font-family: 'Open Sans' !important;
font-display: swap;
}

Merci pour votre aide

Hello,

De prime abord je dirais que le chemin vers le fichier de police est mauvais.
Cela pourrait expliquer que ta police s'affiche sur bureau car elle était déjà précédemment dans le cache, mais pas sur mobile car il ne la trouve pas.

Es-tu sûr que tes fichiers de police se trouvent exactement au même endroit que ta feuille de styles CSS ?

Si tu as installé la police sur ton mac cela va fonctionner même si tes chemins sont incorrects.

Ce genre d'erreurs se découvrent facilement avec l'inspecteur (cmd + alt + i).

Oui, je suis sûr que mes polices se trouvent dans le même dossier que ma feuille de style css.

Effectivement, en ouvrant l'inspecteur je constate que mes polices ne sont pas chargées sur le mac.

Je vous joint une capture d'écran de Filezilla, on voit bien que mes polices sont dans le même dossier.
Modifié par niz (02 Apr 2019 - 12:29)

Bonjour,

tu n'as besoin que de WOFF2 et WOFF si ton support est IE10+ (SVG c'était pour iOS 3 ptet 4, EOT pour IE6-7 et plus 8, de mémoire hein) mais c'était pas ta question

As-tu testé en enlevant font-display et en ne gardant que :

@font-face {
  font-family: 'test';
  src: url('Raleway-ExtraLight.woff2') format('woff2'),
    url('Raleway-ExtraLight.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

h1, .h1 {
  font-family: 'test', cursive !important;
  font-weight: 400 !important;
}

Donc renommage, pas d'effet de graisse, pas de gestion avancée avec font-display et que WOFF2/WOFF non pas pour une question de format mais d'erreur de syntaxe dans les autres lignes… Le plus court possible. Et cursive si "test" ne se charge pas (m'enfin Times New Roman le serif par défaut on remarquera aussi…)

Je te conseille de tester avec les Devtools de Firefox qui ont une visualisation bien avancée des polices : teste sur un site où tu sais que ça fonctionne et une fonte bien "bizarre" (où ça se voit si c'est sans-serif qui se charge en substitution) et ensuite sur ton site.
Est-ce que dans les Devtools rien n'est barré/invalide, est-ce que dans l'onglet Réseau il y a un fichier de chargé et avec le bon mimetype (compare au site où ça fonctionne), est-ce que ta CSS est valide (TOUJOURS commencer par ça) ?