Search code examples
cssoperafont-face

How to avoid Opera required field tooltip bug when using @font-face?

I believe this is an Opera bug, so let me show you what's wrong first. I use a custom @font-face font throughout the whole website. It works fine everywhere. Except Opera's required tooltip which doesn't have any text displayed when using custom font.

This is how the tooltip looks like when using @font-face for the whole website content:
enter image description here

This is how it should look like:
enter image description here

So, this is my @font-face definition:

@font-face {
    font-family: 'OpenSans';
    src: url('/fonts/OpenSans-Regular-webfont.eot');
    src: url('/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/OpenSans-Regular-webfont.woff') format('woff'),
        url('/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
        url('/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

And this is how I set to the whole site's contents:

body, button, input, select, textarea {
    color: #454545;
    font: normal normal 12px/15px "OpenSans", "Lucida Grande", "Trebuchet MS", sans-serif;
}

So, how do I avoid this? I don't want to sacrifice the custom font just for this bug. I don't believe there is a selector for the tooltip, is there?

Solution

  • I believe that Diggersworld is correct is saying that this is a Opera problem. I work with Opera often and use jQuerytools(or similar tooltip script) to bypass this inconsistency in Opera.

    You should be able to use customized html to create the tooltip without sacrificing the font of your choice.