Cómo incluir una fuente / tipografía en tu web

Una de las cosas que normalmente queremos hacer en nuestra web y se nos complica es cambiar las fuentes (o fonts, o tipografías) que se muestran en pantalla. Son ya varios años que esto cambió para hacerse algo bastante fácil y accesible a cualquier mortal, sin necesidad de mucho conocimiento de código.

Para muchas personas lo más fácil es usar Google Fonts, pero no es muy recomendable. ¿Por qué? Por dos razones principales para mi. Una es que hace que se ralentice la carga de tu página ya que necesita ir a buscar las fuentes a otro servidor y así poder mostrarlas; la otra es que además Google usará el hecho de que estás mostrando las fuentes que te ofrece para recabar (uuuuuna vez más) datos sobre la navegación que tus visitantes hacen en la web. Es decir, vale que nos estén sacando datos cada dos por tres pero no es como para ponérselo aún más en bandeja por darnos un servicio de esos que llaman gratuitos donde el producto eres tú.

La opción que presento aquí permite mostrar las fonts libres que quieras en tu web sin mucho problema de uso de recursos de tu servidor además que toda la info queda en casa. Además sin la necesidad de un plugin extra, porque igual acaba siendo una lata tener que cuidar de la actualización de cada uno de ellos, temas de seguridad, etc…

Nuestra amiga la ardilla de las fuentes: FontSquirrel

La página web www.fontsquirrel.com es una maravilla por muchas razones: vamos a encontrar fuentes 100% libres de uso comercial, vamos a poder descargarlas, instalarlas, utilizarlas, … pero además viene que con algunas opciones que la hacen única.

Por ejemplo el Font Identifier soluciona el dolor de cabeza que tenemos cuando se nos plantea la pregunta… ¿what the f***ont es la que aparece en esta imagen? Sólo arrastrando una imagen con la fuente en particular nos dará una serie de aproximaciones muy buenas.

Lo que nos interesa aquí es la parte de WebFont Generator: una herramienta para convertir nuestras fuentes a código web para utilizar directamente.

Para saber cómo funciona voy a hacer un pequeño fork del manual de Arturo García pensado para WordPress pero que igual puede ser aplicado de forma manual en cualquier web:

 

  • Para añadir nuestra fuente, que también podemos haber descargado previamente de la misma web, pinchamos en “Upload Fonts”, la subimos y marcamos la casilla de aceptación en la que declaras que tienes los permisos necesarios para utilizarla y pulsar en “Download your kit”. Te descargarás un archivo .zip. (Tip: ¿quieres encontrar buenas fuentes que van bien juntan? Nodo Común te lo pone fácil en esta entrada).

 

  • Al abrir la carpeta de los archivos verás algo similar a esto:<strong><a href="https://www.comunicacionabierta.net/wp-content/uploads/2017/06/download-font.jpg"><img class="size-full wp-image-2282 alignright" src="https://www.comunicacionabierta.net/wp-content/uploads/2017/06/download-font.jpg" alt="" width="411" height="170" /></a></strong>
    Para utilizar la fuente necesitarás los archivos de fuente más el .css. Además si pinchas en el demo.html creado podrás ver cómo instalarla con instrucciones en inglés y un ejemplo de toda la fuente.<code>Los 4 archivos de la fuente tendrás que subirlos a tu servidor, el css contiene el código que tendrás que añadir a tu web para que todo funcione correctamente.

 

  • Ya estás listo para subir los archivos a tu servidor. Para hacerlo necesitas acceder al panel de control de tu hosting o tener alguna herramienta para acceder por ftp.Te recomiendo que crees una carpeta en la raíz de tu sitio y que la llames “fuentes”. Ahí subirás los archivos de extensión de tipografía.

 

  • Ahora necesitas decirle a tu web qué tipografías tiene que mostrar y dónde puede encontrarlas. Eso lo haces con el código que encontrarás en el archivo css que descargaste junto con las fuentes.Si abres el css verás este texto:@font-face {
    font-family: ‘kollektifregular’;
    src: url(‘kollektif-webfont.woff2’) format(‘woff2’),
    url(‘kollektif-webfont.woff’) format(‘woff’);
    font-weight: normal;
    font-style: normal;}

Ese código presupone que vas a ubicar las tipografías en el directorio raíz de tu web pero te recomiendo que las coloques en la carpeta “fuentes”, tal como se explica anteriormente. Te ayudará a mantener todo más ordenado.

Por tanto tienes que hacer una pequeña modificación en el código. De forma que quede así:

@font-face {
font-family: ‘kollektifregular’;
src: url(‘https://tuweb.co/fuentes/kollektif-webfont.woff2′) format(‘woff2’),
url(‘https://tuweb.co/fuentes/kollektif-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

Lo que hemos hecho ha sido añadir la ruta dónde se encuentra la tipografía para que tu web la busque en el sitio adecuado, y con eso ya tienes el código listo para insertarlo en tu web.

¿Y ahora cómo hago para que se vea mi texto con esa fuente?

Tienes 3 opciones (desde WordPress):

  • Si tu tema tiene algún lugar donde añadir tu propio CSS, pégalo ahí. La mayoría de temas cuentan ahora con esta opción de live CSS.
  • Si tu tema no te da esa opción, deberías crear un child theme para no modificar los archivos originales del tema.
  • Si no puedes añadir tu propio css al tema y no sabes cómo crear un child theme, no te queda otra que añadir el código al archivo css de tu tema. Esta opción tiene varios problemas, cuando se actualice el tema puedes perder los cambios y además, puede que la fuente no se muestre correctamente ya que estarás sobre escribiendo otros ajustes que venían por defecto. Antes de hacer cambios sobre este archivo te recomiendo que guardes una copia del css original, por si acaso.

Para editar el css del tema puedes hacerlo desde tu panel de control si es que usas WordPress. Tienes que ir a “Apariencia > Editor” y bajar hasta encontrar el archivo style.css.

En ese archivo es donde tienes que pegar el código css que has modificado anteriormente.

 

Ya solo te queda un paso. En tu archivo css ya había unas fuentes predefinidas para mostrarse en cada elemento de la web.

Tienes que modificar algunas líneas del archivo css para que tu web sepa dónde tiene que mostrar tu nueva tipografía.

Por ejemplo, supongamos que quieres aplicar la fuente a los encabezados y que tienes el siguiente código por defecto en tu web:

/* Headings */
H1,h2,h3,h4,h5,h6 {font-family: ‘Arial’, sans-serif;}

Pues tendrías que cambiarlo para que deje de mostrar Arial en los encabezados y empiece a mostrar tu fuente, por ejemplo, si hubieras elegido Kollektif el código sería así:

/* Headings */
H1,h2,h3,h4,h5,h6 {font-family: ‘kollektifregular‘, sans-serif;}

Guardas los cambios y listo.

Si has hecho todo bien tu web empezará a mostrar tu tipografía en los lugares que hayas definido en el css.

 

Créditos: Imagen de Jeremy Keith.

Suscribirte
Notificación de
guest

8 Comments
lo más antiguo
lo más nuevo lo más votado
Inline Feedbacks
View all comments
Dj Zest
2 años hace

Este Article fue mencionado en brid-gy.appspot.com

BeStMaker
2 años hace

Cómo incluir una fuente / tipografía en tu web | Comunicación Abierta comunicacionabierta.net/2017/06/inclui…

BeStMaker
2 años hace

Este Article fue mencionado en brid-gy.appspot.com

Inés 💚
2 años hace

Este Article fue mencionado en brid-gy.appspot.com

MuchachaPájaro
2 años hace

Este Article fue mencionado en brid-gy.appspot.com

dddd
dddd
2 años hace

fffff

dddd
dddd
2 años hace

hoy es un buen dia para empezar

dddd
dddd
2 años hace

**hoy es un buen dia**

RELACIONADO

Cómo exportar un pdf en LibreOffice sin las líneas de grilla negra

"Seguramente ese problema ya lo ha tenido alguien antes y lo documentó". Gran frase que cuando toma cuerpo en la representación de poder resolver un problema que te acechaba hace tiempo se convierte en maravilloso maná. Uno de estos problemas venía siendo el poder exportar una hoja de LibreCalc (a.k.a. Excel) a pdf sin las feas líneas negras de la grilla. El el mismísimo foro de LibreOffice ya l…

Aplicar una regla de CSS a dos clases al mismo tiempo

Busco esto a cada rato así que me lo traigo aquí para acordarme y de paso compartirlo. Una forma de tener limpio el CSS y de paso lograr que haga lo que deseamos sin volvernos locos es poder aplicar una misma regla de CSS (o varias) a distintas clases. Lo que pasa es que tiene truqui porque no es sólo colocar una detrás de otra. La sintaxis es como sigue: .border-blue.background { ... …

Mostrar imagen destacada (Featured image) antes del contenido de una entrada (post)

En algunos temas de WordPress no se hace posible ver la imagen destacada en el cuerpo de la entrada, como por ejemplo en este mismo blog. Hace un tiempo cambié esa opción y cree la posibilidad gracias al siguiente post: Add Featured Image Before Content In Any Theme En mi caso sólo hizo falta sumarle este pedazo de código al functions.php dentro del child theme para no generar problemas en caso…