How to Reduce Font Weight in Firefox on MAC with CSS

How to reduce font weight in Firefox on Mac with CSS?

FireFox posted a resolution to this today on their bug forum. It was just finalized today so won't be in use for a while, but we should all put

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

in our body tag to reset this for all browsers. FINALLY!! man, that made my day! This should come out in the next FF release.

thread here
https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Font weight turns lighter on Mac/Safari

So I fixed my problem with applying:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Now my font is consistent on every browsers.

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! :)

Font Weight (incorrectly) Lighter in Mac Safari Only

With the comments / prodding from @JukkaK.Korpela, I discovered a few things:

First, the root of the problem is this:

-webkit-backface-visibility: hidden;

Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker

Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.

Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:

Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"

With that tool, I was able to troubleshoot and solve this quickly.

Why does Firefox not honor CSS font-size for code tags wrapped in pre?

This issue is not new; it has been known for many years that browser handling of monospace fonts is incredibly screwy and inconsistent across browsers. A number of workarounds are available that don't require you to override the monospace font preference set by the user, the most perplexing of which is to specify

font-family: monospace, monospace;

That's right: two monospace keywords at the end of the font stack. Nobody knows why this works; it just does.

For what it is worth, Firefox's UA stylesheet contains references to a -moz-fixed keyword which refers to the preference that is set by the user, which includes both the family and the size despite it being a value for the font-family property. Firefox ships with the preference set to 13px in whichever the system's default monospace font is. It would seem that monospace, monospace forces the browser to compute the element's font-size according to the spec while still preserving the preferred monospace family, at least. But this is just a guess.

Is this a bug? It depends on whom you ask. If you ask browser vendors, they'll probably say this is intentional. If you ask other authors, they'll probably also call it a bug. Is this a spec violation? No, because the spec allows browsers to implement defaults however they like.

Why is Firefox Selecting the wrong font weight from my font-face options?

As pointed out in this answer, it looks as though Firefox uses the last declared @font-face for a given style to display the content. The last face I had defined for the normal style had a weight of light, so that was the one Firefox used. The solution is to use the numeric weights in the @font-face declarations, as I have now done here. Then it properly uses the normal weight where appropriate.

SVG elements font-size change specifically on MacBook Firefox

To solve this on the .nav-btn element change your display: inline-block to display: inline-flex and add the align-items: center; and justify-content: center to this .nav-btn element as well.

Detecting specific browsers by version is a false dawn and opens up potential headaches in the future, for instance, every browser on an iPhone is just Safari in a product wrapper i.e. Chrome for iPhone is just Safari in a Chrome wrapper.

---

Related Topics