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

Bonjour,

J'ai découvert ce tuto de Raphaël. sur l'optimisation des polices Web.

En cas chargement conditionnel avec mediaqueries :

@font-face {
font-family: roboto;
src:
url("roboto.woff2") format("woff2"),
url("roboto.woff") format("woff");
}

@media screen and (max-width: 768px)
{
body {
font-family: Roboto, -apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
}

Sur petit écran Androïd, la police Roboto est celle du système et la police roboto n'est pas chargée, d'après ce que j'ai compris.

Sur PC sous Windows que se passe-t-il quand on diminue la taille de la fenêtre ?

Je vais essayer.
Modifié par boteha_2 (28 Feb 2021 - 15:08)

Bonjour,

Ce n'est pas "-Roboto", mais "Roboto".

Il n'y a pas de raison qu'il y ait un comportement différent sous PC sous windows.

Amicalement,

Bonjour parsimonhi,

parsimonhi a écrit :
Ce n'est pas "-Roboto", mais "Roboto".,

Excuse-moi mais je ne comprend pas...

Mon premier boulot va être de charger Roboto sur mon serveur, pour l'instant je vais le chercher chez Google Fonts.

J'espère que l'opération n'est pas trop galère, je vous tiens informés.

Bonjour,

boteha_2 a écrit :
Excuse-moi mais je ne comprend pas...

Il y a un tiret en trop devant Roboto dans ton code.

Amicalement,

Bonjour parsimonhi,

C'est noté.

Merci.

Bonjour,

Je suis allé sur GitHub et j'ai téléchargé 6 fichiers :

roboto-bold.woff
roboto-bold.woff2
roboto-italic.woff
roboto-italic.woff2
roboto-regular.woff
roboto-regular.woff2

Les 6 fichiers sont mis dans un dossier font Dans www

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

@media screen and (min-width: 769px)
{
@font-face
{
font-family: roboto;
src :
url ("../font/roboto-regular.woff2") format ("woff2"),
url ("../font/roboto-regular.woff") format ("woff"),
url ("../font/roboto-italic.woff2") format ("woff2"),
url ("../font/roboto-italic.woff") format ("woff"),
url ("../font/roboto-bold.woff2") format ("woff2"),
url ("../font/roboto-bold.woff") format ("woff");
}

body {font-family: roboto, arial, helvetica, verdana, sans-serif}
}

Cela ne marche pas du tout.
Je veux dire que sur grand écran je me prends la police Arial alors que Roboto est supposé être disponible.

Voyez-vous où est l'erreur ?
Modifié par boteha_2 (28 Feb 2021 - 16:13)

Bonjour,

Déjà, je ne mettrais pas le @font-face dans le @media. Même si ça pouvait marcher partout, ce que je n'ai pas vérifié, ce @font-face est mal placé vu qu'on utilise roboto aussi en dehors de ce @media.

Ensuite, pour tester, je ne mettrais dans le font-family que robot et sans-serif.

body {font-family: roboto,sans-serif}

Il sera bien temps une fois cela marchera de remettre les autres machins qui soit dit en passant ne servent à rien puisqu'en théorie, roboto sera forcément disponible du fait du @font-face.

Ensuite, je testerais sans le @media et avec une page de test toute simple pourvoir si le @font-face marche.

EDIT: et je ne vois pas pourquoi tu ne te contentes pas de la police .ttf qui est téléchargeable à https://fonts.google.com/
EDIT2: et retire les espaces entre url et (, et entre format et (

Amicalement,
Modifié par parsimonhi (02 Mar 2021 - 18:02)

Bonjour,

J'ai compris cela marche mieux comme cela :

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

@font-face
{
font-family: 'Roboto';
font-style: italic;
src: url(../font/roboto/roboto-italic.woff2) format('woff2');
}

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

Bizarrement tout est en gras et le texte est plus petit qu'avec le Roboto de Google Fonts que j'utilise normalement.

Du coup je me suis permis de charger sur mon serveur de test le Roboto de Google Fonts, je ne sais pas si c'est autorisé, et de reprendre le même code css que Google, à savoir par exemple pour le font-style: normal :

@font-face
{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../font/roboto/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  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;
}

Je me demande si dans le css il est possible de vérifier que le roboto par @font-face est bien chargé et alors de désactiver la déclaration pour les petits écrans.

Bonjour parsimonhi,

Merci de ton suivi.

Ok pour tes remarques.

parsimonhi a écrit :
EDIT: et je ne vois pas pourquoi tu ne te contentes pas de la police .ttf qui est téléchargeable à https://fonts.google.com/

J'ai lu que .ttf était un format obsolète remplacé par Woff.
Tu veux dire prendre la police ttf chez Google puis la travailler avec avec font-squirrel ?

Bonjour,

boteha_2 a écrit :
J'ai lu que .ttf était un format obsolète remplacé par Woff.
Tu veux dire prendre la police ttf chez Google puis la travailler avec avec font-squirrel ?

Ce n'est pas obsolète. C'est juste que woff et woff2 sont plus compacts que ttf.

Et je veux dire qu'il n'est pas clair que le chargement des polices se fassent plus rapidement depuis ton site par rapport au site de google.

- ton site peut être plus lent,
- il y a plus de chance que la police soit en cache quelque part si on va la chercher sur le site de google,
- derrière la balise <link>, google fait des optimisations qui peuvent être plus appropriées que ce que tu fais à la main (surtout quand tu ne maitrises pas),
- il se peut que google envoie du woff ou du woff2 à l'avenir pour la police roboto (si ça se trouve, c'est déjà le cas quand on utilise la balise <link>, j'ai la flemme de vérifier).

Personnellement, j'arrête de m'enquiquiner avec ces histoires de @font-face (que je trouve tout à fait détestable) et j'utilise la balise <link> quand c'est possible (i.e. quand la police est disponible sur https://fonts.google.com/). Par exemple :

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

C'est peut-être un peu plus lent, mais bien plus simple.

Amicalement,

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,
Modifié par parsimonhi (03 Mar 2021 - 10:54)

@parsimonhi
"Et je veux dire qu'il n'est pas clair que le chargement des polices se fassent plus rapidement depuis ton site par rapport au site de Google."
-------
C'est en contradiction avec l'article suivant sur les Partis Tiers et les messages qui vont avec : https://www.alsacreations.com/article/lire/1695-partis-tiers-impacts-sur-la-vitesse-de-vos-sites.html
Y-a-t-il un avis tranché sur la question, dans le développement ?
-------
"Déjà, je ne mettrais pas le @font-face dans le @media..."
-------
Je ne savais pas que ce n'était par recommandé. Quels sont les effets de bord d'utiliser les @media avec @font-face ? @font-face, je l'ai enlevé pour la version mobiles avec les @media. Et pour le moment, ça fonctionne plutôt bien. Le fait est que charger 24 k de fontes pour quelques titres et sous-titres en mobile ne valait pas le coup. J'ai gagné en vitesse avec ce procédé. En mobile, chaque centaine de millisecondes compte.

Merci, je voudrais avoir des avis sur la question. @font-face est-il à abandonner ?

Bonjour,

Bongota a écrit :
@parsimonhi
"Et je veux dire qu'il n'est pas clair que le chargement des polices se fassent plus rapidement depuis ton site par rapport au site de Google."
-------
C'est en contradiction avec l'article suivant sur les Partis Tiers et les messages qui vont avec : https://www.alsacreations.com/article/lire/1695-partis-tiers-impacts-sur-la-vitesse-de-vos-sites.html
Y-a-t-il un avis tranché sur la question, dans le développement ?

On parle ici d'une ressource très particulière utilisée par des millions de sites d'une part, et ça dépend de ton hébergement d'autre part : si le serveur se traine, ça ira éventuellement moins vite si les ressources sont sur ton site. Mais si ton serveur est une bête de course, ça peut aller plus vite. Reste la question des caches : en 2021, on ne peut plus rien prévoir en la matière tellement il y a d'optimisations un peu partout.

Bongota a écrit :
-------
"Déjà, je ne mettrais pas le @font-face dans le @media..."
-------
Je ne savais pas que ce n'était par recommandé. Quels sont les effets de bord d'utiliser les @media avec @font-face ? @font-face, je l'ai enlevé pour la version mobiles avec les @media. Et pour le moment, ça fonctionne plutôt bien. Le fait est que charger 24 k de fontes pour quelques titres et sous-titres en mobile ne valait pas le coup. J'ai gagné en vitesse avec ce procédé. En mobile, chaque centaine de millisecondes compte.

À une époque, ça ne marchait pas partout. Mais admettons qu'en 2021 ça ne soit plus un problème (depuis ma 1re réponse, j'ai cherché un peu, et il semble que ce soit bien supporté désormais, alors que ce n'était pas le cas il y a 10 ans). Ceci étant, ça ne retire rien au fait que tu utilisais roboto en dehors du @media.

Bongota a écrit :
Merci, je voudrais avoir des avis sur la question. @font-face est-il à abandonner ?

Ce n'est pas à abandonner, mais vu le mal que t'as à le faire marcher, peut-être que ça vaut mieux.

Et à ta place, même si je conservais le @font-face, je laisserais tomber woff aussi, et je ne garderais que woff2, vu que tu te passes déjà de la police sur écran étroit.

Amicalement,

PS: je me demande ce qu'il se passe quand un utilisateur s'amuse à changer la largeur de sa fenêtre sur un ordinateur de bureau.

Merci pour les précisions, on dirait que tu as répondu en même temps aux deux personnes . Ou plutôt que tu les as mélangées.

Bonjour,

Merci de votre suivi.

Il y a plusieurs questions dans le sujet.

1) D'abord, pour les écrans étroits, quel est le gain d'abandonner le chargement de quelques fichiers assez minuscules (4 fichiers à 15 K dans mon cas) ?
Bontonta dit que c'est important.
Dans ce cas je ne vois pas d'autre solution que de laisser les polices systèmes pour les petits écrans avec media queries, comme expliqué dans l'article de Raphaël.

Accessoirement les font-weigth exprimées en chiffres sont-elles bien comprises par les polices systèmes ?
font-weigth : 500
Pas de souci pour le Roboto d'Androïd mais je n'ai pas pu essayer d'autres systèmes.

Sur un grand écran quelles sont les polices systèmes pour Windows ou Mac OS ?

Une chose est sûre Arial est moche et je veux Roboto comme sans-serif, à moins que l'appel à la police système puisse être joli.

2) Si on charge des polices, faut-il mieux utiliser @font-face ou Google Fonts ?
Avec en gros 4 fichiers de 15 K à charger

C'est vrai que Google Fonts fait pas mal de choses, par exemple la compatibilité avec les vieilles versions d'IE, mais d'après ce que j'ai lu c'est aussi possible avec @font-face.

Faut-il liquider le partie tiers quitte à perdre un peu en performance ?

Voici ce que j'ai mis sur un site. C'était un conseil d'Alsacreations, je crois, mais j'ai perdu le lien, je ne le retrouve plus :

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

en plus de @font-face, bien sûr.
Éviter quatre fichiers à 15 k, ce n'est effectivement pas beaucoup, mais il faut le voir comme faisant partie d'autres gains (mise en cache efficace, ressources non bloquantes, etc.) Le tout additionné commence à compter en version mobile.
Au final, c'est toi qui voit où est la préférence. Si tout est ok ailleurs, tu peux charger les polices spéciales. C'est sûr que sur un site WordPress comme on en a vu un ici il y a peu (8 secondes de chargement, une montagne de scripts bloquant sur le html), 24 k de fontes spéciales ne pèse pas lourd.

Bonjour,

Bongota a écrit :
Merci pour les précisions, on dirait que tu as répondu en même temps aux deux personnes . Ou plutôt que tu les as mélangées.

En effet, j'ai mélangé. Mea culpa.

boteha_2 a écrit :
D'abord, pour les écrans étroits, quel est le gain d'abandonner le chargement de quelques fichiers assez minuscules (4 fichiers à 15 K dans mon cas) ?
Bontonta dit que c'est important.
Dans ce cas je ne vois pas d'autre solution que de laisser les polices systèmes pour les petits écrans avec media queries, comme expliqué dans l'article de Raphaël.

C'est relatif. Même si tu mets du Roboto partout, on devrait survivre !

boteha_2 a écrit :
Accessoirement les font-weigth exprimées en chiffres sont-elles bien comprises par les polices systèmes ?
font-weigth : 500
Pas de souci pour le Roboto d'Androïd mais je n'ai pas pu essayer d'autres systèmes.

C'est le navigateur qui se débrouille avec ça.

boteha_2 a écrit :
Sur un grand écran quelles sont les polices systèmes pour Windows ou Mac OS ?

Ce ne sont pas des "polices systèmes" qui seront affichées, mais des "polices par défaut". Ces polices par défaut dépendent du navigateur utilisé (tous les navigateurs ne sont pas configurés pareil). Et l'utilisateur peut lui aussi changer ces polices par défaut.

En résumé, ça peut être n'importe quelle police.

boteha_2 a écrit :
Si on charge des polices, faut-il mieux utiliser @font-face ou Google Fonts ?
Avec en gros 4 fichiers de 15 K à charger

Il n'y a pas de mieux ou moins bien. Plus le temps passe, plus l'ensemble du réseaux et des machines deviennent efficaces, et moins c'est important de se poser cette question avec des polices comme Roboto. Et encore une fois, ça dépend de ton serveur et des caches.

boteha_2 a écrit :
C'est vrai que Google Fonts fait pas mal de choses, par exemple la compatibilité avec les vieilles versions d'IE, mais d'après ce que j'ai lu c'est aussi possible avec @font-face.

Les google fonts sont affichées au final par des @font-face de toute façon.

boteha_2 a écrit :
Faut-il liquider le partie tiers quitte à perdre un peu en performance ?

Pour les ressources tierces partie, s'il s'agit juste d'une question de performance, la réponse est la même que pour ta question plus haut concernant @font-face versus Google Fonts. En résumé, "ça dépend".

Par contre, il faut souligner que la tendance générale est d'éviter le chargement de ressources tierces partie pour des raisons de politique sécurité (navigateurs de plus en plus restrictifs, éventuelle utilisation de Content Securtity Policy, etc.). Mais bon, pas de raison de psychoter pour autant. Le web ne va pas s'écrouler parce qu'on utilise une Google font.

Amicalement,

Bonjour,

Merci de votre suivi.

Je vais travailler là-dessus pendant le week-end.

Je vous tiens informé.

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)