Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

Fonts in Firefox and Chromium are still not the same as in Windows FF and Chrome after installing ms fonts.

I mean the fonts that were missing are now displayed, but they are not the same as on windows.

They are too "wide" or too "narrow/high" and e.g. if they are bold in FF on WIn in Ubuntu's FF they are super fat.

How can I improve the displaying of fonts in Ubuntu FF and Chromium?

I don't mind the wide default font in Ubuntu OS, but in browsers it's not very nice to see it differently as 80 - 90 percent of visitors.

Bacause right now it is not as on Windows.

I am using 13.04 version of Ubuntu.

EDIT:

page: www.bild.de

If you look closer you can see the difference (wider and not so high font in Ubuntu):

enter image description here

share|improve this question
    
Possible duplicate: askubuntu.com/q/19770/21195 –  Rodrigo Martins Jun 12 '13 at 22:32
6  
You really can't count on every website visitor on every platform with every operating system having a pixel-perfect match in rendering your site. That's not how the world wide web works. A web page in Firefox 21 on Windows 7 doesn't look exactly the same as a web page in Firefox 21 on Windows XP doesn't look exactly the same as a web page in Firefox 21 on Mac OS X. A web page in IE 9 doesn't look exactly the same as a web page in Chrome. Get used to it. If your layout breaks because the font proportions are a little different on one platform, you're doing web development wrong. –  Steven Kath Jun 13 '13 at 6:21
    
See also, stackoverflow.com/questions/15873623/… –  Steven Kath Jun 13 '13 at 6:29
    
@StevenKath - that is a valid answer, if you can tidy it up with examples then please post it. Thanks. –  fossfreedom Jun 13 '13 at 7:27
add comment

5 Answers

Ubuntu and windows use different font rendering techniques. Windows uses ClearType, and Ubuntu uses FreeType. These font renders produce quite different results, FreeType tends to produce fatter/bolder looking fonts and ClearType tends to produce thinner looking fonts.

As a web developer there is really nothing you can do about it except make sure the difference doesn't result in clipped text.

share|improve this answer
    
Is it possible to somehow install cleartype in ubuntu or any other linux distribution. Is there any port or at least something similar in that regard? –  Derfder Jun 13 '13 at 7:22
    
There should be some other way how to get ClearType on Linux –  Derfder Jun 14 '13 at 7:52
    
@Derfder, that's simply not possible. It's not even free (as in freedom) software. –  Fitoschido Jun 15 '13 at 10:38
    
My question is wrong. I try to reformulate. Is it technically possible or not? Ethical question is not what I am asking here. Just if ClearType could be emulated in Ubuntu or not. –  Derfder Jun 16 '13 at 11:14
add comment

Sorry, but I don't use Chromium. But as far as Firefox, to make the fonts look like in Windows, just click on Edit, and then Preferences

enter image description here

And then just make sure your font settings look like the images below.

enter image description here

enter image description here

Here is what I found, after doing research:

Most websites use "Cascading Style Sheets" to set fonts and many other layout features. Well-designed stylesheets will request a series of fonts so that, if one isn't available, an alternative is tried. Not surprisingly, most commercial sites design for Windows and often the developers don't think much, if at all, about how the site might render on other operating systems with the exception, perhaps, of Mac OS X.

You can tell Firefox to always use its own fonts in the Content dialog, but a better option is just to install the core fonts package. Often that's all you need.

That said, font rendering in Windows will always be slightly different from rendering in Ubuntu or other Linux platforms. Part of that has to do with intellectual property issues. Many commercial fonts are "hinted" to improve the display (anti-aliasing issues, for example); Linux often can't follow those hints because it would require the installation of proprietary technologies that require licensing.

You can also try installing other browsers like Chrome or Opera or, if you're using Kubuntu, Konqueror or rekonq.

Also you could try this:

Edit ~/.font.config and make sure it looks like the following

<?xml version="1.0"?><!DOCTYPE fontconfig SYSTEM "fonts.dtd">  
 <fontconfig>  
  <match target="font">  
  <edit mode="assign" name="rgba">  
   <const>rgb</const>  
  </edit>  
  </match>  
  <match target="font">  
  <edit mode="assign" name="hinting">  
   <bool>true</bool>  
  </edit>  
  </match>  
 <match target="font">  
  <edit mode="assign" name="autohint">  
   <bool>false</bool>  
  </edit>  
  </match>  
  <match target="font">  
  <edit mode="assign" name="hintstyle">  
   <const>hintslight</const>  
  </edit>  
  </match>  
  <match target="font">  
  <edit mode="assign" name="antialias">  
   <bool>true</bool>  
  </edit>  
  </match>  
 </fontconfig>  

Source:Change Web Browser Fonts in Ubuntu to Look Like Windows

share|improve this answer
    
Thanks, but the small fonts are still to wide on Ubuntu machine. I will add images in my question in 10 minutes. –  Derfder Jun 5 '13 at 19:11
    
I have updated my questino with an image how I see the content in Windows 7 and in Ubuntu 13.04 using Firefox. Any idea how can I have the same font in Ubuntu. Right now it's too "short" and too "wide" if it is Arial. –  Derfder Jun 5 '13 at 19:42
    
Any idea how to fix it so it looks like in Windows 7 and not so deformed like in Ubuntu? –  Derfder Jun 5 '13 at 19:54
    
I'm actually still looking into it. –  Mitch Jun 5 '13 at 19:55
    
Any idea what could be wrong? Could you make your screenshot of bild.de part where this happened to me? If you see it deformed or not. If not, which version of Ubuntu do you use? –  Derfder Jun 6 '13 at 8:27
show 9 more comments

You really can't count on every website visitor on every platform with every operating system having a pixel-perfect match in rendering your site. That's not how the world wide web works.

You can never know what the user has done with the default font DPI, smoothing/hinting/aliasing, browser zooming, or all the other wonderful things that it's perfectly fine for a user to change on their machine.

Look at this site: http://browsershots.org/

Do you know how they make a business out of showing you screenshots of one web page in dozens of different browser versions on four different operating systems? It's because every one of those might look a little different in some ways than any other one.

Get used to it.

If your layout breaks because the font proportions are a little different on one platform, you're doing web development wrong. Your job as a web developer isn't to make it look exactly the same everywhere. Your job is to make it functional and visually pleasant for every visitor, regardless of those differences.

If you try to force consistency too much, you'll end up with a page that breaks the aesthetic the visitor expects in their operating system or browser of choice. (For what it's worth, I really prefer the Ubuntu look that you're trying to prevent in your example.)

If you really want pixel-perfect consistency in defiance of the visitor's expectations and preferences, you can always become a Flash developer!

share|improve this answer
add comment

The OP is asking how to control the look of the fonts in the browser of a visitor to the site. I had earlier made some comments which I'm now moving into an answer.

The MS fonts for Linux are based on older versions of the fonts and are not the same as the current Windows versions, and it's not Ubuntu's Firefox but Mozilla's Firefox for Linux. (And which version number? Different versions may have differences in the rendering engine.)

A web designer really has very little control in the end on the fonts and sizes that are displayed in the client. You will end up driving yourself crazy and waste a lot of time if you focus too much on that.

Look for solutions for cross-browser scripting. There are a lot of good sites and articles online for free and many more even better books if you are able to buy one. Then test on as many different browsers on as many different platforms as you can.

Your realistic goal is that everything renders reasonably well, doesn't break your layouts, and that your scripts work, not that the pages look exactly the same on different platforms.

share|improve this answer
add comment

You can try making changes to /etc/fonts/conf.avail/51-local.conf .
Adding hinting,antialias, hintstyle might be able to solve the difference of appearance in libre office , firefox , chromium e.t.c.

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>    

  <!-- settings go here -->

</fontconfig>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.