MozillaZine

How can I display ALL characters even with custom font?

User Help for Mozilla Firefox
nougat cookie
 
Posts: 50
Joined: July 4th, 2010, 12:37 pm
Location: Germany

Post Posted November 14th, 2017, 10:43 am

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
 
Posts: 2728
Joined: March 19th, 2005, 10:51 am

Post Posted November 14th, 2017, 12:06 pm

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

therube

User avatar
 
Posts: 17960
Joined: March 10th, 2004, 9:59 pm
Location: Maryland USA

Post Posted November 14th, 2017, 1:33 pm

(Others might disagree, Why NoScript Blocks Web Fonts.)
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.19) Gecko/20110420 SeaMonkey/2.0.14 Pinball CopyURL+ FetchTextURL FlashGot NoScript

Brummelchen
 
Posts: 2728
Joined: March 19th, 2005, 10:51 am

Post Posted November 14th, 2017, 2:10 pm

that article is from 2010, dont you think firefox has not evolved in the last 7 (!) years? sorry, way too simple thoughts.
users who problaby never will get an answer from me: f*x, f*n, j*n, k*s, k*x, l*y, m*o, m*d, m*x, o*l, p*y, s*e, d*h, l*t, d*e, j*k, f*u*a, h*2

nougat cookie
 
Posts: 50
Joined: July 4th, 2010, 12:37 pm
Location: Germany

Post Posted November 14th, 2017, 8:22 pm

Brummelchen wrote: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

User avatar
 
Posts: 7627
Joined: January 30th, 2007, 10:55 am

Post Posted November 15th, 2017, 5:49 am

nougat cookie wrote:· 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.
nougat cookie wrote: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
 
Posts: 50
Joined: July 4th, 2010, 12:37 pm
Location: Germany

Post Posted November 15th, 2017, 6:41 am

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");
}
                                   

Return to Firefox Support


Who is online

Users browsing this forum: Bing [Bot], elist74, Google [Bot], Google Adsense [Bot] and 21 guests