1

Tengo un problema con la fuente que estoy utilizando para mi diseño (una mono-space que viene por defecto); pero cuando lo abro desde teléfono (en concreto desde iPhone) ésta cambia automáticamente, ¿hay alguna forma de cambiar esto?

Así es como uso la fuente en mi proyecto:

.font{
    font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
8
  • ¿Qué fuente es? ¿Cómo se agrega al proyecto? ¿Cómo se usa dentro del proyecto?
    – Alvaro Montoro
    Commented el 2 abr. 2016 a las 23:35
  • Hola @AlvaroMontoro es una Andale Mono que en el iphone me cambia a Helvetica la solución que he improvisado por el momento es prever el cambio de fuente y ajustar el diseño a éste.
    – Ivan Soler
    Commented el 3 abr. 2016 a las 14:12
  • ¿Cómo la incluyes en el proyecto?¿y como indicas en CSS que debe usarla para algún elemento?
    – Alvaro Montoro
    Commented el 3 abr. 2016 a las 14:53
  • Mediante "font-family:" y funciona como esperaba hasta que introduzco la url en el teléfono.
    – Ivan Soler
    Commented el 3 abr. 2016 a las 17:40
  • ¿Usas @font-face para incluirla en el proyecto?
    – Alvaro Montoro
    Commented el 3 abr. 2016 a las 17:41

1 respuesta 1

2

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> );
}
3
  • Entiendo, como a mi me salía por defecto no entendía que quizás a otros no. Muchas gracias :)
    – Ivan Soler
    Commented el 3 abr. 2016 a las 17:54
  • Te recomendaría que la incluyeras en el proyecto, así todos los usuarios tendrán una misma experiencia, en lugar de algunos usuarios ver la página con una fuente y otros usuarios verla con otra fuente diferente
    – Alvaro Montoro
    Commented el 3 abr. 2016 a las 17:56
  • Precisamente estoy haciéndolo ahora, cada día aprendo cosas nuevas
    – Ivan Soler
    Commented el 3 abr. 2016 a las 17:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.