CODEWITHSUNDEEP
htmlcssfont-faceplaceholder
Artur Haddad
Artur Haddad

Reputation: 1529

How to use custom fonts on a input placeholder?

I am using custom fonts (@font-face), and they show up properly on my entirely application except on input placeholders.

The font is not showing up and the placeholder is blank.

The input font (when I type something) is working fine. Also, if I change the placeholder font for a system font (Arial, Tahoma...) it works too.

How can I use custom fonts for the placeholder?

Input:

<input placeholder="Search character" type="text" class="search-character">

CSS:

body { font-family: 'DIN', sans-serif; }
.search-character::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-family: 'DIN', sans-serif;
}
.search-character::-moz-placeholder { /* Firefox 19+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-ms-input-placeholder { /* IE 10+ */
  font-family: 'DIN', sans-serif;
}
.search-character:-moz-placeholder { /* Firefox 18- */
  font-family: 'DIN', sans-serif;
}
.search-character::placeholder {
  font-family: 'DIN', sans-serif;
}

Upvotes: 2

Views: 2209

Answers (2)

laptou
laptou

Reputation: 7039

Apply the font-family property to the ::placeholder pseudo-class.

input::placeholder
{
    font-family: Helvetica;
}

Also, note that input does not inherit font-family by default due to user-agent stylesheets; look at this snippet:

body
{
  font-family: Impact, Haettenschweiler;
}

input::placeholder
{
  font-family: Impact, Haettenschweiler;
}
<input type="text" placeholder="hello" />

The placeholder is styled, but the text is not.

Upvotes: 1

Dante Martins
Dante Martins

Reputation: 1

input::placeholder { 
 font-family: Arial;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: Arial;
}

input::-ms-input-placeholder { /* Microsoft Edge */
  font-family: Arial;
}

Upvotes: 0

Related Questions