Fuentes web de Google y error SSL

webfonts

Question

Mi sitio funciona bien con las fuentes web de Google HASTA QUE el usuario acceda a la parte SSL del sitio.

En ese punto, Chrome arroja el error de codificación parcial , y mi menú de pérdida pierde el kerning.

Estoy incluyendo mi webfont con este css:

@font-face {
src: local(''Lusitana''), url(https://themes.googleusercontent.com/static/fonts/lusitana
/v1/tAIvAkRzqMJf8Y4fM1R7PXYhjbSpvc47ee6xR_80Hnw.woff) format(''woff'');
}

Mi consola js entonces me da este error:

[bloqueado] La página en https://domain.com/ecommerce.php corría contenido inseguro desde http://fonts.googleapis.com/css?family=Lusitana:regular,700&subset=latin .

¿Alguna idea de cómo puedo obtener las fuentes de Google para forzar SSL?

Answer 1

¿Ha intentado reemplazar https:// con // en la url? La solicitud debe utilizar el protocolo correcto automáticamente.

Answer 2

Para cargar fuentes de Google que funcionarán en modo no seguro y SSL, intente lo siguiente en el encabezado de su página (y elimine lo que haya llamado a https: // dentro del CSS):

<script type="text/javascript">
  WebFontConfig = { google: { families: [ ''Droid+Serif::latin'' ] } };
  (function() {
  var wf = document.createElement(''script'');
  wf.src = (''https:'' == document.location.protocol ? ''https'' : ''http'') +
    ''://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'';
  wf.type = ''text/javascript'';
  wf.async = ''true'';
  var s = document.getElementsByTagName(''script'')[0];
  s.parentNode.insertBefore(wf, s);
})();
</script>

En mi ejemplo, estoy usando la fuente Droid Serif, así que cámbiala con la tuya.

Puedes leer más sobre esto aquí.

Answer 3

localice esta línea en su página HTML (o plantilla):

<link href=''http://fonts.googleapis.com/css?family=Dosis:400,700'' rel=''stylesheet'' type=''text/css''>

y cambiarlo a esto:

 <link href=''//fonts.googleapis.com/css?family=Dosis:400,700'' rel=''stylesheet'' type=''text/css''>

Este simple cambio hará que su navegador llame a la página de Google Font en el modo aplicable (HTTP vs HTTPS).

¡Disfrutar!