28172 sujets

CSS et mise en forme, CSS3

[Résolu] Utilisation fontes en local ne fonctionne pas

Bonjour
Je galère depusi quelques heures à isntaller des polices en local qui me semblait simple.
J'ai essayé des chemins différents sans succès. Pourant je vois bien la déclaration des h1 avec la police "Lobster two"

La page:
https://j4tmp.88h.ovh/index.php/blog/sites-web/makery-le-media-de-tout-les-labs

Le chemin :
upload/1664961735-58614-capturedancrandu2022-10-0511-.png

Le code :
/* lobster-two-regular - latin */
@font-face {
  font-family: 'Lobster Two';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lobster-two-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lobster-two-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-two-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-two-v18-latin/lobster-two-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-two-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/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('../fonts/lobster-two-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lobster-two-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-two-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-two-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-two-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/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('../fonts/lobster-two-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lobster-two-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lobster-two-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lobster-two-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lobster-two-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lobster-two-v18-latin-700.svg#LobsterTwo') format('svg'); /* Legacy iOS */
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Lobster Two", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}


L'image
upload/1664961696-58614-capturedancrandu2022-10-0511-.png
Modifié par HDcms (11 Oct 2022 - 17:30)
Bonjour,
si tes fontes sont bien à la racine de ton site, dans un dossier, ce que je crois voir, il te faut déclarer ce dossier de fontes directement, sans / ou autres chemins avant. Exemple :
@font-face {
..........
src: url('fonts/lobster-two-v18-latin-700.eot'); /* IE9 Compat Modes */
}

Tu vois la déclaration des h1 avec la police "Lobster two", mais est-ce que tu vois le résultat sur ta page ?
https://www.alsacreations.com/astuce/lire/78-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html
Un test à effectuer, que je viens de faire chez moi sur l'un de mes sites, par acquit de conscience. Tu mets une fonte par exemple lobster-two-v18-latin-700.eot à la racine de ton site (vraiment à la racine, sans rien avant), sur @font-face tu mets le nom de cette fonte, sans aucun répertoire avant, et ça devrait fonctionner.
Et tu déclares bien dans ton css, là où tu en as besoin
font-family: Lobster Two;

Modifié par Bongota (05 Oct 2022 - 13:54)
re
merci pour cette piste.
Effectivement cela fonctionne si j'enlève ", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji""
de
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Lobster Two", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}

Cela fonctionne même en enlevant la fonte de la racine.

Par contre je ne comprends pas pourquoi ? ce serait mal formé ? car effectivement pris sur un exemple de démo !
Les nombreuses fontes listées après font-family (sur tes hn...) sont des fontes système. Elles sont là pour servir de garantie afin qu'un navigateur quelconque trouve chaussure à son pied.
Je ne comprends pas pourquoi tu mets la fonte "Lobster Two" ici. "Lobster Two" est une fonte importée par @font-face, pas une fonte système. Il se peut que ton navigateur choisisse une des fontes proposées dans font-family, mais si tu les enlève toutes sauf "Lobster Two", il ne restera plus que celle-ci comme choix pour la navigateur. Si le chemin est bon, il la prendra, mais c'est pas comme ça qu'il faut faire.
Bonjour
j'avai fais un copier/coller
J'imagine que pour tous les éléments j'ai les polices définies par le cms (joomla ici).

Pour modifier un élément particulier comme les Hx, j'ai quand même ajoutés les polices comme vues sur https://developer.mozilla.org/fr/docs/Learn/CSS/Styling_text/Web_fonts 
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
  font-weight: 700;
}


mais effectivement comme je ne laisse pas le choix et que je télécharge une police en local, théoriquement je n'en ai pas besoin !?
Bonjour
Cela fonctionne sur le site de test https://j4tmp.88h.ovh/index.php/blog/sites-web/makery-le-media-de-tout-les-labs
mais le temps d'affichage de la police locale est très long sur le futur site https://v2.clibre.eu/
Enfin plus exactement la police s'affiche bien pour le h1 avec 
 h1, .h1 {
  font-family: "Lobster Two";
  font-weight: 700;
}

mais j'ai plein d'erreur dans la console

...
EThttps://v2.clibre.eu/media/templates/site/cassiopeia_clibre/fonts/lobster-two-v18-latin-700.woff2
[HTTP/2 404 Not Found 1106ms]

downloadable font: download failed (font-family: "Lobster Two" style:normal weight:700 stretch:100 src index:2): status=2147746065 source:  https://v2.clibre.eu/media/templates/site/cassiopeia_clibre/fonts/lobster-two-v18-latin-700.woff2
 

...

Je savais qu'il ya vais un petit temps de latence pour l'affichage en local, mais là c'est désespérant
J'ai pourtant la même structure (normalement) de l'arborescence et du fichier
Je tourne en rond Smiley decu
Modifié par HDcms (07 Oct 2022 - 16:23)
Bonjour
J'oublié de dire que j'avai lu et regardé puis regardé. Le chemin est bon.
BOn pas au bureau, je vais regarder à nouveau lundi
Bonne journée
Re
Autre info importante. Le style est quand même pris en fin de compte
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Lobster Two";
  font-weight: 700;
}

Cette erreur ne fait "que retarder" le chargement me semble-t-il?
Bonjour
parsimonhi a écrit :
Bonjour,

L'erreur dit que le fichier lobster-two-v18-latin-700.woff2 est recherché dans le dossier https://v2.clibre.eu/media/templates/site/cassiopeia_clibre/fonts, et qu'il ne s'y trouve pas.

Et c'est pareil à https://j4tmp.88h.ovh/index.php/blog/sites-web/makery-le-media-de-tout-les-labs d'ailleurs.

Et c'est probablement pareil pour tous les autres fichiers dont le nom commence par lobster-two.

Amicalement,

Eu je ne comprends pas . après vérification avec l'explorateur , je n'ai pas de message d'erreur sur https://j4tmp.88h.ovh/index.php/blog/sites-web/makery-le-media-de-tout-les-labs Smiley eek
J'ai aussi regardé les droits dans les 2 cas, j'ai bien 775 pour les dossiers.
par contre, là ou cela me semble fonctionné pour moi, il y avait 664. En mettant 664 sur le site provisoireà l place de 644 . ex: https://v2.clibre.eu/logiciels-libres/liferea-lecteur-de-flux-rssc cela semble fonctionner pour le H1
Il me semblait pourtant que 644 c'était mieux mais bon !
en fait je suis perplexe, je n'ai aucune erreur avec l'inspecteur sous chromuim mais plein d'erreur avec l'inspecteur firefox 105.0.1 !!
Modérateur
Bonjour,

1) Vide ton cache

2) Même avec Chrome, il y a des erreurs dans la console de l'inspecteur.
lobster-two-v18-latin-700.woff2:1          Failed to load resource: the server responded with a status of 404 ()
etc.
Les fichiers de police sont-ils bien sur le serveur dans le dossier où Joomla les cherche ??? J'ai quand même quelques doutes.

3) Joomla a tendance à rajouter des .htaccess là où on le les attend pas forcément. Vérifie qu'il n'y a pas sur ton serveur dans le dossier contenant les polices (ou dans un dossier contenant ce dossier) un . htaccess qui empêcherait le bon déroulement de l'envoie des fichiers de police au navigateur de l'internaute.

4) Si tu as par ailleurs installé la police lobster-two sur ta machine de test, selon le code css que tu emploies, ta page peut s'afficher correctement et tes tests peuvent ne pas être pertinents.

Amicalement,
Modérateur
Bonjour,

Et puis c'est quoi cette phpdebug-bar accessible à tous ??? Tu tiens absolument à te faire hacker ?

Amicalement,
Bonjour
Merci pour le suivi, ok j'enlève le debug que j'ai laissé depuis un peu trop longtemps .

Je suis tout aussi perplexe, mais moins stressé puisque la police s'affiche bien (vu avec d'autres personnes, d'autres navigateurs) et aujourd'hui je n'ia plus toutes ces erreurs avec firefox !
1/ j'ai vidé le cache du navigateur, plein de fois (de mémoire à un époque cela fonctionnait moins bien avec Chromuim !). Je n'ai pas mis de cache ailleurs.

2/ le répertoire est bon, la police s'affiche, car vu avec l'addon "font finder" mais effectivement je vais chercher un autre emplacement

3/ j'ai regardé dans l'arborescence et je n'ai pas vu de htaccess

Pour aller plus loin, je me demande si je dois mettre une alternative à une police locale. Est-ce nécessaire car le principe c'est que justement 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;
}
Bonjour
Effectivement c'était une histoire de chemin. ouf Smiley sweatdrop
Joomla 4+ permet maintenant de faire des thèmes enfants (un peu comme wp)
Néanmoins, il n'accepte pas les fontes en dehors du thème parent
Sujet clos
Aller à