28112 sujets

CSS et mise en forme, CSS3

Police Roboto : système, @font-face ou Google Fonts

Pages :
(reprise du message précédent)

Bonjour,

Question tracassante :

@font-face
{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../font/roboto/mon roboto.woff2") format('woff2');
} 

body {
  font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}


Le fichier mon roboto.woff2 sera chargé dès que Roboto n'est pas la police système ?

Sur iPhone ce sera chargé même si -apple-system,BlinkMacSystemFont est disponible ?
Modifié par boteha_2 (05 Mar 2021 - 22:12)
Bonjour,

parsimonhi a écrit :
Bonjour,

Eventuellement, si tu veux vraiment conserver tes @font-face, tu mets dans la barre d'adresse de ton navigateur :
https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap

Ça te liste les instructions css appropriées.

Tu ne conserves que les parties qui t'intéressent (par exemple le cyrillic, le greek, ... ne servent probablement pas pour ton site), et éventuellement, tu remplaces les url allant chercher les polices chez google par des url allant chercher les polices sur ton site.

EDIT: et on voit au passage que https://fonts.googleapis.com envoie du woff2

Amicalement,


Je l'ai fait.

Pour info :
1) Avec Firefox je récupères du woff2 et avec IE du woff
2) Avec woff2 Google ajoute :
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
Mais cela plante le woff, du moins dans IE.
3) l'emploi de display (par exemple display: swap) dans @font-face plante le woff, du moins dans IE.

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(../font/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),
url(../font/roboto/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
/* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; */
}


De cette manière semble fonctionner en woff et woff2.

Cela revient à mettre la Google font chez soi.

Une question importante est quand même de savoir si Google accepte cette pratique.
Il est clair que le robot sait que tu as "piqué" une Google font, et cela à mon avis même si tu changes le nom du fichier.
Avez-vous une idée ?
Je vais voir si le sujet est traité dans le forum Google et si non je lance une discussion.

PS : personne n'a répondu à mon post précédent, la question est-elle trop simple (idiote ?) ?
Modifié par boteha_2 (07 Mar 2021 - 16:39)
Modérateur
Bonjour,
boteha_2 a écrit :
Le fichier mon roboto.woff2 sera chargé dès que Roboto n'est pas la police système ?

Même si Roboto est déjà installé sur la machine de l'utilisateur, roboto.woff2 sera téléchargée quand même.

Pour dire au navigateur d'utiliser la version déjà installée sur la machine de l'utilisateur au cas où ce serait le cas (et donc ne pas télécharger les .woff2 et .woff), il faut rajouter local("Roboto") au src du @font-face.
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src:
  	local("Roboto"),
  	url(../font/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),
  	url(../font/roboto/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
}

Attention, le paramètre de local() doit être le nom complet de la police ou le nom post-script. Dans le cas de Roboto, le nom qu'on utilise dans la propriété font-family et le nom complet sont tous les deux Roboto, mais dans le cas de certaines polices, le nom complet n'est pas forcément le nom qu'on utilise dans la propriété font-family.

boteha_2 a écrit :
Sur iPhone ce sera chargé même si -apple-system,BlinkMacSystemFont est disponible ?

Roboto apparaissant avant -apple-system, BlinkMacSystemFont dans les valeurs de la propriété font-family, roboto.woff2 sera téléchargée.

Et -apple-system, BlinkMacSystemFont a de grandes chances de ne servir à rien. Pour que ça serve, il faudrait que le chargement de la police Roboto échoue, ou que le navigateur ne sache pas utiliser woff2 ou woff, ou qu'un caractère n'existe pas dans Roboto mais existe dans -apple-system ou BlinkMacSystemFont. Autant dire que ça ne servira quasiment jamais (en 2021). Tu encombres ton code pour rien.

Amicalement,
Modérateur
Bonjour,
boteha_2 a écrit :
Mais cela plante le woff, du moins dans IE.
...
l'emploi de display (par exemple display: swap) dans @font-face plante le woff, du moins dans IE.

Ça n'a aucune importance, ce que fait ie, du moment qu'il affiche ton texte. Inutile de ralentir 99% des utilisateurs pour améliorer (à peine) le rendu des 1% qui ont encore ie.

boteha_2 a écrit :
Cela revient à mettre la Google font chez soi.

Une question importante est quand même de savoir si Google accepte cette pratique.

À ma connaissance, aucun problème avec Roboto. Pour une autre police, il convient de vérifier la licence de la police.

Amicalement,
Bonjour parsimonhi,

Merci de ton suivi.

Je m'y remets ce soir ou au plus tard pendant le week-end.

Autrement :

1) J'ai posé la question sur le forum Webmaster de Google.
Un expert confirme que Google s'en fout que l'on "pique" ses fontes pour les mettre en local.
Je reste méfiant.

2)
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

Cela plante IE, la question est de savoir si cela améliore vraiment les performances sur les autres navigateurs.
Par ailleurs j'ai cherché une table unicode (j'ai trouvé) et cherché à comprendre à quoi correspondent ces valeurs.
Sachant que j'utilise très peu de polices exotiques il y a moyen de réduire unicode-range si cela fait gagner en performance.
Modérateur
Pour ton soucis de droits, en téléchargeant la police il y aussi la licence qui est jointe et doit toujours être avec :
extrait
a écrit :
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:

(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and

(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and

(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and

(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.

You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.


En gros, tu fais ce que tu veut avec, la modifier ,la passer à la moulinette, ... tant que tu gardes la licence avec la police(font) . Tu peut la redistribuer et même la modifier, toujours avec sa licence au minimum. Si tu est toujours inquiet, ajoute un lien depuis ton site vers cette licence pour lever toute ambiguïté. Si tu veut en faire une version OTF pour un e-book par exemple , tu peut.

J'espere que cela levera tes derniers doutes Smiley cligne
Cdt,
Modérateur
Bonjour

boteha_2 a écrit :
Je reste méfiant.

Misère ! Smiley mur

boteha_2 a écrit :
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

Cela plante IE, la question est de savoir si cela améliore vraiment les performances sur les autres navigateurs.

Excellente nouvelle que ça plante ie. Mais quand tu dis que ça plante, ça fait quoi ? ie ne veut plus rien faire ensuite ? Ou bien c'est juste que la page ne s'affiche pas avec Roboto ?

boteha_2 a écrit :
Par ailleurs j'ai cherché une table unicode (j'ai trouvé) et cherché à comprendre à quoi correspondent ces valeurs.

Sachant que j'utilise très peu de polices exotiques il y a moyen de réduire unicode-range si cela fait gagner en performance.

Le unicode range sert à éviter de chercher dans la police des caractères qui ne s'y trouvent pas. En d'autres termes, le unicode-range spécifié par le @font-face du site google font pour une police donnée liste les caractères effectivement définis dans le fichier de la police. C'est donc complètement inutile de le modifier. Le fichier téléchargé quoiqu'il arrive fera la même taille.

S'il y a dans la page au moins un caractère dont l'unicode est dans le unicode-range, le fichier est téléchargé. Sinon, il ne l'est pas. Le unicode-range permet donc au navigateur de savoir a priori si ça sert à quelque chose de télécharger le fichier de la police au vu du contenu de la page.

Note que si dans ta page, tous tes caractères sont dans Roboto, et vu que tous les caractères de Roboto sont dans un seul fichier, unicode-range ne sert probablement à rien dans ton cas. Par contre, si tu utilisais une police pour le japonais par exemple, les caractères seraient répartis dans plusieurs fichiers, plus d'une centaine pour "Noto Sans CJK JP", et du coup le unicode-range serait très utile parce que le navigateur n'aura à télécharger que quelques fichiers parmi cette centaine selon ce qu'il y a dans la page.

Il ne faut pas confondre ce que fait unicode-range avec une option du site de google, qui, via le paramètre text, permet de ne télécharger qu'un fichier réduit. Par exemple, la ligne HTML suivante télécharge un fichier ne contenant que les caractères de "Bonjour" de la police Roboto. Si tu connais a priori quels sont les caractères concernés dans ta page et qu'il n'y en a pas beaucoup, ça peut avoir son intérêt.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap&text=Bonjour" rel="stylesheet">


Amicalement,
Bonjour parsimonhi,

parsimonhi a écrit :
Excellente nouvelle que ça plante ie. Mais quand tu dis que ça plante, ça fait quoi ? ie ne veut plus rien faire ensuite ? Ou bien c'est juste que la page ne s'affiche pas avec Roboto ?


C'est juste la page qui ne s'affiche pas en Robote, il me semble que cela sort en "Trebuchet MS" ou Arial qui sont mes polices alternatives sur grand écran.

parsimonhi a écrit :
Par exemple, la ligne HTML suivante télécharge un fichier ne contenant que les caractères de "Bonjour" de la police Roboto. Si tu connais a priori quels sont les caractères concernés dans ta page et qu'il n'y en a pas beaucoup, ça peut avoir son intérêt.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap&text=Bonjour" rel="stylesheet">



Mon site est en français avec bien sûr quelques caractères spéciaux mais pas beaucoup, souvent caractères spéciaux en contenu généré.
Quand on voit le nombre de caractères dans une fonte cela me semble une bonne piste d'optimisation.

Tout le reste est très intéressant, j'y reviens plus tard
Modérateur
Bonjour,

boteha_2 a écrit :
C'est juste la page qui ne s'affiche pas en Roboto, il me semble que cela sort en "Trebuchet MS" ou Arial qui sont mes polices alternatives sur grand écran.

Alors ce n'est pas la peine d'en faire un fromage.

Tu laisses ie se planter. Les utilisateurs ne s'en apercevront même pas.

Amicalement,
Bonjour parsimonhi,


parsimonhi a écrit :
Alors ce n'est pas la peine d'en faire un fromage.
Tu laisses ie se planter. Les utilisateurs ne s'en apercevront même pas.


C'est vrai que c'est tentant même si j'essaye de toujours rester compatible IE.
Bonjour,

J'ai essayé le paramètre text dans le link vers Google Fonts.
text=!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâäåæçèéêëìíîïðñòóôõö÷øùúûüýþ

Le fichier récupéré est de même taille que celui sans text, donc j'ai abandonné.

Finalement j'ai opté pour un truc intermédiaire.

body {font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, Helvetica, "Trebuchet MS", sans-serif}


Les iphone auront leur police système.
Les Mac je ne sais pas.
Et tout le reste sera sur Roboto.

Roboto local pour Android et chargé depuis mon site pour les autres.

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2'),
url(../font/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
font-display: swap
/* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; */
}

@font-face
{
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2'),
url(../font/KFOkCnqEu92Fr1Mu51xIIzQ.woff) format('woff');
font-display: swap
}

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto'),
url(../font/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2'),
url(../font/KFOlCnqEu92Fr1MmEU9fBBc-.woff) format('woff');
font-display: swap
}

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto'),
url(../font/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2'),
url(../font/KFOlCnqEu92Fr1MmWUlfBBc-.woff) format('woff');
font-display: swap
}


Les fichiers .woff2 font de 16 à 17 Ko et .woff de 20 à 22 Ko.

C'est peut-être optimisable avec Font-Squirrel mais cela en vaut-il le peine ?

Qu'en pensez-vous ?
Modifié par boteha_2 (14 Mar 2021 - 17:18)
Bonjour,

Pour information j'ai testé sur Safari sur MacBook en WiFi.

@font-face
{
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'),
url(../font/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
font-display: swap
}


body {font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, Helvetica, "Trebuchet MS", sans-serif}


et

body {font-family: Roboto, -apple-system, BlinkMacSystemFont, Arial, Helvetica, "Trebuchet MS", sans-serif}


Dans le premier cas la police Mac s'affiche sans attendre.

Dans le deuxième cas le traitement FOUT est visible.
Affichage en police Apple puis quasi-immédiatement passage en Roboto.

1) Je croyais que le comportement naturel de Safari était FOIT.
"font-display : swap" change ce comportement, c'est fait pour mais il y a une petite latence.

2) Roboto semble n'avoir pas été mis en cache par Safari.
Ne doit-il mettre Roboto en cache après le premier appel @font-face ?
Et donc afficher en Roboto sans passer par la police système ?
Modifié par boteha_2 (18 Mar 2021 - 22:07)
Bonjour,

Si je n'ai pas encore coché Résolu c'est que je pense qu'il serait possible d'optimiser les fichiers de polices avec Font squirrel ou Web font optimizer.

Cependant cette approche que j'ai mise en œuvre me semble bonne :

body {font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif}


Tout ce qui est Apple se débrouille avec sa police système.
Et le reste du monde est en Roboto, local ou chargé par @font-face.
Bonjour parsimonhi,

J'espère ne pas être le seul à trouver ces détours très intéressants et pédagogiques pour une bonne utilisation de @font-face.
Pages :
Sujet clos
Aller à