Fuentes web de Google y error de SSL

My site is working well with Google webfonts UNTIL the user hits the SSL portion of the site.

At that point, chrome throws the partial encoding error, and my cufon menu losses it's kerning.

I'm including my webfont with this css:

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

My js console then gives me this error:

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

Any ideas how I can get google fonts to force SSL?

preguntado el 28 de julio de 12 a las 22:07

I'm experiencing this issue too. I've tested with link href="//fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css" and link href="fonts.googleapis.com/css?family=Gudea" rel="stylesheet" type="text/css" but the issue is the same -

4 Respuestas

¿Has intentado reemplazar https:// con // in the url? The request should use the correct protocol automatically.

Respondido 25 ago 12, 05:08

Simple and effective. Great answer and deserves to be accepted. - Chris

It seems that loading fonts over HTTP is no longer supported, I can only get fonts to load over HTTPS in Chrome even if the entire site is HTTP only. - LB--

Also check if any cache invalidating headers are possibly returned by the server; IExplorer doesn't cope well with it and will not show fonts: mire aquí - user1767316

locate this line on your HTML page (or template):

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

y cámbielo a esto:

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

This simple change will make your browser call the Google Font page in the applicable mode (HTTP vs HTTPS).

¡Que la disfrutes!

Respondido 16 Feb 14, 13:02

I was not able to use // in chrome v49 (non https local page).. https worked however. Google recommends using https on all these calls, and it is probably best to stick with https:// for a few reasons - Ross

Any citations for those claims? - TonyG

To load google fonts that will work in non-secure, and SSL mode, try the following in your page header - (and remove what you've got there calling a https:// inside the 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') +
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);

In my example, I'm using Droid Serif font, so swap that with yours.

Puedes leer más sobre esto aquí.

Respondido 10 Abr '13, 10:04

See @londonium's answer below for a much simpler solution which works and is valid. - Chris

I also had this error caused by a theme in WordPress. It caused slow page loading and the following error reported by development console:

Mixed Content: The page at 'https://xxxxxxx.co.uk/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css? family=Droid+Serif%3A400%2C700%2C400italic%2C700italic&ver=5.4.1'. This request has been blocked; the content must be served over HTTPS.

The culprit was Wordpress theme called "Fresh and Clean". It inherits code written in 2014 which contains 'pre-SSL' coding practices

To resolve the problem all need to do is make changes inside the following file in the theme:


Look inside for any occurences of http:// and change each one to https://

respondido 13 mar '21, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.