Solved

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

Posted on 2013-01-12
7
757 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 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 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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 53

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

752 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