Question 168466 in Html Question posted in
Some basic documentation can be found here.

How do you apply a custom font family to HTML placeholders, textboxes & buttons?

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    use input::placeholder

    pseudo element to style placeholder of input element

    @font-face {
    font-family: 'mycustomfont';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2);
}
 
input,button{
  font-family:'mycustomfont';
}
input::placeholder{
  font-family:'mycustomfont';
  color:green;
}
    <div id="decimal">
 <input placeholder="Type Decimal Here">
 <button>Convert Decimal</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search