SEARCH

Enter your search query in the box above ^, or use the forum search tool.

You are not logged in.

#1 2015-06-27 13:27:33

twoion
Emerald Caffeine
From: 星界
Registered: 2012-05-11
Posts: 1,648

Firefox/Iceweasel reader mode: How to change the font families

The 38.0 release of Firefox (or Iceweasel, via mozilla.debian.net) introduced a so-called reader mode, a JavaScript-based view which tries to extract and display article text in a distraction-free, simple manner.

Unfortunately, the reader doesn't respect the Firefox font settings. It defaults to the preference list

Helvetica,Arial,sans-serif

for sans-serif fonts and

Georgia,"Times New Roman",serif

for serif fonts, which will give you your actual font preferences only if you don't have the prioritized fonts installed or if your fontconfig settings are not configured to provide substitute fonts for the prioritized font families.

For example, your system might be configured to return TeX Gyre Heros as an Helvetica or Arial substitute (for which it is probably the best free substitute font in existence) but you want to have DejaVu Sans in your browser, which you won't get. Dang.

You can however use the following user style (installable via the Stylish addon, search the forums or the internet for other methods) to override the default reader style:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
  body.serif {
    font-family: "Linux Libertine O" !important;
  }
  body.sans-serif {
    font-family: "Noto Sans" !important;
  }
}

Replace the font names with your preferred fonts, and add styling for line-height etc if needed. Don't forget to add "!important" to the declarations.

Last edited by twoion (2015-06-27 13:29:02)


Tannhäuser ~ {www,pkg,ddl}.bunsenlabs.org/{gitlog,repoidx}

Offline

Be excellent to each other!

#2 2015-06-27 14:05:49

cpoakes
#! CrunchBanger
From: Tucson, Arizona
Registered: 2012-05-19
Posts: 202

Re: Firefox/Iceweasel reader mode: How to change the font families

Not only thanks for the tip, but thanks for introducing me to this groovy feature.


programming and administering unix since 1976 (BSD, System III, Xenix, System V, Linux)

Offline

#3 2015-06-27 14:08:48

Head_on_a_Stick
CatMod
From: A world of pure imagination
Registered: 2014-01-21
Posts: 4,797

Re: Firefox/Iceweasel reader mode: How to change the font families

twoion wrote:

It's pretty sweet

I hate it!
*sulks*

But seriously, thanks for this!
smile

Offline

#4 2015-08-28 04:43:46

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

I had been trying to customize Firefox Reader's look and feel (without success!) until I stumbled upon this great post of yours. Thanks. smile

I was able to change the reader's default and boring Sans-Serif font from Arial to something better I had, but I was wondering how to go a step further and change the font color slightly (a little off-black) and reduce the line-height a bit.  I see you have mentioned below that it is indeed, possible :

twoion wrote:

.. add styling for line-height etc if needed. Don't forget to add "!important" to the declarations.

Can you help me with a code snippet maybe for Line height and font color please?

Thanks in advance,
S Ray

Last edited by ssray23 (2015-08-28 04:46:00)

Offline

#5 2015-08-28 15:12:09

hhh
Cityspeak
Registered: 2010-08-04
Posts: 3,253

Re: Firefox/Iceweasel reader mode: How to change the font families

ssray23 wrote:

Can you help me with a code snippet maybe for Line height and font color please?

It should follow normal CSS styling. For line-height, you can define it as pixels, percentage, EMs, etc... and for color you can use hex-codes or recognized color names. So...

body.serif {
    line-height: "10px" !important;
    color: "blue" !important;
  }

Or...

body.serif {
    line-height: "90%" !important;
    color: "#0000ff" !important;
  }

I didn't test this, so post back if it doesn't work.

http://www.w3schools.com/cssref/


bunsenlabs     8)     forum mod squad

Offline

#6 2015-08-28 16:14:13

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

Thanks for the CSS tip.

I tried adding the line-height and font color properties within the curly braces for body.sans-serif as below:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
  body.serif {
    font-family: "Times New Roman" !important;
  }
  body.sans-serif {
    font-family: "Helvetica Neue LT" !important; 
    line-height: "10px" !important;
    color: "blue" !important;
  }
}

But I get the below "parsing" errors:

8:17 Error is parsing value for 'line-height'. Declaration dropped.
9:11 Error is parsing value for 'color'. Declaration dropped.

FYI - Before, I add the two new lines for line-height and color, my previous code was parsing fine and I was able to replace Arial with Helvetica Neue in reader mode.

Any clues or suggestion on how to get around these parsing errors?
Sorry to ask too many basic questions -  I am still a newbie in CSS!!

Thanks again,
S Ray

Offline

#7 2015-08-28 16:59:30

twoion
Emerald Caffeine
From: 星界
Registered: 2012-05-11
Posts: 1,648

Re: Firefox/Iceweasel reader mode: How to change the font families

^ numeric values with units are not to be quoted, and built-in colour names are constants and not to be quoted either.

line-height: 10px !important;
color: blue !important;

Tannhäuser ~ {www,pkg,ddl}.bunsenlabs.org/{gitlog,repoidx}

Offline

#8 2015-08-28 17:20:07

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

Thanks a ton - syntax errors are gone and I can see the new font color reflect in reader mode.

The line-height value, somehow does not seem to have any effect. I tried multiple values like 12px, 8x, 90%, 110% etc. etc. but none of these seem to have any effect on the default line spacing (quite generous, actually) in Firefox's Reader mode.

No compilation or parsing errors though, thankfully. :-)

Not a big deal right now, but will be good to know if there is any remedy for the line-height property.

Offline

#9 2015-08-28 17:37:31

flaneur
#! Member
Registered: 2014-01-24
Posts: 99

Re: Firefox/Iceweasel reader mode: How to change the font families

ssray23 wrote:

Thanks a ton - syntax errors are gone and I can see the new font color reflect in reader mode.

The line-height value, somehow does not seem to have any effect. I tried multiple values like 12px, 8x, 90%, 110% etc. etc. but none of these seem to have any effect on the default line spacing (quite generous, actually) in Firefox's Reader mode.

No compilation or parsing errors though, thankfully. :-)

Not a big deal right now, but will be good to know if there is any remedy for the line-height property.

@-moz-document url-prefix("about:reader") {
  * {
    line-height: 10px !important;
  }
}

squishes things for me. Using 50px increases the distance between lines. So I'd say line-height should work.

http://i.imgur.com/Mi9aj2Km.png is with line-height 15px

Last edited by flaneur (2015-08-28 17:42:45)

Offline

#10 2015-08-28 17:51:55

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

@-moz-document url-prefix("about:reader") {
  * {
    line-height: 10px !important;
  }
}

The above worked like a charm!

I just made a minor change - specified the line-height value as a percentage, instead of px.

My final code looks like this:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
  * {
    line-height: 120% !important;
  }
  body.serif {
    font-family: "Times New Roman" !important;
    line-height: 100% !important;
    color: rgb(38,38,38) !important;
  }
  body.sans-serif {
    font-family: "Helvetica Neue LT" !important; 
    line-height: 100% !important;
    color: rgb(38,38,38) !important;
  }
}

Thank you everyone for your timely and helpful responses.

Cheers and have a great day....
S Ray

Offline

#11 2015-08-28 21:04:54

hhh
Cityspeak
Registered: 2010-08-04
Posts: 3,253

Re: Firefox/Iceweasel reader mode: How to change the font families

twoion wrote:

^ numeric values with units are not to be quoted, and built-in colour names are constants and not to be quoted either.

Sorry about that, my CSS is rusty.


bunsenlabs     8)     forum mod squad

Offline

#12 2015-08-29 04:24:13

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

Below is the final working version of my css after cleaning up redundant lines from the previous version of the code:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
  * {
    line-height: 120% !important;
    color: rgb(38,38,38) !important;
  }
  body.serif {
    font-family: "Times New Roman" !important; 
  }
  body.sans-serif {
    font-family: "Helvetica Neue LT" !important; 
  }
}

Thanks,
S Ray

Offline

#13 2015-08-29 04:28:52

flaneur
#! Member
Registered: 2014-01-24
Posts: 99

Re: Firefox/Iceweasel reader mode: How to change the font families

hhh wrote:

...
Sorry about that, my CSS is rusty.

And my knowledge of CSS is minimal. I understand that using * { whatever !important } isn't really recommended. And that it's better to drill down a bit and use something more specific in place of "*".

Edit: removed OT stuff. Will post in a more appropriate area.

Last edited by flaneur (2015-08-29 04:48:56)

Offline

#14 2015-10-28 07:38:31

ssray23
New Member
Registered: 2015-08-28
Posts: 6

Re: Firefox/Iceweasel reader mode: How to change the font families

Hello everyone,

Thanks to all the tips and tricks posted above by all, I am now enjoying my customized version of FF reader mode for some time now.  In fact,  I am able to create beautiful word like documents from cluttered websites in one tap.

Just a small annoyance remains - Does any one know how to turn off that underline on linked text? The link text itself takes on my custom fonts, color and line space, but it appears underlined.

What I tried: Under Options --> Content --> Colors, I unchecked the "Underline Links" option, but it did not affect the reader mode, only  regular web pages.

Any CSS hack?

This is my code in Stylish Add on:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("about:reader") {
  * {
    line-height: 117% !important;
    color: #262626 !important; 
  }
  body.serif {
    font-family: "Times New Roman" !important; 
  }
  body.sans-serif {
    font-family: "Helvetica Neue LT" !important; 

  }
}

Thanks in advance,
S Ray

Offline

#15 2015-10-28 09:45:26

vic
#! by Default
From: /grill
Registered: 2009-02-13
Posts: 3,361

Re: Firefox/Iceweasel reader mode: How to change the font families

@ssray23; all activity have moved to:

https://forums.bunsenlabs.org/


Time to move on!#

Offline

Board footer

Powered by FluxBB

Copyright © 2012 CrunchBang Linux.
Proudly powered by Debian. Hosted by Linode.
Debian is a registered trademark of Software in the Public Interest, Inc.
Server: acrobat

Debian Logo