How to make a font appear as is and not pixelated - html

Question

I am using a custom font for a image slider in SharePoint 2010. For some reason when the size of the font is anything bigger than 12pt, the font is pixelated and is not sharp in IE 8.
CSS:
#font-face {
font-family: 'MyriadPro';
src: url('http://insidedev:1000/fonts/myriadpro.otf'); /* IE9 Compat Modes */
src: url('http://insidedev:1000/fonts/myriadpro.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://insidedev:1000/fonts/myriadpro.otf') format('otf'), /* Modern Browsers */
}
#slider div.mc-caption {
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
color:#FFFFF;
z-index:4;
text-align:left;
background:none;
margin-left: 10px;
}
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
#slider div.mc-caption a:hover {
color: #E8620E;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
I was trying to originally use a custom font, MyriadPro but that did not seem to be being used in my image slider. With the above CSS, the caption looks like this:
Any idea what is causing this? How do I fix it, please let me know.

Answer 1

I was able to solve my problem by using ClearType for older version of IE8 that displays the pixelated font.
First, what is ClearType?
Think of those jagged edges you often see in text on a computer
screen, especially any flat-panel. Well, there’s a bit of code in your
operating system that attempts to clean up those edges by using
anti-aliasing at the sub-pixel level to visually smooth out those
rough edges, making the text easier to read. Essentially, it aims to
make on-screen text appear more like printed text.
But, here’s where our problem lies. Animating text with JavaScript
(especially in jQuery) overrides the ClearType feature by telling the
browser to display each step of the pixel throughout animation. When
the animation completes, its left displaying the final step without
ClearType enabled, leaving the text looking a bit crappy. Functions
like fadeIn() and fadeOut() usually trigger the override and cause the
pixel problems. (dauid.com)
An example of JavaScript/JQuery that causes ClearType issue:
$("#div").fadeIn();
To get around the issue, especially for older browsers, you have to remove the filter attributes like this:
// This fixes the ClearType issue in jQuery
$("#div").fadeIn(function(){
this.style.removeAttribute("filter");
});
// This fixes the ClearType issue in animations outside of jQuery
document.getElementById("#div").style.removeAttribute("filter");
Hope it helps others who are experiencing the same issue.

Answer 2

Set the background colour of the link text to match what is behind it.
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
background-color:??????
}