Font face not being consistent

[DarkxPunk]

Hey everyone,

 

So here are two sites:

http://www.beta.sunburstrarediamonds.com

http://www.sunburstrarediamonds.com

 

Now the specific issue lies where you see "1-844-RAREGEM". The beta one displays thicker than the non beta one, they are styled exactly the same (beyond their colour), but they do not display the same. I can't figure out why...

 

Hope someone has an idea,

Thanks.

[newseed]

You beta page is using a h2 tag which is bolded by default. If you must use an h2 tag or any of the other similar tags then apply font-weight: normal; to it

[DarkxPunk]

Even though I have played with the font-weight with no results I have even made the text on the beta page to be wrapped in an anchor tag like it is on the non beta page. As you can see even with that, and the addition of font-weight: normal; the appearance is the same as the h2, but not the same as the non beta one.

 

Thanks for the help though.

[newseed]

Via using my Firebug tool, I was able to get it to look the same thus using font-weight: normal in the h2 element.

[dsonesuk]

Two things i noticed

beta

I have a 'no script addon', which disables JavaScript, and on startup the font must be set to browser default, as i get popup to enable js, when i do it proceeds to show the correct font.

the font shown to be used is font-family: "LilyUPC";

non beta (home page- top right )

Does not shows font used, when you select element anchor, i expect it to show the font-family: even if it is set in the upper hierarchy elements of body, or the container it is in #tollfree.

If you inspect #tollfree it shows font-family: LilyUPC-Regular,arial,helvetica,sans-serif; but for some reason the anchor does not pick this up.

[DarkxPunk]

Via using my Firebug tool, I was able to get it to look the same thus using font-weight: normal in the h2 element.

How come then the anchor does not look the same… As mentioned also I did apply the font-weight normal...

 

Two things i noticed

beta

I have a 'no script addon', which disables JavaScript, and on startup the font must be set to browser default, as i get popup to enable js, when i do it proceeds to show the correct font.

the font shown to be used is font-family: "LilyUPC";

non beta (home page- top right )

Does not shows font used, when you select element anchor, i expect it to show the font-family: even if it is set in the upper hierarchy elements of body, or the container it is in #tollfree.

If you inspect #tollfree it shows font-family: LilyUPC-Regular,arial,helvetica,sans-serif; but for some reason the anchor does not pick this up.

Okay thats a good bit of info, but how does it solve the problem… Does font-face require javascript? The non beta page should show the font as well, it does on my end and every other computer/browser I have tested on. So why the inconsistency?

[dsonesuk]

Ok! just did retest, its not javascript block, it lists as script 0, object 1 this must relates to loading of font face.

and the reason you don't see font-family listing for the anchor, is because you have font: inherit set here

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    border: 0 none;    font: inherit;    margin: 0;    padding: 0;    vertical-align: baseline;}

I never use inherit as it was not compatible for older IE versions, so never bothered using it. I just assign default font-family for body and all it child elements would use this.

 

You are using a different font, LilyUPC-Regular, compared to LilyUPC, I tried using firebug to change these but nothing happens, its because there is problem loading regular font when required, as when i use web developer addon to change font to match, and use

@font-face {    font-family: 'LilyUPC-Regular';    src: url('../fonts/LilyUPC-Regular.eot');    src: url('../fonts/LilyUPC-Regular.eot?') format('embeded-opentype'),         url('../fonts/LilyUPC-Regular.woff') format('woff');    font-weight: normal;}

(also font-color and background color as white on black might show as different to the eye, compared to colours used on non beta), you can save and reload the page and these stay fixed, it shows up as identical.

[DarkxPunk]

Ok! just did retest, its not javascript block, it lists as script 0, object 1 this must relates to loading of font face.

and the reason you don't see font-family listing for the anchor, is because you have font: inherit set here

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    border: 0 none;    font: inherit;    margin: 0;    padding: 0;    vertical-align: baseline;}

I never use inherit as it was not compatible for older IE versions, so never bothered using it. I just assign default font-family for body and all it child elements would use this.

 

You are using a different font, LilyUPC-Regular, compared to LilyUPC, I tried using firebug to change these but nothing happens, its because there is problem loading regular font when required, as when i use web developer addon to change font to match, and use

@font-face {    font-family: 'LilyUPC-Regular';    src: url('../fonts/LilyUPC-Regular.eot');    src: url('../fonts/LilyUPC-Regular.eot?') format('embeded-opentype'),         url('../fonts/LilyUPC-Regular.woff') format('woff');    font-weight: normal;}

(also font-color and background color as white on black might show as different to the eye, compared to colours used on non beta), you can save and reload the page and these stay fixed, it shows up as identical.

 

Okay I am still confused. Let me re-explain what I see on my end. I will preface with I am using Safari on a Mac, this could be why we are not seeing eye to eye, this issue also persists on iOS devices. Regardless the issues you are bringing up are not really issues. First off regardless of being "inherit" or not on the anchor displayed on the non beta site, the font still loads, the font also loads on the beta site too, but it does not display the same. The non beta site displays thinner while the beta site remains kinda fat. Now using whichever tool you wish if you go style by style they are nearly identical to each other both the h2 and anchor on the beta site and the anchor on the non beta site. So with why the inconsistency? In regards to the concern over being a different font, it is not. The only difference actually is the name. I have the original TTF from the non beta site and just converted it using font squirrel to give me all the different web formats, in turn the fonts were also renamed. So they are the same font to be clear.

 

From all my playing, following all your guys tips and pointers, they have no effect on how the font is displaying on my end. I hope someone has something cause this issue is really starting to annoy me. (The reason for all this is I am recording the site to help speed it up and such, but if I can't even get the stuff to display the same, it is useless.)

 

Thanks again for any further help.

[dsonesuk]

????????????????? YOU ARE USING A DIFFERENT STYLING OF THE SAME FONT ON DIFFERENT PAGES

 

Lily UPC

LilyUPC-Regular is different from LilyUPC there will be inconsistency, WHY? because they are different styling of the same font.

 

http://font.downloadatoz.com/font,70001,lily-upc.html

http://font.downloadatoz.com/font,147852,lily-upc-regular-af.html

 

do they look the same NO! because they are the same font but different style, like bold is different from italic. got it!

 

Lily UPC = LilyUPC-Regular = NOT THE SAME

Edited July 19, 2014 by dsonesuk

[DarkxPunk]

I understand there may be two different fonts available on the web, but what I am trying to say is both the beta font and non beta are the same. They came from the exact same ttf that I have (the ttf that I have is not a suitcase with different styles, it's one singular font), the sole difference is changed the name. I know this cause I did it. Even to make things simpler I even did a test (locally) by copying the non beta ttf form the site, renaming it accordingly and placing it on the beta page with the exact same results. Please understand I am not trying to be difficult, I just know what I did... One last thing, when testing the display issue on all other browsers beside safari and iOS, the fonts display the same, meaning it's a styling issue (I have not found) that affects safari...

[newseed]

As strange as it may seem but when I use certain fonts, some display just fine for one browser and not another. In other cases it displays fine on one server but not on another.

 

In saying, you may need to look into the server set up. Firstly, see if all the mime types are set for each font type. Secondly, I work on a Windows server often and I noticed that the font displays just fine for Firefox but for some reason it would not for IE. The solution was to apply a code snippet into the web.config file to tell the browser to recognize the .woff format.

 

Another note is that not all fonts are the same. Again, on a Windows server, I noticed that some fonts do work regardless which browser I use but I discovered that some fonts were not correctly developed by the author thus causing the problem of not displaying correctly. Again, the solution was the web.config cod snippet. If using PHP then you will probably use .htacess.

 

Also, if you open both of your font.csss file and compare that one of the font's code (other than the name of the font) differ from the other.

 

And finally, why in the world would you want to rename any font if you are wanting to display the same one?

Edited July 19, 2014 by newseed

[DarkxPunk]

As strange as it may seem but when I use certain fonts, some display just fine for one browser and not another. In other cases it displays fine on one server but not on another. In saying, you may need to look into the server set up. Firstly, see if all the mime types are set for each font type. Secondly, I work on a Windows server often and I noticed that the font displays just fine for Firefox but for some reason it would not for IE. The solution was to apply a code snippet into the web.config file to tell the browser to recognize the .woff format. Another note is that not all fonts are the same. Again, on a Windows server, I noticed that some fonts do work regardless which browser I use but I discovered that some fonts were not correctly developed by the author thus causing the problem of not displaying correctly. Again, the solution was the web.config cod snippet. If using PHP then you will probably use .htacess. Also, if you open both of your font.csss file and compare that one of the font's code (other than the name of the font) differ from the other. And finally, why in the world would you want to rename any font if you are wanting to display the same one?

Well as mentioned before the only discrepancy is between the beta / non beta on safari and iOS devices. They are also on the exact same server, and the server is a Linux and the mime types are set. Now the reason why the code differes is I used the font squirrel system to give me all the web formats. The reason I renamed it was simply my own preference to how I want it to look cleaner (I know I shouldn't but meh...) So in summary, the problem must be a styling somewhere or some other oddity. I am probably gonna start from scratch again and redo the font squirrel stuff and hope for the best. (this is such a pain).

[DarkxPunk]

So to compound the confusion I decided to redo it from scratch, and no results. Then I decided to take the exact font from the original page (not converted or anything), and apply it to the beta page. It displays differently. ITS THE EXACT SAME FILE… Now I am really getting confused and annoyed… Any ideas are appreciated. You can check the beta and non beta pages as I have updated the beta page.

 

Even more oddities: http://www.sunburstrarediamonds.com/index232.php displays different. It is exactly the same the styling and almost the code! I am so confused, my brain hurts.

Edited July 20, 2014 by DarkxPunk

[newseed]

After review the two font.css files, they are still quite different.

 

http://www.beta.sunburstrarediamonds.com/

@font-face {

font-family: 'lilyupc';

src: url('LilyUPC-Regular.eot?') format('embedded-opentype'),

url('LilyUPC-Regular.woff') format('woff');

}

@font-face {

font-family: 'lilyupc2';

src: url('lilyupc_regular.eot');

src: url('lilyupc_regular.eot?#iefix') format('embedded-opentype'),

url('lilyupc_regular.woff') format('woff'),

url('lilyupc_regular.ttf') format('truetype'),

url('lilyupc_regular.svg#lilyupcregular') format('svg');

font-weight: normal;

font-style: normal;

}

 

http://www.sunburstrarediamonds.com/home.php

@font-face {

        font-family: 'LilyUPC-Regular';

        src: url('../fonts/LilyUPC-Regular.eot');

        src: url('../fonts/LilyUPC-Regular.eot?') format('embeded-opentype'),

                url('../fonts/LilyUPC-Regular.woff') format('woff');

        font-weight: normal;

}

I suggest you review them line by line to make sure they are identical for both. Also, make sure that both are using the exact fonts. Don't assume that the font in one folder is the same as the other. The best way to make certain you don't have any duplicates is to get rid of ALL the fonts, font.css files so you can have a clean slate. You would then regenerate the font via Font Squirrel. Upload the font package to both beta and main site. Don't rename or change anything.

 

Now if by chance you are able to reproduce the problem then you will need to explore what is different between the main and beta site. For one, you have other css files listed. I would start with the reset.css file by disabling that. Just keep working your way thru it until you are able to see both sites the same. Keep in mind that both sites are not the same. The beta is pretty bare bone while the main site is not.

 

Hint: You might duplicate the main site and set it up on a beta2 domain so you don't have to touch the live site.

 

The solution is there but you must make certain that both sites are seeing the same files.

[DarkxPunk]

After review the two font.css files, they are still quite different. http://www.beta.sunburstrarediamonds.com/ @font-face { font-family: 'lilyupc'; src: url('LilyUPC-Regular.eot?') format('embedded-opentype'), url('LilyUPC-Regular.woff') format('woff');}@font-face { font-family: 'lilyupc2'; src: url('lilyupc_regular.eot'); src: url('lilyupc_regular.eot?#iefix') format('embedded-opentype'), url('lilyupc_regular.woff') format('woff'), url('lilyupc_regular.ttf') format('truetype'), url('lilyupc_regular.svg#lilyupcregular') format('svg'); font-weight: normal; font-style: normal;} http://www.sunburstrarediamonds.com/home.php@font-face { font-family: 'LilyUPC-Regular'; src: url('../fonts/LilyUPC-Regular.eot'); src: url('../fonts/LilyUPC-Regular.eot?') format('embeded-opentype'), url('../fonts/LilyUPC-Regular.woff') format('woff'); font-weight: normal;}I suggest you review them line by line to make sure they are identical for both. Also, make sure that both are using the exact fonts. Don't assume that the font in one folder is the same as the other. The best way to make certain you don't have any duplicates is to get rid of ALL the fonts, font.css files so you can have a clean slate. You would then regenerate the font via Font Squirrel. Upload the font package to both beta and main site. Don't rename or change anything. Now if by chance you are able to reproduce the problem then you will need to explore what is different between the main and beta site. For one, you have other css files listed. I would start with the reset.css file by disabling that. Just keep working your way thru it until you are able to see both sites the same. Keep in mind that both sites are not the same. The beta is pretty bare bone while the main site is not. Hint: You might duplicate the main site and set it up on a beta2 domain so you don't have to touch the live site. The solution is there but you must make certain that both sites are seeing the same files.

I completely understand they are not the same line by line, but I know the fonts are the same because I decided to copy and paste the exact fonts over and limit it to just fonts that are on the main site, as you can see.The real kicker is this: Even more oddities: http://www.sunburstr...om/index232.php displays different. It is exactly the same the styling and almost the code! I am so confused, my brain hurts.It may not be the complete site, but it consists of the main elements. Still displays differently. Please not that is on the main site just in a different file, linking to the main sites css files and fonts. I will do a exact duplicate and test, but there is no reason that link displays differently.

[newseed]

For sake of trying to solve your problem, let's not assume that one set of fonts are the same as the other. Upload the same fonts and font.css files to both main and beta sits. Don't take anything for granted.

 

As I said before, you can dup your main live site and install it onto another sub-domain.

[newseed]

...in addition to my last post a minute ago, make sure that the order of the linked css file are the same. On one you have fonts.css and then default.css. The other is ordered default.css and then fonts.css.

[DarkxPunk]

Okay so… I found what is causing it… The background image having the following properties:

 

img.bg {

position: fixed;

z-index: -999;

}

How the H E DOUBLE HOCKEY STICKS does this effect the thickness of the text? I have tested it through and through and it is the cause… HOW??? I am so blood confused...

You can test it by simply removing the img from the main site… It thickens… You put it back, it thins out. If you go deeper and just remove either the z-index or the position fixed it thickens… What?

Hope someone has an idea...

[EDIT] So http://css-tricks.com/forums/topic/position-fixed-font-weight-is-thinner-new-safari-6-1/ yeah, this is a pain. Now to test outside of Mac OS X Lion… But why iOS too? Will keep y'all updated.

[EDIT 2] So it is a bug in iOS too, or just how Apple wants it to display. Position absolute fixes it kinda, idk about how to apply it yet. If anyone has a fix I am all ears.

[EDIT 3] So the fix appears to be the following: -webkit-font-smoothing: subpixel-antialiased; This seems to help all my fonts display consistently across browsers, except iOS which seems to actually thin ALL web font. So I guess I found a fix… but still a huge pain...

Edited July 21, 2014 by DarkxPunk