Search code examples
macoscssfirefoxtextfont-face

CSS3 @font-face not selectable on Mac OS X Firefox

Off the back of this post (CSS3 @font-face not displaying on Mac OS X Safari 5.x OR Chrome) I have come across a new stumbling block. It all seemed to be fixed at first but then I encountered a new problem that I couldn't select any text.

On Firefox in Mac OS X, I cannot highlight any text or even click on any hyperlinks that is using the font-face font. It is selectable on all other operating systems (including Windows, iOS etc.) and other Mac OS X browsers (like Chrome and Safari).

Try it out on http://gradtouch.com/test

Here's the current CSS code.

@font-face {
font-family: 'Avenir LT 55 Roman';
src: url('fonts/avenir-55.eot?#iefix') format('embedded-opentype'), 
url('fonts/avenir-55.woff') format('woff'), 
url('fonts/avenir-55.ttf')  format('truetype'),
url('fonts/avenir-55.svg#AvenirLT-Roman') format('svg');
font-weight: normal;
font-style: normal;
}

Any ideas or solutions?

Thanks in advance.

Solution

  • At first glance, I would guess something is wrong with the metrics in that font. If I create a <span> containing some of your text and give it a border to see how tall it is, that <span> ends up 0px tall.

    Once that happens, selection will be invisible, since it's drawn to the height of the text...