Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » FAQ - Atahualpa » Menus »

A fix for pixelated menus using Typekit fonts...


  #1  
Old Oct 27, 2011, 07:14 AM
interage
 
98 posts · Apr 2009
I ran into an issue where viewers of a site in Safari or Chrome on OS X were seeing a pixelated page menu when first loading the site - until they rolled over the menu. This menu uses Typekit fonts.

Wrote to Typekit about it - and here was their response:

Sorry you ran into trouble here. I just took a look at your site and I can definitely see what you're referring to. It turns out this is a bug with Webkit (the browser engine that powers both Chrome and Safari) on the Mac. When a font is a certain smallness, Mac OS X turns off antialiasing entirely because it's more readable aliased at that size. But this bug causes text near this element to also render without antialiasing.

The solution is to find the CSS that is causing the issue. In the case of your site, I found this:

div.horbar1, div.horbar2 {
clear: both;
display: block;
font-size: 1px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

If you change the font-size above to 5px, it will solve the issue. It would look like so:

div.horbar1, div.horbar2 {
clear: both;
display: block;
font-size: 5px;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

I went looking for it - it was in the page CSS for sure, but not anywhere in the Atahualpa options.

I had to search to find the code. It's in css.php:

/*-------------------- HORIZONTAL BARS --------------------*/

div.horbar1,
div.horbar2 {
font-size: 1px;
clear: both;
display: block;
position: relative;
padding: 0;
margin: 0;
width: 100%;
}


Hope this helps someone!

Best,

Mark
  #2  
Old Oct 27, 2011, 04:21 PM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
You might be able to just add the following in CSS Inserts as opposed to editing the css.php file.
HTML Code:
div.horbar1, div.horbar2 {
font-size: 5px !important;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Tags
css, font, menu, pixelization, typekit

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to Use Google Fonts API crogers32 Atahualpa 3 Wordpress theme 2 Aug 30, 2010 06:05 AM
Confused regarding fonts. beginner8 Center area post/pages 1 Dec 29, 2009 11:27 PM


All times are GMT -6. The time now is 12:52 AM.


Powered by vBulletin® Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.