28172 sujets

CSS et mise en forme, CSS3

Comment utiliser display: swap; ?

Bonjour,

Depuis mon site, j'ai utilisé des polices Google mais j'ai ajouté également un dossier de police l'Helvetica en l'appelant depuis ma page d'en-tête :
<link rel="stylesheet" href="https://www.monsite.fr/wp-content/webfont/stylesheet.css" type="text/css" charset="utf-8" />


Dans Page speed, il semble que je doivent ajouter une police de substitution pour cette police importée durant l'affichage de mes pages afin d'éviter un éventuel écran blanc.

J'ai regardé quelques tutos mais je ne comprends pas exactement quoi et où le placer:
- ce que je dois intégrer en tête de ma feuille de style (ex : @import url(...) ?)
- ce que je dois ajouter dans mes classes utilisant Helvetica, par exemple pour le titre :
.montitre {
  font-family: 'helveticabold' !important;
  font-size: 32px !important;
}


Si pour ce titre, je souhaite le substituer provisoirement par du OpenSans, faut-il ajouter
@font-face {
 font-family: "Open Sans";
 src: url("https://www.monsite.fr/wp-content/webfont//OpenSans-Regular-webfont.woff2") format("woff2"),
        url("https://www.monsite.fr/wp-content/webfont//OpenSans-Regular-webfont.woff") format("woff");
font-display: swap;
}


...et si oui :
- dois-je ajouter mes polices OpenSans dans mon dossier "Webfont" ?
- le fait que ce soit une police Google permettra le téléchargement de cette police de substitution
- comment appliquer les différences de styles à chacune de mes classes ?

...bon après, si j'avais un seul exemple complet QQ part, ce serait la fin de ma torture Smiley rolleyes
Modifié par goudurisc (29 Aug 2021 - 16:08)
Ajoute un ´sans-serif´ à la liste des polices utilisables et ça devrait être bon. 

.montitre {
  font-family: 'helveticabold', sans-serif


(Mais du coup le !important n'a plus lieu d'être.)
mreci pour ton retour mais si je comprends bien, il suffit que je rajoute juste dans mon mes classe "sans serif" pour que cette police permette le préchargement ?

...Et sans ajout 
@font-face {...}
?
Smiley eek
D'après moi Page Speed te demande juste de proposer une police qui ne soit pas à télécharger (police système) le temps que ta police se charge.
Sans-serif est la police bâton systeme par défaut de ton navigateur et n'a pas besoin d'être chargée.
Comme ça le navigateur sait quelle police déjà existante utiliser le temps que l'autre se charge.
En fait, j'avais bien intégré le principe et la demande mais c'était plutôt pour la mise en pratique.

De nombreux tutos évoquent la mise en place d'un font-display: swap; et cette direction que j'avais explorée. Mais du coup, j'en ai déduit que je devais gérer les polices de substitution provisoires ( ou système) comme mes polices importées (hors système), soit les intégrer au format .woff et .woff2 dans un dossier et appelé depuis l'entête.

Mais en l'état, je m'en suis tenu à ton simple conseil (encore merci !), qui semble finalement assez logique, d'ajouter une police systeme en + de la police importée soit
font-family: 'helveticabold', 'sans-serif';

au lieu de 
font-family: 'helveticabold';

Après, je n'ai pas encore bien compris si pageSpeed s'en contentait...
Bon ben, Pages speed ne s'en contente pas...

Du coup si je prévois (à titre d'exemple Worpdpress) le Roboto en police de préchargement depuis un dossier "webfont" où se trouve cette police :

Dans mon header :
<link rel="preload" as="font" href="/wp-content/themes/webfont/Roboto-Regular-webfont.woff » crossorigin>
<link rel="preload" as="font" href="/wp-content/themes/webfont/Roboto-Regular-webfont.woff2 » crossorigin>


Et pour mon CSS
@font-face {
 font-family: "Roboto";
font-weight: 500;
 src: url("/wp-content/webfont/Roboto-Regular-webfont.woff2") format("woff"),
        url("/wp-content/webfont/Roboto-Regular-webfont.woff") format("woff2 »);
 font-display: swap;
}


Est-ce que cette formule est cohérente, si on considère que le Roboto de Google est une police qui peut remplir le rôle de police de préchargement...
Il dit quoi exactement Page Speed ?

(Elle est en ligne à quelle adresse ta page ?)
Modifié par kerlutinoec (31 Aug 2021 - 00:28)
Ok, merci pour le sans-serif, même si ça ne règle pas le pb.

Je crois quand même que je vais devoir trouver la solution avec font-display: swap;

Je joins le résultat pagespeed concernant l'Helvetica condensed qui est importée.

Noter que dans le CSS, j'ai bien indiqué :
  font-family: 'helvetica_neue_ltcondensed', sans-serif;


Pour le lien, désolé, je ne peux pas l'indiquer. Cela dit, j'ai le même pb sur mon site avec une typo importée
Modifié par goudurisc (31 Aug 2021 - 22:40)
Oui, le code est lourd car il y a aussi un metteur en page WpBakery.

Et effectivement, pas de font-display: swap puisque depuis le début, je ne vois pas comment l'installer correctement. Smiley rolleyes
Bein dans @font-face comme tu l'as fait précédemment. Après, si associé au sans-serif, Google fait toujours la gueule je ne vois pas quoi faire de plus. Peut être scruter le code à la recherche d'autres font-family qui aurait le même problème.
Oui, je pensais que ce serait plus simple..
Merci beaucoup pour ton aide, je vais creuser encore un peu
Bonne fin de soirée !
Sujet clos
Aller à