2

Para un proyecto con Vuejs estoy utilizando Bootstrap. Quiero que todo el texto utilice una fuente determinada, digamos Arial, y me gustaría definirlo en un lugar único.

Dado que toda la aplicación cuelga de un <div id="#app"> genérico, se me ocurre decir lo siguiente en mi fichero css:

#app {
    font-family: Arial;
}

Sin embargo, en otros lugares veo que se puede definir con:

@font-face {
    font-family: Arial;
}

Lo probé pero hay lugares donde no funciona, incluso poniendo !important al final.

Y en otros veo que podría decir:

body {
    font-family: Arial;
}

¿Cuál de ellos es el "correcto"?

1 respuesta 1

1

@font-face lo usas para traer una fuente, desde un cdn o un fichero local, un ejemplo sería así:

@font-face {
  font-family: "MyHelvetica";
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Con esto creas una familia que se llama MyHelvetica. Puedes crear varias familias diferentes. Después en el body dices qué familia usar, así:

body {
    font-family: "MyHelvetica";
}

Si quisieras aplicar un tipo de fuente distinto a un elemento en concreto, lo usarías con el selector correspondiente. "body" es un selector al igual que "#app", etc.

Arial ya viene integrada por lo que no tienes que importarla de ningún lado, eso lo usas cuando son fuentes externas. fonts.googleapis.com tiene un montón.

Sobre lo de !important, se usa cuando aplicas a un mismo elemento dos atributos distintos, y quieres que uno prevalezca por los demás. No se debe abusar de !important, lo correcto es cargar los ficheros css en el orden adecuado.
Por ejemplo, si el bootstrap.css tiene ciertos estilos, pero tú quieres modificarlos, deberías primero cargar el bootstrap.css en head del html y en la siguiente línea cargar tu propio fichero.css sobrescribiendo las clases de bootstrap que quieras cambiar.

9
  • vale de hecho no es Arial sino Roboto, que no sé si está en las fuentes por defecto
    – fedorqui
    Commented el 12 may. 2020 a las 15:05
  • 1
    no, Roboto hay que importarla. fonts.google.com/specimen/… haz clic donde pone "@import" y añade eso en la primera línea a tu css. @import url('fonts.googleapis.com/…); Luego la usas globalmente a todo el body (que alberga tu #app y hederdará este valor) así body { font-family: 'Roboto'; }
    – HackeMate
    Commented el 12 may. 2020 a las 15:27
  • Genial, gracias. No encontré donde pone "@import" pero añadiendo @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i'); me funcionó bien. Una duda: ¿cómo sabes qué fuentes vienen de serie y cuáles hay que importar?
    – fedorqui
    Commented el 13 may. 2020 a las 5:51
  • 4
    @fedorqui'SOdejadedañar' las "fuentes de serie" (no sé si sea el nombre correcto), son las que vienen instaladas inicialmente con el OS que trae el equipo en donde estés viendo el proyecto. Por ejemplo, si en tu pagina web usas la fuente Segoe UI, y la visitas desde un PC Windows, no necesitas importarla, pero, cuando la veas por ej, en un iPad, no va a cargar dicha fuente. Lo mismo pasa con las fuentes exclusivas de Apple, como Lucida Grande. Otro caso es la fuente Roboto propia de Google, no necesitarías importarla si únicamente la vas a usar en dispositivos Android. Commented el 14 may. 2020 a las 2:35
  • 1
    Wikipedia recoge varios listados donde puedes echar un vistazo: en.wikipedia.org/wiki/Category:Lists_of_typefaces Commented el 14 may. 2020 a las 2:40

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.