Not sure how I can reproduce this one in jsFiddle but I will try to explain the problem as best I can.
We are importing a purchased font into CSS:
@font-face {
font-family: 'ForoItalicRegular';
src: url('../Fonts/foro_italic/ForoIta-webfont.eot');
src: url('../Fonts/foro_italic/ForoIta-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/foro_italic/ForoIta-webfont.woff') format('woff'),
url('../Fonts/foro_italic/ForoIta-webfont.ttf') format('truetype'),
url('../Fonts/foro_italic/ForoIta-webfont.svg#Foro-ItalicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Then we apply that font to an input tag with a placeholder attribute:
.m_hdr_glb_search input { width:230px; margin:0; padding:13px 0px 12px 5px; text-overflow:ellipsis; background:transparent; color:#221b33; font-size:0.750em; font-family:ForoItalicRegular,Georgia,serif; border:none; }
Our website supports French so the problem text is showing up when French accented characters are introduced to the placeholder:
<input type="text" placeholder="Quartier, ville ou numéro">
Here is the result:
After careful inspection and some testing I have discovered that the accented "e" in the word "numero" is being degraded down the font stack to Georgia.
The only cause I can think of is that the accented character is not available in that size, but after more testing this is just not the case. I can size the imported font to any size in other tags (i.e. - div, p, span,etc) and the accented characters will not degrade to Georgia.
It only happens in the placeholder attribute of the input tag. I am able to reproduce in all major browsers.
Is this an oversight with the implementation of the placeholder attribute?