How to Get Font to Display Properly in All Browsers

How to prevent different browsers rendering fonts differently?

Browsers, by and large, have different font rendering engines/methods. For more details, I recommend reading this, this, and/or this.

Honestly, to the average user, the difference will not be all that noticeable and for the most part, pixel-perfect cross-browser display of anything has been long abandoned as a print-world aftereffect.

If, for some masochistic reason, pixel perfection is more important than sanity and maintainable code, you can try the old standy-bys (text-in-images, image/text replacment) or turning off subpixel rendering via CSS (although not all browser support it, and the text will be less readable).

Hope that helps.

How can I determine what font a browser is actually using to render some text?

The FontFinder plugin for Firefox does exactly what you want. After installing, highlight a block of text, right click and go to FontFinder -> Analyze Selection. It will tell you the actual font being used as well as a other information like font-family, spacing, color, etc.

---

Note that per Wilfred Hughes' answer, Firefox now supports this natively. This article has more details.

Why the font that display on the browser is different with my visual web developer?

Short answer: because visual web developer 2010 express is not a browser, and doesn't use the same text shaping and rendering pipeline that modern browsers will be using.

If you want accurate, modern text shaping, matching what the browser does, then using a five year old software package is not the way to go: the first step towards a better solution is to stop using the mostly obsolete 2010 version of visual studio express, and start using community 2015, or at the oldest, express 2013.

And related to that: once you've updated, stop using 1999's XHTML, and move onto the modern HTML5 format instead. Trying to force modern concepts onto very old markup is another way to get unpredictable and often subtle --but somethings glaringly-- wrong results.

So, let's get the CSS right: font families with special characters must be quoted, so your family name with spaces needs quotes:

@font-face {
  font-family: "AvenirNext LT Pro Regular";
  src: url(...);
}

And then when you use that font anywhere else in your CSS, the same rules apply:

p.fancy {
  font-family: "AvenirNext LT Pro Regular";
}

And let's get the HTML right, too: leave as much as you can to the browser. Instead of those ASP properties, use a real HTML button with a runat property:

<button runat="server" id="Button1" class="fancy">
  I love you
</button>

And let the CSS deal with the styling properly.

How to show a particular font on client's computer

You can use CSS embedded fonts:

http://randsco.com/index.php/2009/07/04/p680

http://www.netmechanic.com/news/vol3/css_no15.htm

Related:

How to embed fonts in HTML?

---

Related Topics