Different font sizes for Firefox only
I just add an account header for my site that just displays the players' username.
I am using a custom font and it works fine on chrome and IE, however for Firefox it does not display a custom font and just displays the next available font which is Verdana. I don't mind, however my problem is that the Verdana font is smaller than my own font, so if I set it to 7.5pt as the font size, the custom font appears twice as large. Is there anyway I can set the font size higher just for Firefox?
Here is the css for the div that contains the username:
font-size: 7.5pt;
color: #9f1717;
text-align: center;
font-family: xirod, xirodeot, Verdana, Geneva, sans-serif;
source to share
I suggest using the font format supported by Firefox or using font-size-adjust
to get the same sizes across different font families.
You can use font-size-adjust
by adding the following CSS:
font-size-adjust:0.5;
This will cause all fonts to have approximately the same lowercase characters in height (which, in general, create text that appears closer to the same size when viewed using different fonts).
source to share
If possible, it is due to cross-origin policy . This will be the case if you are storing fonts and / or other static resources on a CDN or just another subdomain. Currently, only FF implements it in the spec, but I would imagine other browsers start picking up the behavior.
Adding an http header to a font file similar to the file Access-Control-Allow-Origin: *
will solve the problem - and a quick Google search will give better results for the rule specs than I could describe here.
...
Is not it? You can set Firefox specifically to a structure that only applies to a specific url prefix - if you don't pass a prefix value it will always be applied, but can only be understood by the FF browser:
@-moz-document url-prefix() {
.username {font-size:15pt;}
}
source to share
You will be able to get it in all browsers now. The font rendering is not copyrighted, you can upload it to Font Squirrel and create your own CSS font embedding solution for your site. I suggest you try this. If that doesn't work, there are always jQuery browser detection solutions where you can simply load a separate stylesheet.
Use the following code with this browser detection plugin:
if($.browser.mozilla) {
document.write("<style type='text/css'>body { font-size: 3.75pt; }</style>");
}
source to share
use browser css selector, see http://rafael.adm.br/css_browser_selector/ for reference
source to share