After installing MS fonts, the fonts are still not the same as on windows

Question

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):

Answer 1

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.

Answer 2

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

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

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}

Answer 3

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!

Answer 4

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.

Answer 5

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>