What did you set in options?

When you are in the Fonts dialog (Options > Content > "Advanced" button), you will notice a control at the top which usually reads "Western" or "Other Languages" (the latter is used for Unicode pages). Make sure to make your choices for both of those, and if you work with pages that use other character sets, set those as well. And finally, uncheck the box that lets page choose their own fonts.

Does that work?

Note that some websites use a font that is downloaded from the server (@font-face) to display specific icon. If you disable web page fonts then you get little boxes with the hex code or another character if you have a font that covers these glyphs.

Yes, I can see many web-sited do this. So is there any way to get rid of this. Specially for Pushbullet I can see the Hex Codes.

There is no easy way to workaround such an issue. You can only see such an icon font if the allow pages to use their own font and if downloadable font is enabled. You would have to override the font on web pages instead with style rules in userContent.css or Stylish to use a different font.

It's difficult to come up with a style rule that will effectively replace regular fonts (like Arial) with Calibri but not symbol fonts. Certainly you could get part of the way there with a rule such as:

body, div, p, td {
    font-family: Calibri !important;
}

But the way CSS works is that more specific rules override more general ones, so on many sites, you won't notice any effect.

So, how can this be resolved. I am full fan of Calibri Fonts and I can see some web-pages with hex codes in the items. What is the best solution you can recommend to get rid of this?

You can consider to only use website fonts on pages that use downloadable fonts for icons.

• Document Font Toggle: https://addons.mozilla.org/firefox/addon/document-font-toggle/