Accélérer le chargement des fontes et feuilles CSS

(reprise du message précédent)

Bonjour,

Il y a aussi l'article de Raphaël : optimisez vos polices Web

Je relève ce passage :

Raphaël a écrit :
À ce propos, sachez que de plus en plus de sites web (Booking, Medium, WordPress, GitHub, Alsacréations, entre autre) ont cessé de tenter d'imposer une police identique à tous leurs visiteurs, même lorsqu'il s'agit d'une police classique : plutôt que de proposer Arial, Verdana ou Times, ils ont opté pour une police variable adaptée à chaque système d'exploitation :

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

Cette famille de fontes, appelée "System Font Stack" propose à chaque utilisateur sa police habituelle sur son OS : sur Windows ce sera "Segoe UI" ou "Tahoma" pour les plus anciens, sur Android ce sera "Roboto", etc. Ainsi vos visiteurs ne seront pas surpris par vos choix typographiques et se sentiront comme chez eux dans vos pages de contenus.

Le site Booking.com explique son choix (en anglais) : "Implementing system fonts on Booking.com?—?A lesson learned.".

Je pense tester cette approche, si j'ai bien compris il n'y aurait plus de police à précharger.
Je suppose que la liste de polices system est à jour.
Modifié par boteha_2 (15 Sep 2025 - 17:46)

boteha_2 a écrit :
Je pense tester cette approche, si j'ai bien compris il n'y aurait plus de police à précharger.

Oui c'est tout à fait ça : aucune police ne sera chargée, le navigateur choisit la police liée à l'OS

boteha_2 a écrit :
Je suppose que la liste de polices system est à jour.

C'est encore mieux que tu ne le crois, il existe à présent une valeur standard pour définir cette liste de polices système : `system-ui`.

Tu peux donc écrire :

body {font-family: system-ui, sans-serif;}

L'option "sans-serif" sert ici d'alternative pour les 3-4% de navigateurs restants qui ne supportent pas encore "system-ui".

(J'ai mis à jour l'article en conséquence)
Modifié par Raphael (16 Sep 2025 - 10:48)

Bonjour,

body {font-family: system-ui, sans-serif;}

Ah oui, trop bien !
Je fais quelques tests et reviens vers vous.