Hace años sólo estaban permitidas instalar en tu web una lista de Fuentes Seguras mediante código. Esto significa que un grupo de tipografías podían ser utilizadas en cualquier web sin posibilidad de tener algún problema o error.

¿Por qué tengo errores en la tipografía de mi web?

Bueno, vamos a plantearte el caso de que finalmente consigues elegir una tipografía específica para tu web que esté acorde con la imagen de la marca o servicio. El usuario que entre en tu web y no tenga tu fuente instalada en su ordenador, no podrá ver esa tipografía y el ordenador utilizará otra diferente a la que habías elegido. No seguirá una concordancia visual.

Hosting Web

El diseño de la web se acabaría perdiendo por completo porque la tipografía tiene muchos aspectos que influyen visualmente a la web. Algunos de estos aspectos son:

  • Tamaño
  • Grosor
  • Familia
  • Tracking

Características de una Fuente Segura

  1. Se mantienen en todos los buscadores.
  2. Se mantienen en todos los sistemas operativos.
  3. Tienen una buena legibilidad.
  4. Se agrupan por familias.
    (Ejemplo: añadiendo al código Sans Serif o Serif. De esta manera, en caso de confusión, el sistema elegirá una sustituta pero de su misma familia.)

Fuentes Seguras

Algunas de las fuentes seguras:

  • Arial
  • Courier New
  • Georgie
  • Impact
  • Lucida
  • Tahoma
  • Times New Roman
  • Verdana

Tipografías Google Fonts

Por suerte, hoy en día existen diversas opciones con las que podemos incluir una gran variedad de tipografías sin necesidad de tocar código. Desde el 2010, una de estas opciones es añadir tipografías desde Google Fonts.

Google Fonts es el repositorio oficial de Google y proporciona un enorme catálogo de tipografías que puedes descargar gratis e utilizar libremente para lo que quieras.

La elección de la tipografía puede variar desde ser:

  • Sans Serif
  • Serif
  • Handwriting,
  • Monospace
  • Display

Tipos Google Fonts

Añadir fuentes Google Fonts en WordPress con plugins

Existen varios plugins para instalar Google Fonts en tu WordPress, pero vamos a ver los más conocidos:

  1.  Easy Google Fonts
  2. Google Fonts Typography
  3. Use Any Font

 

1. Con el plugin gratuito Easy Google Fonts

Con este plugin podrás añadir  la tipografía de Google Fonts a tu web. Te explicamos su configuración:

 Easy Google Fonts

 

  1. Lo instalamos y activamos en nuestro Backoffice de WordPress.
  2. Entramos en su configuración.
    Configuracion Easy Google Fonts
  3. Deberás crear un Control de fuentes (etiquetas HTML para que se muestre la tipografía).Configuracion Easy Google Fonts
  4. Añadimos los selectores de Css a los que queremos que afecte el cambio de tipografía.
    Configuracion Easy Google FontsNosotros hemos escogido los títulos pero también puedes utilizar la etiqueta “font-family” para todo tipo de textos.
  5. Una vez creado el control de fuentes, deberás entrar en el Personalizador de Temas que tengas activo.
  6. Si quieres añadir más estilos, recuerda que tienes la opción de añadir código Css en el Personalizador del tema.
  7. Ajusta las tipografías en Tipografía del tema:
    Configuracion Easy Google Fonts
  8. Observa las tres pestañas existentes debajo de “Prueba”; Estilos, Aspecto y Posicionamiento. Puedes editar las tres a tu gusto para conseguir es estilo que quieras.

2. Con el plugin gratuito Google Fonts Typography

 Podrás añadir  la tipografía de Google Fonts a tu web. Es un plugin Freemium así que siempre vas a tener la opción de actualizar a Pro.

Hosting Web

Configuración Google Fonts Typography

  1. Instala y activa el plugin.
  2. Los ajustes los tendrás en el Personalizador del tema que tengas activo.
    Configuración Google Fonts Typography
  3. Muy similar al primero pero con más opciones, puedes cambiar los ajustes a tu gusto.
    Configuración Google Fonts Typography
    Configuración Google Fonts Typography

3. Con el plugin gratuito Use Any Font

Podrás añadir  la tipografía de Google Fonts y cualquier otra a tu web siempre que tengas el archivo fuente.
Configuración Use Any Font

Este plugin todavía no está traducido al español.

  1. Instala y activa el plugin.
  2. Ve a su pestaña de ajustes:
    Configuración Use Any Font
  3. Como observas, no sólo vale para Google Fonts, sino para cualquier tipografía que tengas descargada. Simplemente subiendo el archivo .  ttf, otf, woff . Tiene un máximo de 25 MB.
  4. Selecciona los elementos que quieres que se vean con esta tipografía.
    Configuración Use Any Font

  5. Selecciona y rellena los campos con los datos dependiendo de cómo hayas creado tu web. Puedes asignar clases Css también.

Añadir fuentes Google Fonts en WordPress con código en <head>

  1. Entra en la web de Google Fonts y selecciona la que quieras añadir a tu web.
    Google FontsClick en el botón  + Select this style y se añadirá la fuente seleccionada a una columna a la derecha.  También puedes seleccionar varias familias a la vez.
  2. Copia el primer código y pégalo en el <head> de tu web. Además te añade el estilo en Css.

Insertar Google Font en head<head>  <title>Ejemplo de parte de código para instalar Google Fonts</title>  <link href=" https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet"></head>

Añadir fuentes Google Fonts en WordPress con archivo de estilos externo

  1. Teniendo en cuenta el código de la fuente anterior.
    Código Google Fonts<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap" rel="stylesheet">
  2. Copiamos sólo la URL, es decir:
    https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap
  3.  Añade este código en tu archivo functions.php
    function insertar_fuentes_google() {   wp_enqueue_style( 'google-fonts', ‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,100&display=swap’, false );   }      add_action( 'wp_enqueue_scripts', 'insertar_fuentes_google' );Lo que hace este código es registrar un nuevo archivo de estilos externo (el que tiene la información para cargar la fuentes de Google).
  4. Recuerda sustituir el enlace de mi fuente por la tuya.

La mayoría de themes actuales que nos ayudan con temas visuales en WordPress nos permiten elegir tipografías de Google Fonts, pero usar en exceso las fuentes, ralentiza la web, ya que hace una llamada a un servidor externo. Por eso, te recomendamos que no utilices más de tres tipografías ya que influiría negativamente a la carga de la página. Puedes instalar un plugin que te ayude a optimizar este proceso y nuestro consejo, es que instales WPRocket.

¿Escogerás una fuente Google Fonts o prefieres elegir de las que vienen en tu tema por defecto?

El equipo Hoswedaje.