28111 sujets

CSS et mise en forme, CSS3

[Résolu] Font face et police de remplacement

Bonjour,

J'utilise l'attribut @font-face en ayant la police sous différents formats sur mon serveur comme ceci :

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Roboto'), local('Roboto-Regular'),
		url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
		url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}


Tout fonctionne sans problème.

Mais au cas où il y aurait un problème avec la police, comme par exemple une lenteur a télécharger la font, je souhaiterais indiquer une police de remplacement comme Arial que, logiquement, presque tout le monde possède en attendant que celle déclarée dans font-face soit chargée.

Je suis presque sur d'avoir lu, il y a peu, comment faire au niveau CSS mais pas moyen de remettre la main dessus. Je viens donc vers vous pour m'aider à trouver la solution.

Je vous remercie.
Modifié par Xhanxhand (26 Dec 2019 - 15:02)
Quand tu vas appliquer ta font-family: 'Roboto'; à ton element en CSS, tu peux rajouter

font-family: Roboto, arial, etc... et il prendra dans l'ordre
Merci beaucoup pour vos réponse. Avec Google Pagespeed, j'ai vu qu'il suffisait d'ajouter "font-display: swap;" pour éviter le soucis de texte invisible.
C'est un peu plus compliqué que ça. font-display est une propriété assez technique. Mais en effet elle peut éviter l'affichage des blancs. Le comportement face aux polices lentes à charger ou introuvables est cependant assez différent d'un navigateur à l'autre.

Pour ce qui est des polices Google, la valeur de font-display peut être positionnée directement dans la balise <link>, comme Google le préconise dans les exemples qu'il fournit :


<link href="https://fonts.googleapis.com/css?family=nom-police&display=swap" rel="stylesheet">
Sujet clos
Aller à