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>

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

use input::placeholder

pseudo element to style placeholder of input element

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@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;
}

<!-- language: lang-html -->

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

<!-- end snippet -->

Thanks guys, but I figured on my own

input[type="text"]
		{
		font-family: customfont4;
        background-color: rgb(0, 0, 0);
        color: rgb(255, 0, 0);
		}
input[type="button"]
		{
		font-family: customfont3;
		}
		
button {
font-family: customfont3;
height:28px;
font-size:12pt;
}
::placeholder {
  font-family: customfont2;
    color: rgb(255, 0, 0);
  {