Fuentes web de Google y error SSL
webfonts (3)
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?
¿Ha intentado reemplazar https:// con // en la url? La solicitud debe utilizar el protocolo correcto automáticamente.
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.
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!