Different font size just for Firefox

Question

I am just adding a account header for my website, that just displays the players username.

I am using a custom font and it works fine on chrome and IE, however for Firefox, it doesn't display the custom font and just displays the next available font which is Verdana. I don't mind that, however my problem is that the font Verdana is smaller in size than my custom font, so if i set it to 7.5pt as font size, the custom font appears twice the size. Is there anyway i can set the font size higher just for Firefox?

Here is the css for the div that the username is in:

font-size: 7.5pt;
color: #9f1717;
text-align: center;
font-family: xirod, xirodeot, Verdana, Geneva, sans-serif;

Solution 1

I suggest either using a font format that Firefox supports, or using font-size-adjust to get uniform sizes across different font families.

You can use font-size-adjust by adding the following CSS:

font-size-adjust:0.5;

This will set all fonts to have approximately the same height lowercase characters (which, in general, produces text that appears to be closer to the same size when viewed with different fonts applied).

Solution 2

Any chance this is caused by cross-origin policy kicking in? It would be the case if you are storing fonts and/or other static resources on a CDN or just a different subdomain. Currently only FF implements it to spec, but I'd speculate other browsers will start picking up the behaviour.

Adding http-header to the font file similar to that of Access-Control-Allow-Origin: * would solve the issue - and a quick google search would yield better results for rule specifics than I could describe here.

...

Not it? You could target Firefox specifically with a structure that only applies to a certain url-prefix - if you do not pass the prefix value it would always be applied but can only be understood by a FF browser:

@-moz-document url-prefix() {
    .username {font-size:15pt;}
}

Solution 3

You should be able to get it in all browsers now adays. Providing your font isn't copyrighted you can upload it to Font Squirrel and create a custom CSS font-embedding solution for your website. I'd suggest you try this. If that doesn't work, there are always jQuery browser detection solutions where you can just load a separate style sheet..

Use the following code with that browser detection plugin:

if($.browser.mozilla) {
  document.write("<style type='text/css'>body { font-size: 3.75pt; }</style>");
}

Comments

[ThiefMaster]

Firefox supports webfonts. So simply fix your CSS/fonts so they work in firefox, too...

[DiMono]

@-moz-document url-prefix worked for me. Somehow just Firefox was displaying the menu in a different font size than other browsers, and this let me bring it back in line. Thanks!

[lofihelsinki]

document.write() is a no no.