Solved

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

Posted on 2013-01-12
7
761 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 53

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 8

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 53

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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 8

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 53

Expert Comment

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

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 8

Author Closing Comment

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

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

628 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