CSS : comment appliquer une autre font à certains caractères ?
Je travaille sur un projet de plusieurs centaines de pages avec beaucoup d’endroits où le numérique est là et peut être combiné à des lettres.
L’équipe design m’a demandé si on pouvait mettre une typo différente pour les chiffres. J’ai d’abord proposé le font-variant-numeric qui peut permettre de les gérer avec du tabular-num. Mais l’espacement n’est pas forcément idéal avec la font utilisée.
J’ai continué de creuser et j’ai trouvé comment utiliser une font spécifique uniquement pour certains caractères. J’ai fait un Codepen pour partager ;-) Comme indiqué dedans, il faudra s’y prendre autrement si vous passez par une font que vous appelez chez Google.
PS : j’ai mis le Arial Black en font pour les chiffres et je m’aperçois qu’on ne verra pas forcément la différence sur mobile (ça ne doit pas être dans les font déjà enregistrées sur les mobiles) mais sur un ordi, vous devriez voir
