Is There a Trick to Show Arial Black in Firefox

Arial Black - Websafe Font?

According to Code Style Font Survey (actually the best estimate you can have) Arial Black is commonly installed on about 97% of Windows and Mac computers and 68% of Linux machines. So, it's fairly safe to use it, but you got to provide substitutes for it in your font stack. Something like:

.my-style { font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;

If you wish it to appear, even when it's not really installed on your (or any user) system, then you'll have to embed the font file by using @font-face directive in your CSS.

Here's Code Style Survey: http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml

Firefox not recognizing a font

The solution is not straightforward. Font appearance varies by browser, OS, and of course by which fonts are available on the client's system. Don't take this answer at face value without further testing based on your target audience.

On Windows, ever since Firefox 4 and IE9, fonts are rendered using DirectWrite instead of GDI. Since this change, fonts like "Arial Narrow" and "Arial Black" are considered part of the Arial family and not as standalone families. So in Firefox, you access Arial Narrow through the regular Arial declaration with some modifiers. IE9 works in a similar fashion, but seems to have some pragmatic cheats baked-in that makes it work in the way developers have been used to.

Franklin Gothic Medium

font-family: "Franklin Gothic Medium", "Franklin Gothic", sans-serif;

All browsers except Firefox understand "Franklin Gothic Medium". Firefox doesn't and goes on to the next choice, "Franklin Gothic", which you might not even think you have, but that is where "Franklin Gothic Medium" is living in the DirectWrite world. In the absence of any other modifiers (italic, bold, stretch), my Firefox grabs "Franklin Gothic Medium" when "Franklin Gothic" is specified.

Arial Narrow Bold

font-family: "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;
font-stretch: condensed;
font-weight: 700;

Some browsers, like Chrome and IE7–8 recognize "Arial Narrow Bold". But IE9 and Firefox do not. IE9 does recognize "Arial Narrow". Firefox falls down to Arial. font-stretch: condensed tells Firefox to use the "Arial Narrow" version of Arial, and font-weight: 700; tells both IE9 and Firefox to use to the "Arial Narrow Bold" version as far as I can tell. Font weights of 600, 700, 800, and 900 are triggering the bold for me.

Franklin Gothic Medium with Arial Narrow Bold fallback

Now you've got a Catch-22.

font-family: "Franklin Gothic Medium", "Franklin Gothic", "Arial Narrow Bold", "Arial Narrow", "Arial", sans-serif;

If Firefox can find "Franklin Gothic" you are fine, but if it can't then it will fall back to "Arial". If you use font-stretch: condensed; font-weight: 700; to turn that into "Arial Narrow Bold", you will affect the appearance of Franklin when the Arial fallback is not used. Every browser will apply the font-weight rule to Franklin if Franklin is available—not what you want at all. If you use font-stretch: condensed and Firefox has access to Franklin, it will dutifully condense it. (I didn't see that in any other browser.) In your particular situation, I would count on Firefox getting Franklin and accept that regular Arial will be used as the fallback. But adding "Franklin Gothic" (for FF) and "Arial Narrow" (for IE9) is going to help a lot.

(At the time of writing, Chrome is at version 21 and Firefox is at version 14.)

Firefox renders some characters smaller than the font size

Those characters aren't present in the font you're setting in your stylesheet, so the browser does fallback to some font that does have the characters. This fallback is done on a character-by-character basis, so different fonts can ed up being used for different characters. Specifically, I strongly doubt Times New Roman has those star characters.

I suggest setting a font that actually has the characters you're using in your stylesheet.

IE9: wrong rendering of Arial (bolder)

Just to weigh in, you could place a meta tag into your HTML as a quick workaround, which will tell IE9 to emulate IE8, bringing back the original rendering.

To do this, place <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your section.

However this will come at the expense of other IE9 features you may need, like the better HTML5 and CSS3 support.

Html Css buttons look different in Firefox

When you do not set fonts on your page, each browser uses its default fonts. This may well mean that the font family used in button elements varies. It is typically Arial, but Firefox has different settings, e.g. MS Shell Dlg in my system (Win 7). You can check such issues using each browser’s Developer Tools.

There’s also a difference in font size. When you set font size to 0.97em, browsers multiply the parent element’s font size by 0.97 and may then round the result, even in different ways. When the basic font size is the typical default of 16px, IE uses 15.52px, Firefox uses the correct exact value 15.53px, and Chrome uses 16px (i.e. rounds to in integral number of pixels). This, combined with font family variation, causes small differences.

You can make the rendering more uniform by replacing font-size: 0.97em by

font-size: 1em;

and adding

font-family: Arial;

in the rule with the .btn selectors.

This does not remove all differences, since browsers render fonts in slightly different ways, and not all systems have Arial (many modern handheld devices don’t). Rendering in Firefox and Chrome on Win 7:

Regarding font family, you could use a downloadable font (web font), to get more consistent results. Doing so just for a few buttons might be overkill, but maybe you have other use for it too.

font weights differing in webkit and firefox

I've had luck with this in the past for pesky webkit fonts displaying bolder than intended:

-webkit-font-smoothing: antialiased;

I would also recommend using a CSS @font-face to display Helvetica Neue fonts. Helvetica Neue is not on all computers and operating systems by default. Hope this helps! :)

---

Related Topics