Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-01-12
7
Medium Priority
?
765 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 54

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 54

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 54

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

916 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