0

I am using a @font-face - as recommended, I use .eot, .woff, .ttf and .svg. It appears normally except in Firefox, where it is not used and falls back to Helvetica / sans-serif.

Normal:

normal

Firefox:

firefox

CSS:

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: 'Lato';
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot');
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot?#iefix') format('eot'), url('http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff') format('woff'), url('http://static.tumblr.com/cv6ot7o/Lxynbhzok/lato-thin.ttf') format('truetype'), url('http://static.tumblr.com/cv6ot7o/p2Anbj1jl/lato-thin.svg') format('svg');
}

h1 { 
    font-family: "Lato", "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", sans-serif;
    font-size: 4em;
     }

HTML:

<h1>title</h1>

JSFiddle

How can we fix this?

I saw some similar questions suggest using local links for fonts but I can't use it here.

GillesC
  • 10,647
  • 3
  • 40
  • 55
Peter V
  • 2,478
  • 6
  • 36
  • 54
  • That's most likely due to firefox's origin policy. http://stackoverflow.com/a/11616436/301596 – fxck Sep 07 '14 at 12:56

1 Answers1

1

If you look at the console log in Firefox, it has entries like this:

downloadable font: download failed (font-family: "Lato" style:normal weight:900 stretch:normal src index:1): bad URI or cross-site access not allowed source: http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff

So apparently the site wants to disallow remote use of their fonts.

Consider using Lato at Google fonts instead.

Indepenendly of this, it is very illogical to declare Lato Thin as having weight 900. It is declared as having weight 100. You should use <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'> and h1 { font-family: Lato; font-weight: 100 }.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • thanks- but I'm not allowed to use external resources for this project, any other ideas? – Peter V Sep 07 '14 at 13:10
  • 1
    @ValKalinic, isn’t static.tumblr.com an external resource? Anyway, you can download the font file from the Google site, process it with the Fontsquirrel `@font-face` generator, upload the resulting files onto your server, and use suitable relative links. – Jukka K. Korpela Sep 07 '14 at 13:14
  • yes, those are the ones I included in the question, static.tumblr.com is the hosting allowed and somelink.tumblr.com/ is the website url – Peter V Sep 07 '14 at 13:16
  • @ValKalinic, it is then cross-site access, since “site” in this context relates to the server name; static.tumblr.com and somelink.tumblr.com are two different servers. The previous advice still applies: use fonts hosted by a service that allows cross-site access or use fonts uploaded onto the same server as your pages. – Jukka K. Korpela Sep 07 '14 at 13:30
  • again I'm not allowed -and all other browsers have no problem with it – Peter V Sep 08 '14 at 06:45