How to avoid Opera related errors when using @ font-face?

I believe this is a bug of Opera, so let me first show you what happened. I am using @ font-face font all over the website. It works great everywhere. In addition to Opera, a tooltip is required, which does not have any text displayed when using a custom font.

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

This is how it should look:
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 all the site content:

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 a custom font just for this error. I don't believe there is a selector for the tooltip, is there?


source to share

3 answers

I believe Diggersworld is right in saying this is an Opera problem. I work with Opera a lot and use jQuerytools (or a similar hint script) to get around this inconsistency in Opera.

You can use custom html to create tooltip without sacrificing your chosen font.



Yes, this is a known Opera bug.

For the most part, Opera inherits the font style from what is applied to the input element. input{font-size:2em;}

for example will also make a 2em error. But as you discovered there is a bug when using @ font-face.

The only way to get around this - and it's not very convenient - is to style the form fields by using the system font instead.



I faced the same error. There is an ugly hack if you serve your pages as * .php, I added this at the top of the page:

<?php $u_agent = $_SERVER['HTTP_USER_AGENT']; $opera = false; if(preg_match('/Opera/',$u_agent)){$opera = true;}?>


and then inside the form (used as an echo):

echo "<input type='text' name='required_field1' title='This field is required.'";if($opera == false){echo "required";}echo" />";


It only remains to leave a reserve for browsers, not understanding "required" (and opera) something like this:

if($_POST['required_field1'] == NULL && $_POST['required_field2'] == NULL){echo "Please fill out all of the form fields.";}


ALTERNATIVE My server just used the defaults when using the get_browser () function, but you could try something like this as an alternative instead of all this at the top of the page:

$browser = get_browser(null, true);


and instead "if ($opera == false)"

you have to type:

if ($browser[browser] != 'Opera')


which will be a little shorter, but won't validate correctly;)



All Articles