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: 
This is how it should look: 
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
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.
source to share
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.
source to share
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;)
source to share