tipo - tamaño de letra en css

Cambio de fuente-familia para el marcador de posición

Question

¿Es posible que el campo de entrada tenga una familia de fuentes y su marcador de posición sea otro?

He intentado cambiar la familia de fuentes para el marcador de posición de entrada con @ font-face ya definida en CSS pero no funciona

CSS

.mainLoginInput::-webkit-input-placeholder { 
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder { 
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

HTML

<input class="mainLoginInput" type="text" placeholder="Username"  />

¿Cómo puedo slove este problema?

Answer 1

Aquí está el uso completo de ::placeholder de ::placeholder pseudo-elemento:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
 color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
 color: pink;
}
:-moz-placeholder { /* Firefox 18- */
 color: pink;
}

Todos los marcadores de posición en Firefox tienen un valor de opacidad aplicado, por lo que para solucionar esto necesitamos restablecer ese valor:

::-moz-placeholder {
  opacity: 1;
}

Source

Answer 2

En caso de que alguien quiera los selectores de marcadores de posición para todos los navegadores:

.mainLoginInput::-webkit-input-placeholder {
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-ms-input-placeholder {
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

.mainLoginInput:-moz-placeholder {
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-moz-placeholder {
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

Answer 3

Lo encontré...

El prefijo para usuarios de Firefox 19+ es ::-moz-placeholder

Y el código se ve así.

.mainLoginInput::-moz-placeholder {
   font-family: ''myFont'', Arial, Helvetica, sans-serif;  
}

Answer 4

Simplemente asi

.mainLoginInput::placeholder{
     font-family: -Your font here-;
}

Answer 5

Use esto para soporte mayor del navegador:

HTML:

<input type="text" placeholder="placeholder text.." class="mainLoginInput" />

CSS:

.mainLoginInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
  opacity: 1; /* Firefox */
}

.mainLoginInput:-ms-input-placeholder { /* Internet Explorer 10-11 */
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

.mainLoginInput::-ms-input-placeholder { /* Microsoft Edge */
  font-family: ''myFont'', Arial, Helvetica, sans-serif;
}

Detalles link referencia