Home/ Questions/Q 8518231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T05:55:28+00:00

Not sure how I can reproduce this one in jsFiddle but I will try

  • 0

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:

enter image description here

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Turns out Font Squirrel generator was not configured properly when the web font files were being generated.

    The following Font Squirrel options must be selected in order for the correct language glyphs to be generated:

    Click on the Custom Subsetting radio buton and selected the following options:

    Character Encoding: Mac Roman

    Character Type: Selected all checkboxes in this section

    Language: English, French, etc.

    I replaced my old web font files with the newly generated web fonts and the French characters showed up no problem.

    • 0