Etrange erreur dans console firefox sur fonte inséré en local

[herve]

Bonjour
Etrange, je n'arrive pas à retrouver le fil de discussion sur l'intégration de fontes en local. je fois être mal reviellé.
Je continuai à explorer l'intégration des fontes en locales (sous le template enfant) que je me suis aperçu du temps de chargement non négligeable de la police locale.
En regardant avec l'inspecteur firefox je m'aperçois que j'ai plein d'erreur

downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:2): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff2
downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:3): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff
downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:4): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.ttf
downloadable font: no supported format found (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:6) source: (end of source list)
downloadable font: download failed (font-family: "Lobster Two" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-regular.woff2
SEOInfo: webVitals are disabled on Firefox content.js:278:2001
GEThttps://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff2
[HTTP/2 404 Not Found 207ms]

GEThttps://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-regular.woff2
[HTTP/2 404 Not Found 205ms]

downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:2): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff2
downloadable font: download failed (font-family: "Lobster Two" style:normal weight:400 stretch:100 src index:2): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-regular.woff2
GEThttps://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff
[HTTP/2 404 Not Found 207ms]

downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:3): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.woff
GEThttps://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.ttf
[HTTP/2 404 Not Found 225ms]

downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:4): status=2147746065 source: https://j4tmp.88h.ovh/media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-700.ttf
downloadable font: no supported format found (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:6) source: (end of source list)

voir par exemple sur https://j4tmp.88h.ovh/index.php/blog...-tout-les-labs

* chose aussi étrange, je ne vois pas ces erreurs avec l’inspecteur Chromuim
* la police est quand même bien chargées. je le vois visuellement et avec l'addon "font finder"
* même problème avec plusieurs sites testées et donc téléchargement

j'ai changé le chmod au niveau des fichiers en le mettant à 664, car c'était le cas sur un site.
[question annexe de mémoire ls chmod est 755 sur les dossiers et 644 sur les fichiers. Exact ? y compris sur le répertoire /media/ ? une ressource là dessus pour l'ancrer ]

Voilà je tourne en rond depuis la semaine dernière. Une idée ? peut-être que l'inspecteur Firefox se plante vs celui de chromuim ??

[Colnem30]

Salut

Constates-tu des anomalies en back end ou front end sur ton site?

[daneel]

Bonjour,

Les différences que tu peux avoir entre les navigateurs sont essentiellement lié au cache.
De mon point de vue, je ne trouve pas les fontes dans les répertoires indiqués ni sur firefox ni sur chrome ou tout autre navigateur.

C'est vrai qu'entre le cache du navigateur, le cache du serveur voir le cache de cloudflare et autre service type cdn, cela fait beaucoup !



Pour ma part, j'ai désactivé le cache dans firefox developer que je destine principalement à des fins de test et au développement.

[herve]

Bonjour
Bon je continue ici , même si j'ai retrouvé ma conversation https://forum.joomla.fr/forum/joomla...86#post2043886 dans le fil fermé par Robert

Colnem30
le site fonctionne normalement, ce qui est étrange c'est que la police est bien affichée, même s'il y a des erreurs dans firefox
Du coup je me demande s'il faut que je m'accroche à ces erreurs dans la console?

daneel
Depuis la semaine dernière, j'ai vidé moult fois le cache navigateur et je n'en ai pas mis d'autre.

1/ chemin
comme j'ai souvenir qu'un dev du coeur mentionnait l'évolution de tout mettre dans le répertoire \media\ avec des règles de sécurités particulière, je me demande si finalement je peux mettre des fontes ailleurs que ce que tu proposais ?
Dans mon cas c'est "media/templates/site/cassiopeia_test/fonts/lobster-two-v18-latin-regular.woff2"
Car j'envisage même dans un cas ou j'ai plusieurs sites sur un mutu de mettre le dossiers "fontes" au même niveau que les répertoires d'un site, est-ce déconseillé ?

2/ alternative à une police locale
J'ai vu par ailleurs que des css mettent une alternative à une police locale. Est-ce nécessaire car le principe est que jsutement on le force à charger une police présente !?

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Lobster Two", sans-serif;
font-weight: 700;
}

[daneel]

2/ alternative à une police locale
J'ai vu par ailleurs que des css mettent une alternative à une police locale. Est-ce nécessaire car le principe est que jsutement on le force à charger une police présente !?

Tu peux la discussion et notamment cette réponse au sujet des polices de secours

https://forum.joomla.fr/forum/joomla-4-x-aa/questions-g%C3%A9n%C3%A9rales-aa/2041857-police-cursive-sous-joomla?p=2041933#post2041933

Pour les fontes, je publierai quelque chose à ce sujet en fin de semaine...

[herve]

Bonjour
2/

Tu peux la discussion et notamment cette réponse au sujet des polices de secours
https://forum.joomla.fr/forum/joomla...33#post2041933

Ok je note que je peux éventuellement mettre des alternatives comme font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
Néanmoins problème de compréhension pour moi puisque le navigateur distant va tjs charger la police sauf bien sûr s'il arrive un problème sur le fichier !!

1/

Pour les fontes, je publierai quelque chose à ce sujet en fin de semaine...

Ok je suis merci. Si tu pouvais clarifier le point sur le répertoire /media/. S'il a des droits spéciaux car il y a actuellement 775 pour les dossiers et 664 pour les fichiers?

J'ai du mettre les fontes sous le thème parent. Là encore je ne comprends pas pourquoi et notamment que la bonne fonte était affichée mais bon c'est comme ça
J'ai juste modifier mon fichier user.css sous le thème enfant pour les raisons de centraliser le plus possible mais ajouts/modifs.
J'ai un peu galéré pour les chemins mais cela fonctionne sans erreur

Police de caractère à mettre obligatoirement au début

https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts

/* lobster-two-regular - latin */
@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 400;
src: url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}

/* lobster-two-italic - latin */
@font-face {
font-family: 'Lobster Two';
font-style: italic;
font-weight: 400;
src: url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-italic.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}

/* lobster-two-700 - latin */
@font-face {
font-family: 'Lobster Two';
font-style: normal;
font-weight: 700;
src: url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/lobster-two-v18-latin/lobster-two-v18-latin-700.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}
/* oswald-300 - latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 300;
src: url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-300.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* oswald-regular - latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 400;
src: url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* oswald-500 - latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 500;
src: url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-500.svg#Oswald') format('svg'); /* Legacy iOS */
}

/* oswald-600 - latin */
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
src: url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.eot'); /* IE9 Compat Modes */
src: local(''),
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.woff') format('woff'), /* Modern Browsers */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../cassiopeia/fonts/oswald-v49-latin/oswald-v49-latin-600.svg#Oswald') format('svg'); /* Legacy iOS */
}




:root {
--cassiopeia-font-family-body: "Georgia", sans-serif;
--cassiopeia-font-family-headings: "Georgia", sans-serif;
--cassiopeia-font-weight-headings: 400;
--cassiopeia-font-weight-normal: 400;
}

h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: "Lobster Two", sans-serif;
font-weight: 700;
}


/* item du menu de navigation principal */
.container-nav .mod-menu > li > a {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 600;
padding:5px;
}