Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-12
7
Medium Priority
?
763 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to dynamically set the form action using jQuery.
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

721 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