Page 1 of 1

Cross-Server Text Rendering

PostPosted: 07. March 2015 21:16
by ben1960
My website is hosted by Netfirms. I have a collection of web pages that display text differently on the Netfirms server than they do on my localhost.

My localhost is XAMPP 1.7.7 running on 32 bit Windows Vista. I am using this older version of XAMPP because it is a closer match for the configuration of the Netfirms server than the latest version of XAMPP.

I have tested this collection of web pages in Chrome 41, Firefox 36, Internet Explorer 9, Opera 27, and Safari 5.1.7. This collection of web pages uses embedded fonts from Font Squirrel. This collection of web pages uses Alegreya for its serif font, Candela for its sans-serif font, and Voltaire for its display font.

In Firefox and Internet Explorer, the default CSS "line-height" for Alegreya on the Netfirms server is taller than on my localhost. I resolved this issue by setting the "line-height" of "p" tags to "1.4em."

In Firefox, Internet Explorer, Chrome, and Opera, Alegreya bold is wider on the Netfirms server than it is on my localhost. With Safari for Windows, the width of Alegreya bold is the same with both servers.

Does anybody know how to make Alegreya bold display with the same character width on both servers?

Re: Cross-Server Text Rendering

PostPosted: 07. March 2015 21:32
by Nobbie
ben1960 wrote:Does anybody know how to make Alegreya bold display with the same character width on both servers?


For a perfect match of fonts and sizes you will NEVER succeed in using HTML. You should pre-generate PDF Files and deliver these. Anything else wont work.

Re: Cross-Server Text Rendering

PostPosted: 08. March 2015 07:41
by ben1960
I was able to standardize the appearance of embedded Alegreya bold across Chrome 41, Firefox 36, Internet Explorer 9, and Opera 27 with this CSS:

Code: Select all
p b {
  letter-spacing : 0.05em;
}


The width of Alegreya bold is still different with the Netfirms server than it is with my localhost. However, the above CSS has resulted in Alegreya bold looking the same in all four browsers when the pages are viewed on the same host. This means that the line breaks in paragraphs now take place between the same words in all four browsers.

Does anybody know how to make XAMPP render Alegreya bold the same way that the Netfirms server does?