[Enhancement] Allow fall-back fonts

noscript49567 · Post by **noscript49567** » Thu Feb 25, 2016 5:46 pm

Please allow fall-back fonts to be used when @font-face is disabled.

Example page: https://fortawesome.github.io/Font-Awesome/

When Font-Awesome is installed on the system and downloadable fonts are disabled in Firefox using about:config (gfx.downloadable_fonts.enabled) the characters on the page will render properly.
However, when downloadable fonts are enabled NoScript blocks both the installed ones and the @font-face font.

NoScript should allow the installed font to render if it is installed on the system.

Post by **barbaz** » Thu Feb 25, 2016 8:36 pm

+1, but how can NoScript detect for a fact the font without downloading it? Webmaster don't necessarily name stuff nicely...

Post by **barbaz** » Fri Feb 26, 2016 12:29 am

Wow that was a vague post

Let me re-phrase that and elaborate.
+1 to this RFE because I know of one site where the locally installed Font Awesome (I don't remember installing it?

) used to apply but they changed the CSS on their end such that it quit working, and I don't trust them enough to allow their webfont version of something I've already got. So annoying!!!!!!!!!!

I know the difference in CSS between when it worked and when not, I will come up with test page to showcase both this difference and the problem I foresee with implementing such a feature in NoScript: webmaster might host Font Awesome on their site but name it, say, 'Gnyotetgecahymdoipakoodxyuqpitu'

noscript49567 · Post by **noscript49567** » Fri Feb 26, 2016 12:05 pm

Sorry for the vague post. The browser session had expired and I lost the post I was writing, so I didn't put in the same amount of effort the second time.

Here is another example that can be tested locally:

Code: Select all

<style>
@font-face {
    font-family: 'FontAwesome';
    src: url('url');
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -moz-osx-font-smoothing: grayscale;
}
.fa-gear:before {
    content: "\f013";
}
</style>

<h1><i class="fa fa-gear"></i><h1>

If NoScript changes @font-face to @font-face-noscript, removes it or puts it in a CSS comment, the character will render properly. So NoScript doesn't have to detect if the font is installed. Firefox does that.

Post by **barbaz** » Fri Feb 26, 2016 6:15 pm

noscript49567 wrote:Sorry for the vague post.

Oh, I meant my post, not yours. You're perfectly clear.

noscript49567 wrote:If NoScript changes @font-face to @font-face-noscript, removes it or puts it in a CSS comment, the character will render properly. So NoScript doesn't have to detect if the font is installed. Firefox does that.

Because you named it FontAwesome. If you name it anything else it doesn't work.
For example, change the font name in your test case to "Foo", and need to list installed FontAwesome explicitly for it to work:

Code: Select all

<!doctype html>
<style>
@font-face {
    font-family: 'Foo';
    src: url('url'), local("FontAwesome");
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 Foo;
    font-size: inherit;
    text-rendering: auto;
    -moz-osx-font-smoothing: grayscale;
}
.fa-gear:before {
    content: "\f013";
}
</style>

<h1><i class="fa fa-gear"></i><h1>

Remove the local() and it not work anymore.

Post by **barbaz** » Wed Mar 02, 2016 3:12 am

And it's looks not even as easy as simply changing the font-face to use local FontAwesome - compare the results of this user style vs. the webfont @ http://www.dslreports.com/forum/r306164 ... -use-SSLv2:

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);

@font-face {
  font-family: x248;
  src: local("FontAwesome");
}

.fa {
  font-family: x248 !important;
}

Note the upvote & downvote icons - they're circles w/ arrows using the webfont, and volume icons using the local font. Well, at least that's how it is for me

noscript49567 · Post by **noscript49567** » Fri Mar 04, 2016 4:20 pm

I get what you mean. I get the same result.
They are using 'Test2' as their font-family name. It's obviously a changed font. What I was proposing was allowing the fonts where they do it properly, not in terms of the local() alternative, but the font-family name.

Copying the font-family value and adding a @font-face for every font to the DOM would do the trick. That would still require getting all used font-family names.

Code: Select all

<style>
@font-face {
    font-family: FONT_FAMILY_1;
    src: local(FONT_FAMILY_1);
}
@font-face {
    font-family: FONT_FAMILY_2;
    src: local(FONT_FAMILY_2);
}
@font-face {
...
</style>

You can try adding this to https://fortawesome.github.io/Font-Awesome/

Code: Select all

@font-face {
    font-family: 'FontAwesome';
    src: local('FontAwesome');
}

If you tried adding the same code with font-family 'Test2', nothing would happen if you don't have a 'Test2' font.
And if they specified the family as 'FontAwesome' and changed the font you would get the sound icons, but that is what you would also get in Firefox if downloadable fonts were disabled, even if NoScript wasn't installed.

Post by **barbaz** » Sat Mar 05, 2016 3:35 am

OK. That sounds doable enough in theory. NoScript would enumerate all @font-face that it blocks, and if there is no local src specified, inject a user stylesheet like you said.

In practice I don't know if it's possible to enumerate all @font-face though...

InformAction Forums

[Enhancement] Allow fall-back fonts

[Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts

Re: [Enhancement] Allow fall-back fonts