You are not logged in.

#1 2013-11-29 21:39:34

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Some fonts look pixelated in firefox

ok ok before you jump down my pants I have already been over https://wiki.archlinux.org/index.php/Font_Configuration

fonts on arch wiki and forums look great, and fonts on my system seem to look great as well. but when i go to for example:
http://getbootstrap.com/

the big "bootstrap" part looks fine, but the font under that and the buttons look horrible and pixelated. it's a severe strain on my eyes and hard to read, and this seems to happen on about 10% of the web pages I visit.

first thing i did was install more fonts, thinking that maybe i was missing some. now i have 875 fonts installed LOL and still same problem.


[chuck@ArchLinux ~]$ grep /fonts /var/log/Xorg.0.log
        /usr/share/fonts/misc/,
        /usr/share/fonts/TTF/,
        /usr/share/fonts/OTF/,
        /usr/share/fonts/Type1/,
        /usr/share/fonts/100dpi/,
        /usr/share/fonts/75dpi/
[chuck@ArchLinux ~]$ vi /etc/fonts/local.conf
[chuck@ArchLinux ~]$ xdpyinfo | grep dots
  resolution:    96x96 dots per inch

Perhaps this 96dpi is the issue but i dont know what my display is or should be and I dont have trouble with font rendering on my system its only on certain websites. maybe its a firefox issue?

Can anyone can help me pin down the crux of the issue here?

I am on a asus zenbook ux31a with 1600x900 display and when i look at fonts in kde settings they all look beautiful even the cursive ones. So why the eye strain on some web fonts? I also have installed microsoft fonts but I do not recall which packages specifically.

Thanks in advance!


screenshot:

http://i.imgur.com/jNiM1lR.png?1

Last edited by chuckiv (2013-11-29 21:58:28)

Offline

#2 2013-11-29 21:45:55

jasonwryan
Forum & Wiki Admin
From: .nz
Registered: 2009-05-09
Posts: 18,072
Website

Re: Some fonts look pixelated in firefox

Please edit your thread title and choose one that describes your actual issue; the current one will mean nothing if it shows up in a search:
https://wiki.archlinux.org/index.php/Fo … ow_to_Post

There is a link below the text box to BBCode for formatting using code and other tags.

Your dpi issue is unrelated, but you can check your monitor's dpi here: http://dpi.lv/


Without seeing a screenshot of what you see on that page, a guess would be that your font config isn't set up for those families of fonts.


Arch + dwm   •   Mercurial repos  •   Github

Registered Linux User #482438

Offline

#3 2013-11-29 21:59:21

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

thanks, fixed and added screenshot

Offline

#4 2013-11-29 22:29:54

jasonwryan
Forum & Wiki Admin
From: .nz
Registered: 2009-05-09
Posts: 18,072
Website

Re: Some fonts look pixelated in firefox

There are quite a few similar threads, see this one, for example: https://bbs.archlinux.org/viewtopic.php?id=155729


Arch + dwm   •   Mercurial repos  •   Github

Registered Linux User #482438

Offline

#5 2013-11-30 00:37:37

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

thanks, i went through that post and it wasn't helpful. In fact, have you read it? because i dont see how that link applies to my question AT ALL hmm

Offline

#6 2013-11-30 00:51:41

jasonwryan
Forum & Wiki Admin
From: .nz
Registered: 2009-05-09
Posts: 18,072
Website

Re: Some fonts look pixelated in firefox

Have I read it? No, I just randomly paste post numbers into threads to confuse people.

AFAICT, it is exactly your issue. The website is serving up a font for those classes, and you either don't have it installed, or it is not properly configured, so the nearest approximation is loaded instead, which renders in the ugly form. What makes you think your issue is unrelated?


Arch + dwm   •   Mercurial repos  •   Github

Registered Linux User #482438

Offline

#7 2013-11-30 17:15:52

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

1.) I have 875 fonts installed. If I am missing one, I would like to know how to find out which one I am missing and install it. The link does not explain this.

2.) The link explains how to replace Consolas with Courier -- I have both. I use consolas in my terminal actually and it renders beautifully. I have microsoft fonts installed. I think I installed every font package I could find in an attempt to fix this issue before posting. And I mention that in my original post above. Furthermore, the poster's screenshot does not show pixelation like I am experiencing. It looks to me like that poster was looking to change fonts, and got the solution he was looking for. I am NOT trying to change fonts. I am trying to get the website to render as originally intended by the author.

3.) I am not interested in font-replacement. I want to fix the root of the problem (after properly identifying what that is) not script a work-around that "fixes" it.

4.) On a side note, using that link above for finding dpi/ppi shows me that I have 138ppi... and it looks like I am set to 96ppi. Are you sure this isn't related to my problem?

Can somebody else please help me? Thanks

Last edited by chuckiv (2013-11-30 17:42:11)

Offline

#8 2013-11-30 17:43:32

anonymous_user
Member
Registered: 2009-08-28
Posts: 3,058

Re: Some fonts look pixelated in firefox

You can inspect the website's html/css to find which font families it looks for. If you use Firefox, you can try this addon:

https://addons.mozilla.org/en-US/firefo … nt-finder/

Offline

#9 2013-11-30 19:02:29

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Thank you! By doing this I have found out that the problem font is Helvetica. I checked kde > system settings > fonts and I do have Helvetica installed, however it looks pixelated there also. So this tells me that it has nothing to do with the web or firefox. Maybe I got Helvetica from a bad/old AUR package? Or maybe it's the ppi/dpi issue?

What do you all think?? Thank-you

Here is the exact code: font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

and Helvetica is in blue and everything else is grey

I assume this mean that "Helvetica Neue" is the preferred font for the site, and I do not have that, so it uses the next one, Helvetica.

I'm sure I can search for Helvetica Neue and install it, however, I would still like to fix the issue of Helvetica being pixelated, in case another site uses it as it's first choice.

Last edited by chuckiv (2013-11-30 19:09:28)

Offline

#10 2013-11-30 19:16:15

bohoomil
Member
Registered: 2010-09-04
Posts: 2,376
Website

Re: Some fonts look pixelated in firefox

What is the output of 'fc-match Helvetica'?


:: Registered Linux User No. 223384

:: github
:: infinality-bundle+fonts: good looking fonts made easy

Offline

#11 2013-11-30 19:31:55

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

[chuck@ArchLinux ~]$ fc-match Helvetica
helvR12-ISO8859-1.pcf.gz: "Helvetica" "Regular"

Offline

#12 2013-11-30 20:11:36

bohoomil
Member
Registered: 2010-09-04
Posts: 2,376
Website

Re: Some fonts look pixelated in firefox

Either do this:

pacman -R xorg-fonts-100dpi xorg-fonts-75dpi

or this:

# cd /etc/fonts/conf.d
# rm 70-yes-bitmaps.conf
# ln -s ../conf.avail/70-no-bitmaps.conf .

Last edited by bohoomil (2013-11-30 20:11:56)


:: Registered Linux User No. 223384

:: github
:: infinality-bundle+fonts: good looking fonts made easy

Offline

#13 2013-11-30 20:26:56

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Thanks but I don't understand how uninstalling fonts will fix this and I do not understand what the second option does. I am afraid of typing things into my terminal that I do not understand. Would you mind explaining briefly where you are coming from with this proposed solution?

Thank you

Offline

#14 2013-11-30 20:47:36

bohoomil
Member
Registered: 2010-09-04
Posts: 2,376
Website

Re: Some fonts look pixelated in firefox

Helvetica is a bitmap font, hence antialiasing and hinting won't apply to it. This is the old font format used by native Xorg applications. As you probably don't use them extensively, you can remove the packages and let fontconfig choose a corresponding outline sans-serif typeface. If you insist on keeping the packages, you can disable bitmap fonts for applications other than Xorg's. See Font Configuration and related articles. Besides, there are tons of information about computer font formats available on-line.

Last edited by bohoomil (2013-11-30 20:48:23)


:: Registered Linux User No. 223384

:: github
:: infinality-bundle+fonts: good looking fonts made easy

Offline

#15 2013-11-30 21:06:51

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Ok, thank you for the explanation. So, if I understand correctly, BOTH of your solutions would result in the webpage moving down the list of fonts and displaying Arial in this case

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

Since I would not have Helvetica if I remove xorg-fonts-100dpi and xorg-fonts-75dpi    OR
it wouldn't be able to be displayed if I did the second option because bitmap fonts would be blocked by font-config

Helvetica is a pretty standard font, does anyone know how to make it display nicely instead of removing/replacing it?

also, I just checked for Helvetica on my win7 machine and it looks fine. So anti-aliasing and hinting works for bitmap fonts in win7 but not Arch? whhhaaaaaatttt?? ;p so far I havent found a single thing that windows can do that Arch cannot.

Last edited by chuckiv (2013-11-30 21:27:04)

Offline

#16 2013-11-30 21:32:48

bohoomil
Member
Registered: 2010-09-04
Posts: 2,376
Website

Re: Some fonts look pixelated in firefox

You must have missed something:

bohoomil wrote:

…there are tons of information about computer font formats available on-line.

The font version you are using is not going to behave the way you want. Therefore you can either buy original Helvetica (which is notorious for its rendering issues) or do what one is supposed to do in such a case, i.e. replace Helvetica with one of its many equivalents (check this; there is also a free alternative in TTF, OTF and Type 1 formats, TeX Gyre Hermes, which is metrically compatible with Helvetica). The 'standard' is actually a pretty questionable statement here: Helvetica is not freely available, it comes bundled with some operating systems (Mac OS X for instance), while other platforms use their own sans 'standards' in its place (Arial in Windows, Liberation Sans and others in Linux, etc.). This line

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

should actually be read from the end: what you need is a sans-serif face, preferably the one compatible with any of the three families.


:: Registered Linux User No. 223384

:: github
:: infinality-bundle+fonts: good looking fonts made easy

Offline

#17 2013-11-30 21:53:07

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Ok, now that I understand the root of the issue I will go back and re-read the font information. Thanks.

I don't understand what you mean about that line being read from the end though. You mean right to left? In that case if I don't have sans-serif then it should stop at Arial, which I do have, and not even make it to Helvetica. I'm pretty sure that line is read left to right... ?

No doubt I have missed something LOL or I wouldn't be here ;P

also i went over infinality-bundle+fonts: good looking fonts made easy in your sig, is that a potential solution here?

lastly, should I be at all interested in the fact that im at 96ppi when my display does 138ppi?

p.s. thank you for your help smile  I really do appreciate it very much

Last edited by chuckiv (2013-11-30 21:57:37)

Offline

#18 2013-11-30 21:59:27

jasonwryan
Forum & Wiki Admin
From: .nz
Registered: 2009-05-09
Posts: 18,072
Website

Re: Some fonts look pixelated in firefox

Set your dpi to 138 and see if you like it...


Arch + dwm   •   Mercurial repos  •   Github

Registered Linux User #482438

Offline

#19 2013-11-30 22:07:36

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Ok, I'm very cautious of making changes to my system in general. I suppose theres no harm in trying that though and I should be able to revert it if I need to. I don't really like the idea of removing ALL bitmap fonts or turning them off completely in font-config though. I am going to see if I can get them to render better even though "The font version you are using is not going to behave the way you want" I am too stubborn to accept that answer without trying more things

Offline

#20 2013-11-30 22:17:24

jasonwryan
Forum & Wiki Admin
From: .nz
Registered: 2009-05-09
Posts: 18,072
Website

Re: Some fonts look pixelated in firefox

chuckiv wrote:

I am too stubborn to accept that answer...


So I've noticed. smile


Arch + dwm   •   Mercurial repos  •   Github

Registered Linux User #482438

Offline

#21 2013-11-30 22:21:00

bohoomil
Member
Registered: 2010-09-04
Posts: 2,376
Website

Re: Some fonts look pixelated in firefox

Sans-serif is not a family name: it is an alias. See: sans serif.

Read from the end means: this particular section of the website was designed to use a sans-serif typeface. Since there are many variants available, the one selected by the designer was Helvetica/Arial style. When your browser loads the page, fontconfig looks for either of the three families listed in the first place, but when none of them is found it tries to pick one of the fonts that could do the job instead. This can be actually any font that you assign to be selected (that is what we have fontconfig rules for) or any random sans-serif available in your collection. In any case, you have to use a replacement for Xorg bitmap fonts if you want to make them look properly. In order to do that, you can use the original, proprietary Helvetica or any freely available replacement in outline format. However, the best you can do is either remove xorg-fonts-*dpi packages (because you probably do not use them anyway), or disable bitmap fonts for applications like Firefox (which is never going to look OK with bitmap fonts). In either case,

bohoomil wrote:

See Font Configuration and related articles. Besides, there are tons of information about computer font formats available on-line.

because all your questions have already been answered countless times and the best you can do is to learn how font rendering in Linux works.

infinality-bundle is a project you probably do not need if you are satisfied with the way your fonts look (other than Helvetica, of course).

Last edited by bohoomil (2013-11-30 22:22:47)


:: Registered Linux User No. 223384

:: github
:: infinality-bundle+fonts: good looking fonts made easy

Offline

#22 2013-11-30 22:21:10

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

;D    well, you wouldn't believe how many times I have found a way despite being told there is no way. so it's a practice I will stick to, not taking no for an answer.

when I first read the font wiki I was looking for issues relating to pixelation and firefox because I didn't know enough to know what to look for. Now that bohoomil has enlightened me somewhat I am able to get much more out of the wiki

also thanks to anonymous_user for helping me identify the problem font and now I see in the wiki a section addressing Helvetica and bitmap fonts. I needed these 2 pieces of the puzzle to get anything out of the wiki

Last edited by chuckiv (2013-11-30 22:24:03)

Offline

#23 2013-12-01 00:28:16

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

WOW! I changed my dpi to 138 (from http://dpi.lv/) and everything looks so crisp! Helvetica still looks like poo but in general I really think the display looks a lot better. The fonts are huge this way though so I went into KDE settings > application appearance > fonts and forced the font DPI only back to not 96 but 120 since I do like them to be a little but bigger just not HUGE. Anyways, loving it thanks.

Offline

#24 2013-12-04 08:41:29

chuckiv
Member
Registered: 2013-10-28
Posts: 87

Re: Some fonts look pixelated in firefox

Ok so I did

pacman -R xorg-fonts-100dpi xorg-fonts-75dpi

and the pixelation is gone, the website uses sans-serif
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

so now i'm just left wondering how i have so many fonts installed but no helvetica OR arial hmm

I see in kde settings > font management that I do have arial, but the website doesnt use it, why?

Last edited by chuckiv (2013-12-04 08:43:15)

Offline

#25 2013-12-04 10:09:08

mariusmeyer
Member
From: Norway
Registered: 2009-04-25
Posts: 244

Re: Some fonts look pixelated in firefox

As bohoomil pointed out, sans-serif is not a font. You can use

fc-match

to figure out which font the alias "sans-serif" points to on your system.

Offline

Board footer

Powered by FluxBB