El problema es que no estás incluyendo la fuente en tu proyecto, por eso te funciona en el ordenador pero no en el teléfono. El problema con el siguiente código:
.font{
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
es que tu navegador busca las fuentes indicadas, bien porque las enlazas dentro de tu proyecto (cosa que no haces) o bien porque ya las tienes instaladas en tu ordenador (que es el caso). Como la tienes en tu ordenador, la ves bien; pero como no la tienes en tu teléfono móvil (y tus usuarios puede que no la tengan en su ordenador tampoco) verás la primera fuente válida.
Para solucionar esto, añade la fuente usando @font-face
, que puedes aplicar así:
@font-face {
font-family: <nombre-de-fuente-remota>;
src: <origen> [,<origen>]*;
[font-weight: <peso>];
[font-style: <estilo>];
}
En tu caso sería:
@font-face {
font-family: "Andale Mono";
src: url( <ruta-donde-tengas-la-fuente-online> );
}