Text Rendering On Different Servers

[ben1960]

I am having a problem with an embedded font called "Alegreya Bold."

My localhost is XAMPP 1.7.7 running on Windows Vista.

This font is wider on the sonic.net server than it is on my localhost.

On my localhost this font looks the same in Chrome and Firefox. On the sonic.net server this font is wider in Chrome than it is in Firefox.

Here is a link to screen-shots of a web page that uses embedded Alegreya Bold. These screen-shots compare the appearance of the page in Chrome and Firefox, on my localhost and on the sonic.net server.

http://ben1960.users.sonic.net/embedded ... -shots.zip

Does anybody know how resolve this issue?

[virtualmike]

The browser does the rendering, based on what has been sent to it from the server.

Most likely, there's a tiny difference between the files at the two sources, either in the HTML or the CSS. Try doing a "view source" on the pages and comparing the HTML, or comparing the CSS. The Web Developer extension (for both FFx and Chrome) has a great tool for revealing the CSS.

[ben1960]

Thanks for getting back to me, virtualmike.

The files on the Sonic.net server were uploaded from my localhost's "htdocs" folder. If there is a difference between the files on my localhost and the files on the Sonic.net server, the files I uploaded were altered while being uploaded.

[virtualmike]

Or possibly the files are getting modified during download, perhaps even by a service on your computer that does something with inbound Internet traffic. The only way to tell is to inspect the files in the browsers to see what they received and make comparisons.

[ben1960]

I downloaded my "public_html" folder via FTP. Then I used a program called "UltraCompare" to test for differences between the files downloaded from the Sonic.net server and the files in my htdocs folder. There are significant differences in the sizes of most of the files. Here is a link to the report from UltraCompare.

http://ben1960.users.sonic.net/compare-files.txt

My FTP client is FileZilla 3.10.2.

[virtualmike]

Most likely, those differences are due to the difference in line endings between Unix and Windows. The former uses a single <LF> to mark a line end, while the latter uses <CR><LF> at the end of each line.

Try running UltraCompare again, but tell it to ignore line endings and white space, and see what results you get.

Then, open the page on the server in Chrome and Ffx and save the HTML and CSS, then open the page from your localhost in Chrome and Ffx and save the HTML and CSS. Run UltraCompare against all of those, but again, tell it to ignore line endings and white space. Does this reveal any differences?

[ben1960]

When I included external style sheets via @import and saved a web page in Chrome or Firefox, the external style sheets did not get saved. When I replaced @import with <link> external style sheets are saved in Firefox, but not in Chrome.

What steps do I need to take in order to save external style sheets in Chrome?

[virtualmike]

What steps do I need to take in order to save external style sheets in Chrome?

I use the Web Developer extension to view and save CSS from both Ffx and Chrome.

[ben1960]

Thanks for helping me out, virtualmike.

Including external style sheets via <link> instead of @import resulted in text looking the same on the Sonic.net server as it does on my localhost.

[virtualmike]

You're welcome, Ben. Glad I could give you a path to resolution.