CODEWITHSUNDEEP
htmlcssgoogle-font-api
nsilva
nsilva

Reputation: 5612

Google Font not rendering correctly in Firefox

I'm using a google web font, Titillium Web, on my website . It renders perfectly in Google Chrome, IE, Opera and Safari but in Firefox the text looks horrible.

Google Font Link:

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>

HTML :

<p id="main-top-text" class="txt-style">WELCOME TO <span class="site-colour">NATHAN DA SILVA,</span></p>

<p id="main-bottom-text" class="txt-style">ENJOY YOUR STAY.</p>

CSS :

.txt-style {
    font-family: 'Titillium Web', sans-serif;
    font-size: 60px;    
    line-height: 70px;
    color: #666666;
    text-align: center;
}

You can see what it looks like here: http://www.nathandasilva.co.uk/v3

I don't suppose anyone knows of any fix to make this look better in Firefox?

Upvotes: 5

Views: 9927

Answers (6)

rogerdpack
rogerdpack

Reputation: 66741

I fixed mine (also broken in Safari) by changing the http to https (guess google themselves changed how they host it). Not sure why a browser would care about whether stylesheets come from https versus http but it did clear up the problem.

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

to

<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>

Upvotes: 0

Aidan
Aidan

Reputation: 313

I had problems with all Google web fonts (particularly Roboto) and found that I needed to force Direct2d acceleration ON to fix it. My graphics card is an Intel HD4000.

Posting the solution that worked for me, in case it's relevant to you or another reader:

  1. Go to about:config
  2. Find gfx.direct2d.force-enabled
  3. Set to True and restart Firefox

Upvotes: 1

Matty J
Matty J

Reputation: 3156

Evidently Firefox by default blocks fonts from "cross-sites" to prevent XSS attacks.

You can tell in Firebug whether the fonts have loaded or not, as they will appear 'grey' in the style tab (when you inspect the HTML element).

Also, try checking in Firefox's built-in Developer Console (Menu > Web Developer > Web Console) and look for errors loading the font (Firebug doesn't seem to report these). This will help you identify where the problem is.

To solve the problem you can configure your site to accept external fonts eg:

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

And for other fonts (ie. not from Google), if you can host the fonts on your server, you can refer to them relatively to get around the problem too. eg.:

@font-face { 
  font-family: 'museo_sans_100regular'; 
  src: url('/wp-content/uploads/museosans_100-webfont.eot'); 
  src: local('☺'), local('museo_sans_100regular'), 
    url('/wp-content/uploads/museosans_100-webfont.woff') format('woff'), 
    url('/wp-content/uploads/museosans_100-webfont.ttf') format('truetype'), 
    url('/wp-content/uploads/museosans-100-webfont.svg#museo_sans_100regular')     format('svg');
}

Upvotes: 0

Dane Rossenrode
Dane Rossenrode

Reputation: 212

I have exactly the same problem! I'm using the latest version of Firefox (23), and Windows (8). I also have a discreet (onboard) AMD graphics card in my laptop, which is fairly weak.

I did not have the problem in windows 7 before I upgraded.

After doing some investigation, here's what I've discovered:

  • I seem to have the problem with cleartype generally, because when I view thin fonts (via control panel > fonts) with cleartype on, they look terribly pixelated. With cleartype off, they look smoother, but without the great sub-pixel rendering, so they're not super sharp like they could be.

  • Each of the browsers installed on my computer (IE, Opera, Chrome, Firefox), treats thin fonts differently. Opera has a similar with pixelation as Firefox. Chrome treats Titillium fine, but not Glypha LT (the title font on The Expressive Web). IE is the only browser, ironically, that treats all thin fonts perfectly as it should.

Upvotes: 0

Mike
Mike

Reputation: 17220

I have often found that declaring the font-weight can help.

font-weight: 200;

Upvotes: 2

shabeer90
shabeer90

Reputation: 5151

Looks fine in my end, try clearing your browser caches, and trying again.

Upvotes: 0

Related Questions