Search code examples
htmlcssbuttonfont-faceplaceholder

How do you apply a custom font family for placeholder, textbox & button?

I want to use a custom font from my computer for placeholder and button.

My @font-face.

@font-face {
        font-family: customfont2;
        src: url(Font/otf/segment14.regular.otf);
        }

I was doing a Dec/Bin/Hex converter

 <div id="decimal">
 <input placeholder="Type Decimal Here">
 <button>Convert Decimal</button>
 </div>
Solution

  • For button, you just need something like:

    button{ 
    font-family: customfont2;
}

    For placeholders, you can try the selectors below:

    ::-webkit-input-placeholder { /* Edge */
  font-family: customfont2;
}

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

::placeholder {
  font-family: customfont2;
}

    More about the ::placeholder selector