Search code examples
cssmacosfirefoxsafarifont-face

Inline heading with background color using @font-face - not working on Mac in either Safari or FF

I have an inline heading (h1) with a background-color on the heading, but on Mac OS in both safari and Firefox it does not seem to stretch around the font. With a websafe font it works fine. Line height is set according to the font-size.

Any suggestions?

See visual expamle: http://www.flickr.com/photos/hegerokenes/5038724235/

@font-face {
    font-family: 'FedraMonoStd-Medium';
    src: url('fonts/fedramonostd-medium-webfont.eot');
    src: local('☺'), url('fonts/fedramonostd-medium-webfont.woff') format('woff'), url('fonts/fedramonostd-medium-webfont.ttf') format('truetype'), url('fonts/fedramonostd-medium-webfont.svg#webfontNCPrZ83i') format('svg');
    font-weight: normal;
    font-style: normal;
    }


h1 {
    font-size: 22px;
    background-color: #999895;
    line-height: 38px;
    display: inline;
    color: #fff;
    padding: 3px;
    }
Solution

  • try a little more padding, this should work without messing up the line-height. say 

    padding: 12px 3px 3px 3px;

    at least it did with the font i was using...