web-dev-qa-db-fra.com

Google Web Fonts sur les pages HTTPS sur Chrome

Je travaille sur un projet de commerce électronique. Certaines parties du site sont HTTP par défaut. D'autres, comme la page de paiement, sont par défaut HTTPS. Sur les pages HTTPS, je reçois ce message sur la console sur Chrome:

[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=PT+Sans. 
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700.
[blocked] The page at https://store-ws3q9h.mybigcommerce.com/checkout.php?tk=c99fa39e007db6376dcddaac68695c22 ran insecure content from http://fonts.googleapis.com/css?family=Patua+One.

Les polices sont liées sur la tête du document de cette manière:

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

Il semble correct sur les autres navigateurs que j'ai testés jusqu'à présent.

fontshttps
55
Jack Pilowsky

Créer une URL agnostique de schéma

Changement http://fonts.google... à //fonts.google...

Jeter le http: ou https: de face, le navigateur utilisera le schéma que vous utilisez actuellement sur le site.

Vous pouvez demander des ressources en utilisant https à partir de http, mais pas l'inverse. Une alternative à la solution ci-dessus (et probablement la meilleure pratique) est de toujours utiliser https s'il est disponible (ce qui doit être le cas si vous utilisez ce style de lien, sinon cela ne sert à rien de toute façon).

115
Lee

Supprimez le protocole de votre URL et laissez le navigateur le déterminer:

<link href="//fonts.googleapis.com/css?family=PT+Sans" ...

Si votre page est HTTPS, la police sera chargée à partir de l'URL HTTPS. Si la page est HTTP, elle sera chargée à partir de l'URL HTTP.

29
Blender