How can I display ALL characters even with custom font?

[nougat cookie]

Hi,

Through the Stylish extension and a CSS code snippet, I have forced a certain font to be used on certain webpages. The problem is that the font does not contain characters for every unicode characters used in the source code, such as smileys, stars within ratings, and other webpage elements based on fonts and not images. Usually Windows is smart enough to load a second font to display those special characters as well. Firefox seems unable to do that, at least in my current configuration. How can I change that?

https://s7.postimg.org/ucghmnnbv/asdf.png

Thanks!

[Brummelchen]

webfonts are NOT evil. stop filtering them, best advice.

[therube]

(Others might disagree, Why NoScript Blocks Web Fonts.)

[Brummelchen]

that article is from 2010, dont you think firefox has not evolved in the last 7 (!) years? sorry, way too simple thoughts.

[nougat cookie]

webfonts are NOT evil. stop filtering them, best advice.

An all-too-common first reply needlessly commenting without providing any solution. Luckily, there is a technical solution to my problem, and I found it myself:

· Install the Font Finder extension, and find out which font is the first one specified. This is important as the substitution does not work if the font used on a page is itself a substitute font. In my case Helvetica was the specified first font option.
· Specifiy a substitution font with this CSS code: https://gist.github.com/Hexcles/6325659

Unlike with forcing a certain font to be used globally, this way specialized webfonts for other elements than the main text remain unaffected.

[Gingerbread Man]

· Install the Font Finder extension

You don't need an add-on to find out which font is specified. You can use the built-in developer tools for that.

Specifiy a substitution font with this CSS code: https://gist.github.com/Hexcles/6325659

I don't see how this relates to your question. It will replace a particular font on a page with another that you specify (for example, I replace Comic Sans with something else). But if you want all sites to use a given font, except for symbols provided by FontAwesome and such, here's how:

You must know the font that's being used to display the symbols in question. Right-click a symbol and choose Inspect Element. In the Inspector pane, click the Fonts tab. You should see the font family names listed there, labeled with "remote". The actual font family name is below, under "Used as:".

You'll want to specify your ideal font first, then the site's fonts after that. If certain characters can't be rendered with the font you want, then Firefox should fall back to the second font in the list, or the third, and so on. If none of the specified fonts contain the required characters, then Firefox will display the Unicode codepoints (rectangles with numbers in them). Here's an example of what you'd put in your userContent.css:

Code: Select all

@-moz-document url-prefix("http://"), url-prefix("https://") {

* { font-family: Arial, "Segoe UI Symbol", FontAwesome, PlaceholderFontOne, "Placeholder Font Two", sans-serif !important; }

}

[nougat cookie]

It's just for replacing a font on a specific website. Here's the code I'm now using:

Code: Select all

@-moz-document domain("discogs.com")
    {
@font-face {
    font-family: "Helvetica";
    src: local("Oranda BT");
}