Firefox not Rendering Font from Google Font API

StackOverflow https://stackoverflow.com/questions/12207690

Question

I have uploaded a landing page that our company has contracted out, and Firefox does not render the Lato font, instead falling back to something further down the deck.

We have been given the following style sheet from fonts.googleapis.com.

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}

There is no problem in IE, Chrome, Opera, and Safari. Is there anything peculiar about Firefox that it would not be able to display the font?

Was it helpful?

Solution

I figured it out. I am using the NoScript add-on. It is protecting me from the threat of XSS attack from google, even with the entire site allowed. :D

I will research if there is a setting in noscript that will allow using the fonts, and post my findings here.

It will not likely cause problems for our customers. If they are using NoScript themselves, they will likely not be the sort to be bothered about the font on the landing page.

EDIT:

I was able to get this working. Under NoScript > Options, I selected the Advanced tab and the XSS tab. I then added the following exception:

^https://themes\.googleusercontent.com/static/fonts/lato/v6/[a-zA-Z\-_0-9]*\.woff$

It is more specific than it needs to be. One could trim off sub-folders as needed to allow more of the site. The following, for example, should enable most fonts:

^https://themes\.googleusercontent.com/static/fonts/[/a-zA-Z\-_0-9]*\.woff$

OTHER TIPS

Are you running your tests locally, on a dev server, or something along those lines? Check Firebug's console and you should be able to find errors on the download, like a 404, or permissions, or something similar.

If using Noscript in Firefox: Open the NoScript Options, go to the Embeddings tab and uncheck: Forbid @font-face

As described in: https://developers.google.com/fonts/docs/troubleshooting

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top