Solved

Font gets pixelated after a certain spot on the page in Firefox

Posted on 2013-01-12
7
743 Views
Last Modified: 2013-01-23
Hi
I'm having the weirdest situation.
I'm building a site locally using Mamp, OS 10.6.8. My site has looked fine, even earlier this evening. But all of a sudden I'm getting font rendering more pixelated than usual, as if it's not being anti-aliased. It's not happening on the entire page. Just seems to be about two inches into the content, the font is fine. After that: Pixelated!
I'm using @font-face and Google webfonts. Both are doing it.
This is only happening in Firefox and locally in Mamp on this site! Chrome and Safari are fine.
Any reason why this would happen? I'm totally at a loss for a solution.

image of text
0
Comment
Question by:Alicia St Rose
  • 4
  • 3
7 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772119
Are your fonts set up correctly?

http://css-tricks.com/snippets/css/using-font-face/

@font-face {
      font-family: 'MyWebFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('webfont.woff') format('woff'), /* Modern Browsers */
           url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }

body {
       font-family: 'MyFontFamily', Fallback, sans-serif;
}
0
 
LVL 7

Author Comment

by:Alicia St Rose
ID: 38772398
Yep,
I did notice, however, that I was looking at the admin in Wordpress, locally and the font went a little faint there too. That was last night. Now it looks fine.
Could this be something with my OS?

Weird how it's only in Firefox and intermittently...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772464
You have to spec the font differently for each browser.  However you can spec the font locally like below where you first use src:local, then fall back to url.  This way if somebody has it installed, it will look nicer.  The fall back is from the url.  But the key for in the url is to have each of eot, woff, tiff, svg versions.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 7

Author Comment

by:Alicia St Rose
ID: 38772689
Hi Padas,
Thanks for that info. I'm still a little bit fuzzy, so I'm posting what I have in my style sheet:

@font-face {
    font-family: 'JuraRegular';
    src: url('fonts/jura-webfont.eot');
    src: url('fonts/jura-webfont.eot?iefix') format('eot'),
         url('fonts/jura-webfont.woff') format('woff'),
         url('fonts/jura-webfont.ttf') format('truetype'),
         url('fonts/jura-webfont.svg#webfontwebdXohA') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

Should look like this?
@font-face {
    font-family: 'JuraRegular';
    src: local('Jura Regular');
    src: url('fonts/jura-webfont.eot');
    src: url('fonts/jura-webfont.eot?iefix') format('eot'),
         url('fonts/jura-webfont.woff') format('woff'),
         url('fonts/jura-webfont.ttf') format('truetype'),
         url('fonts/jura-webfont.svg#webfontwebdXohA') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

And I'm also using Google Webfonts and the same issue is occurring:

@import url(http://fonts.googleapis.com/css?family=Gudea|Quattrocento+Sans:400,400italic,700,700italic);

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772712
Can you post a link or post your code to jsbin.com
0
 
LVL 7

Accepted Solution

by:
Alicia St Rose earned 0 total points
ID: 38795282
Hi,
I'm seeing this crazy font situation intermittently all over the web when I browse in Firefox, so I think it's a browser issue.
I'm going to close out the question. Thanks for help!
0
 
LVL 7

Author Closing Comment

by:Alicia St Rose
ID: 38809180
Seems this is a browser issue an not specific to my code.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Several part series to implement Internet Explorer 11 Enterprise Mode
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now