28111 sujets

CSS et mise en forme, CSS3

Fontface en local

bonjour je m' essaye quelque peu en local, sur la création d’un site, et je rencontre un problème sur les" font face" chose surprenante quand je passe mon fichier css3 dans le validator tout est validé. je pense donc a une erreur de chemin mais je fais des dizaines d essai infructueux.
on m' a conseillé de coller a src "local"afin de preciser d aller les chercher sur mon ordi.donc voici tout d' abord mon code css:
@font-face {
font-family:"KJV1611";
src:local("C:\mysites\KJV1611.otf");
}
p
{
font-family: "KJV1611";
}


j ai la dessus tous mes fichiers au même endroit donc le css colle au fichier de police je suis perdu ....
Modifié par Rodolphe (26 Jul 2022 - 14:03)
Bonjour,
Le font face n'est pas un protocole intuitif. Je vous conseille de passer par un générateur de webfont tel que Font Squirrel.
Vous uploadez votre police .otf, à partir de là le site vous proposera de télécharger le zip d'un dossier d'une petite démo avec tout le code nécessaire, notamment la font convertie en format optimisé pour le web (.woff et .woff2), ainsi que tout le CSS qui ressemblera à ceci (qui marche en local) :
@font-face {
    font-family: 'nomDeLaWebfont';
    src: url('la-webfont.woff2') format('woff2'),
         url('la-webfont.woff') format('woff'); /* Notez que, pour le chemin, la police est située exactement au même niveau hiérarchique que votre cas d'utilisation. */
    font-weight: normal;
    font-style: normal;
}

Vous voyez donc ici que le code utilise `src()` et non `local()`.

Pour local() il s'agit d'utiliser une police système déjà présente sur l'ordinateur au niveau... système, donc sans indiquer le chemin mais juste le nom exact, quitte à le changer (c'est à ma connaissance le seul intérêt du truc). A ne pas utiliser en production à destination du web, seulement pour de l'intranet avec un parc informatique que l'on maîtrise, donc ce n'est à priori pas votre cas d'utilisation.
Modifié par Olivier C (18 Apr 2022 - 08:53)
Bonjour,
oui, il faut d'abord importer la police, comme le dit Olivier.
Ensuite, il faut donner le chemin, avec url et non local.
Que ce chemin soit local ou distant, peu importe, il suffit de savoir où il est. Avec exactement le même chemin, ça fonctionnera en local ou en distant, à condition d'avoir mis tes fontes à la fois sur ton disque dur et sur le serveur distant.
Et pourquoi répéter font-family: "KJV1611"; entre deux {} ? Et que vient faire le p, tout seul ?
Sur Alsacreation, une astuce avait été donnée pour le local :
body {
  ............
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
Modérateur
Bonjour,

Sauf erreur de ma part, local indiqué l'utilisation d'une font installée sur le PC de l'internaute. Il ne faut donc seulement indiquer le nom de la font.
Ensuite, src peut-être être utilisé derrière au cas où celle ci est absente du système du visiteur , de façon à aller la chercher la où elle est accessible depuis le Web.

Enfin, je dirais que si la font est présente et installée sur le système, il me semble bien qu'il soit inutile de la déclarer dans @font-face via local, src lui reste l'alternative en ligne.

Cdt
Modifié par gcyrillus (18 Apr 2022 - 16:06)
gcyrillus a écrit :
Enfin, je dirais que si la font est présente et installée sur le système, il me semble bien qu'il soit inutile de la déclarer dans @font-face via local, src lui reste l'alternative en ligne.

Tout à fait, sauf si l'on veut éventuellement renommer la font pour l'usage dans le CSS.
Sujet clos
Aller à