Saltar al contenido

Visor

Incorporar fuentes externas a la web

Tipos de fuentes distintos según necesidades

En EducaMadrid podemos incorporar más tipos de fuentes a parte de las que nos ofrece el diseñador web por defecto.

En realidad, podemos escribir nuestro propio código CSS completando el CSS que ya genera de por sí el diseñador web.

En este tutorial se explica muy clarito cómo funciona esto de las fuentes y el código CSS que habría que escribir para incorporar una fuente a una web.
Pues bien, todo aquello que podamos hacer a través de código CSS lo podemos aplicar a EducaMadrid sin problemas.

-- Una opción sencilla consiste en usar las fuentes de Google Fonts

Simplemente seguir estos pasos:

  • Acceder a Google Fonts
  • Seleccionar la fuente que queramos
  • En la parte inferior se mostrarán las fuentes que tengamos seleccionadas, si pulsamos, vemos el detalle
  • Seleccionamos el código @import y copiamos la línea entre los atributos <style> y </style>
    Sería algo así @import url('https://fonts.googleapis.com/css?family=Oswald'); para el tipo de letra Oswald
  • Copiaríamos esa línea en la pestaña de "Avanzado" del diseñador web como código CSS adicional para nuestra página
  • Ya tenemos la fuente importada, ahora tenemos que decidir a qué aplicársela y para ello también hay que escribir CSS.
    • Podemos aplicársela a toda la web: Que todo el texto del body de mi web vaya en esa letra. Para ello escribiríamos en esa misma pestaña "Avanzado" del diseñador web este código
      body.green{
           font-family: 'Oswald', sans-serif;
      }
    • O por ejemplo aplicarla por trozos

@import url(https://fonts.googleapis.com/css?family=Nova+Mono);


body {font-family: 'Nova Mono' !important;}
.blue wrapper {font-family: 'Nova Mono' !important;}
p {font-family: 'Nova Mono' !important;}
h1 {font-family: 'Nova Mono' !important;}
h2 {font-family: 'Nova Mono' !important;}
h3 {font-family: 'Nova Mono' !important;}
* {font-family: 'Nova Mono' !important;}    

    • Podemos aplicársela sólo a un determinado contenido, escribiendo código CSS en línea con el HTML, por ejemplo para aplicarle la fuente Oswald a un determinado párrafo de mi contenido, puedo editar el html e incluir este código
    • <p style="font-size:18px; font-family:Oswald;">  Mi texto </p>
  • Y de esta forma podríamos ir variando los tipos de letra que se van mostrando dentro de un contenido.

-- Otra opción es descargar una fuente de cualquier otro sitio:

  • Descargar el fichero de la fuente y subirlo al directorio de ficheros para que tenga una dirección url válida
  • Usar este código CSS en el diseñador web

/*@font-face {
font-family: fuente;
src: url(https://www.educa2.madrid.org/web/educamadrid/principal/files/addc3be3-eb51-4cd6-94cd-52304d0f6dd8/fuentes/Knewave-Regular.ttf);
}

  • Y aplicarla usando este código (que lo aplicaría a todos los elementos de la web, gracias al *):
    * {font-family: fuente !important;}