Question

I wanted to make a link with CSS hover. I am using font-face to make another font with JennaSue.

CSS:

@font-face {
    font-family:JennaSue1;
    src: url(font/JennaSue.otf);  
} 
 @font-face {
    font-family:JennaSue3;
    src: url(font/JennaSue.ttf);  
} 
@font-face {
    font-family:JennaSue2;
    src: url(font/JennaSue.eot);  
} 

#australia {
    position:absolute;
    font-size:40px; 
    left:0px; 
    top:32px; 
    color:#fff; 
    font-family: JennaSue1,JennaSue2,JennaSue3;
}
#australia a {
    text-decoration:none; 
    color:#fff;}
#australia a:hover { color:#b30101; }   

HTML:

<div id="australia"><a href="#">Australia</a></div>

The font work well on chrome but when i hover link it show like this picture:

Thanks for the answer here link for you can see http://jsfiddle.net/6UdYd/1/;

Answer 1

Just as Grezzo pointed out, there seems to be something strange going on with the font. If you look at this fiddle, the left link is just like your example. I added a border to visualize the boundaries of the a element. There the “j” and the “p” protrudes outside this border. By adding a bottom and left padding to it (as done on the right link), the hover works as expected.

This is somewhat of a quick fix I guess, but I don’t really know how to do it properly.