web-dev-qa-db-fra.com

Comment réduire le CSS des polices de Google

J'ai les fichiers CSS des polices Google suivants: Fichiers CSS non miniatures: https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i,700

https://fonts.googleapis.com/css?family=Raleway:400,400i,500,600,600i,700,800

Comment puis-je les minifier?

cssfontsminify
5
Shankar

Vous ne pouvez pas, car ces fichiers CSS sont servis à partir de Google, pas à partir de votre propre domaine (ils ne peuvent pas non plus l'être selon les polices Google).

Voulez-vous vraiment économiser la bande passante de vos utilisateurs/ms: utilisez une seule requête HTTP:

https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i700|Raleway:400,400i,500,600,600i,700,800

Voulez-vous vraiment économiser la bande passante de vos utilisateurs? Utilisez moins de variations de police.

Si vous essayez de servir le fichier vous-même, rien ne garantit que Google conservera les fichiers de polices aux URL spécifiées dans les fichiers CSS que vous avez téléchargés:

https://fonts.gstatic.com/s/raleway/v11/YZaO6llzOP57DpTBv2GnyFKPGs1ZzpMvnHX-7fPOuAc.woff2

Cela ne ressemble pas à une URL fiable et stable pour moi.

6
Adam

Ce que je fais habituellement, c’est de ne copier que les polices que je vais utiliser, disons que mon site Web ne nécessite que des caractères latins, et que les polices pèsent 400 et 600 caractères, puis que je copie quelque chose comme ceci:

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

et après cela, vous pouvez le réduire avec votre autre CSS. 

1
OmarAguinaga

Selon ce message en ligne ici ( https://discourse.roots.io/t/best-way-to-use-google-fonts/455/2 ), vous ne pouvez pas charger les polices directement depuis les bons serveurs . Cependant, vous pouvez minifier le code vous-même, manuellement ou sur un site Web tel que https://cssminifier.com/ .

J'espère que ça répond à ta question.

0
Arel Sapir

De toute évidence, vous ne pouvez pas réduire le code hébergé par Google. Vous pouvez utiliser CSS Minifier . Réduisez le code CSS, puis utilisez-le comme fichier css statique. Cependant, ce fichier de police n'est pas si gros, je ne pense pas que vous ayez besoin de le minimiser. Google Dit ici , que le temps de chargement est rapide.

0
kinny94