Problem with Microsoft fonts and facebook

Question

After I install Microsoft fonts, facebook font for the Persian content changes to Arial, which is a very bad font for Persian. This happens in both Chrome and Firefox. Here's the font family used by facebook: 'lucida grande',tahoma,verdana,arial,sans-serif

The problem is: for English content, Verdana is selected, which is the right choice. But for Persian content, Arial is given first priority - that means if I remove Arial from the list, everything will be okay (Verdana is used).

If I uninstall Microsoft fonts, hence getting rid of Arial, sans-serif is used which makes things better, at the expense of changing font for English content as well.

Any ideas what is going on?

Answer 1

I have the same problem but with arabic, but i found a really excellent answer from :

"Florian Heinle 1,272618"

HE wrote :

"My answer assumes you did not have fonts like Tahoma, Arial, etc installed before and that this is happening in any browser. Facebook uses the following fonts mostly: Lucida Grande, Tahoma, Verdana, Arial, Sans-serif. Those are used in the order provided. If Lucida Grande is not available, it will use Tahoma, then Verdana, then Arial, then falls back to a default sans-serif font, most likely DejaVu Sans or Ubuntu. What likely happend was that with installing Windows fonts those became available to your browser for rendering Facebook. Does it bother you? You could install Lucida Grande to have Facebook show up as intended by Facebook. Alternatively, you could disallow websites from setting their own fonts and have all the sites fall back to Firefox' default fonts (and sizes) in Firefox' settings (contents, advanced in the fonts section, tick the box there)"

Answer 2

That sounds to me like a general issue with the particular site's CSS design and usability. It should be fixed by the site itself, not by the client or operating system that renders the site as defined.

If that's the case someone should tell the site owner or customer support that it's a bad idea to serve such CSS rules for certain languages.

In the meantime you could write your own Greasemonky script, removing Arial in the CSS rules where you don't want it. The following might be a good starting point:

// ==UserScript==
// @name        facebook
// @namespace   facebook
// @include     https://www.facebook.com/
// @version     1
// @grant       addGlobalStyle
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addGlobalStyle('body { font-family: 'lucida grande',tahoma,verdana,sans-serif ! important; }');

You could look at the elements in firebug and add more rule names after body in the script code by separating them with commas. (Please note that I don't use facebook.)