Cómo usar Google Fonts / Biblioteca de fuentes de la plantilla Divi (Divi fonts)

Habitualmente se subestima la importancia que tiene la correcta elección de una o varias fuentes de texto para una página web.

Como ya sabéis, habitualmente yo trabajo con la plantilla Divi para WordPress.

Buscar una fuente de texto desde el panel de administración de WordPress de entre las que ofrece Divi es difícil y poco visual. Elegir el tipo de letra desde un desplegable es poco amigable. Además, la carga del diseño de cada tipo de letra tarda un rato, por lo que el proceso es muy tedioso.

Pero, como Divi utiliza las fuentes de Google Font, lo más sencillo es buscar la fuente que nos interesa desde la web de Google Font y cuando hayamos decidido que fuentes usar, seleccionarlas en Divi.

Vamos a ver en este post cómo podemos buscar la fuente o tipo de letra que nos interesa en nuestra web.

En este post, tienes más información sobre los elementos a tener en cuenta a la hora de seleccionar un tipo de letra o fuente para nuestra página web.

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Email

Consentimiento

• Acepto la política de Privacidad

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

*** RESPONSABLE: Joaquín Barberá Aledo (servidor) | *** FINALIDAD: enviarte mis nuevos contenidos y lo que vea que puede interesarte (Nada de SPAM) | *** LEGITIMACIÓN: tu consentimiento (que estás de acuerdo) | DESTINATARIOS: los datos que me facilitas estarán ubicados en los servidores de MailChimp (proveedor de email marketing de horizonweb.es) fuera de la UE en EEUU. MailChimp está acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. | *** DERECHOS: por supuesto tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

1.- Acceso a Google Fonts / interfaz de uso

Para acceder a la página de Google Fonts debes ir a: https://fonts.google.com/

Una vez en la página de tipos de letra o fuentes de Google se te mostrará una interfaz dividida en las siguientes partes:

1.1.- Menú superior / Interface Google fonts :

En el menú horizontal superior tienes varias opciones de entre las que destacan las siguientes:

i.- DIRECTORY: haz clic en este elemento del menú para que se muestren las diferentes fuentes de Google. Las fuentes y orden en que se dependerá de los filtros que se hayan activado en el menú lateral derecho.

ii.- ICONO BOTE PINTURA: Si haces clic en el icono con forma de bote de pintura, podrás cambiar el color de fondo para ver la fuente en diferentes contextos de diseño

iii.- SEARCH: En la parte derecha del menú superior tienes una barra de búsqueda que te servirá para buscar una fuente de texto concreta.

1.2.- Menú lateral / filtros:

En la barra lateral derecha encontrarás filtros que te ayudarán a buscar el tipo de fuente adecuado para tu página web.

Los filtros más interesantes son:

i.- Categories: todas las fuentes de Google están clasificadas en una serie de categorías: Serif, Sans Serif, Display, Handwriting y Monospace

Serif: fuentes con adornos o remates ubicados generalmente en los extremos de las líneas de los caracteres

San Serif o palo seco: sin adornos o remates

Display: fuentes con fuerte personalidad, que pueden transmitir muchas sensaciones

Handwriting: fuentes que imitan la escritura humana (hechas a mano)

Monospace: fuentes con espaciado fijo. En contraposición a las fuentes de ancho variable.

Si marcas una sola categoría, las fuentes que se mostrarán serán únicamente las que pertenezcan a dicha categoría. Si marcas varias categorías, pues se mostrarán solo la fuentes que pertenezcan a esas categorías.

Conforme seleccionas categorías verás en la parte superior izquierda de la interfaz de trabajo el número de fuentes que cumplen la condición establecida. Es decir, el número de fuentes que pertenecen a la categoría o categorías seleccionadas

En la siguiente imagen tenemos seleccionada la categoría Handwriting y puedes ver la indicación que nos aporta Google Fonts indicándonos que se están mostrando: 138 fuentes de un total de 915 fuentes.

Filtro categorías de Google Fonts

Este indicador nos reflejará siempre las fuentes que se muestran, que cumplen las condiciones que hayamos establecido en los filtros del menú lateral derecho.

ii.- Sorting: con este selector podremos determinar el criterio por el cual se ordenan las diferentes fuentes a la hora de ser mostradas en la pantalla.

Si eliges “Trending” se mostrarán ordenadas según la moda del momento (tendencia). Si por el contrario, eliges “Popular” se ordenarán en función de el mayor o menor uso de las fuentes.

iii.- Languages: este filtro te puede servir para buscar fuentes específicas para determinados idiomas. Lo habitual es seleccionar “All Languages” (todos los idiomas)

iv.- Selectores características: también puedes utilizar los filtros Number of Styles (número de estilos), thickness (grosor), Slant (inclinación) y Width (anchura), para buscar fuentes con características muy definidas.

1.3.- Pantalla de trabajo interfaz Google Fonts

Bajo el menú superior tenemos la interfaz de trabajo, donde se mostrarán las diferentes fuentes que cumplan las características que hayamos seleccionado en los filtros situados en el menú lateral derecho.

Como antes te he indicado, en la parte superior te indicará el número de fuentes que coinciden con los criterios de búsqueda con respecto al total de fuentes de Google Fonts.

1.3.1.- Opciones de previsualización de fuentes

Antes de ver una fuente en detalle podemos utilizar una serie de opciones de previsualización para saber si nos interesa o no la fuente que estamos visualizando.

Vamos a ver cuales son los principales datos que se nos muestran de cada tipo de fuente:

i.- Nombre de la fuente: en primer lugar aparecerá en nombre de la fuente. En nuestro ejemplo: “Roboto”

Previsualización de fuente de texto

ii.- Nombre del creador de la fuente y número de estilos: en segundo lugar se muestra el nombre del creador de la fuente y número de estilos o diseños de dicha fuente. En nuestro ejemplo: “Christian Robertson” y “12 estilos o diseños de fuente”

iii.- Previsualización de tipología de texto: al colocar el cursor del ratón sobre la parte situada justo debajo del Nombre del creador de la fuente, se mostrarán varios selectores de previsualización de la fuente. Con este primer selector podremos establecer el tipo de texto que queremos previsualizar: Sentence (frase), Paragraph (párrafo de texto), Alphabet (alfabeto completo), Numerals (números), Custom (permite escribir un texto personalizado).

iv.- Previsualización de diseño o estilo de la fuente: con el siguiente selector podremos elegir el diseño o estilo de la fuente que queremos previsualizar.

v.- Previsualización del tamaño de la fuente: con este selector podremos establecer el tamaño de la fuente que queremos previsualizar.

Finalmente, si hacemos clic en el nombre de la fuente o en el enlace “SEE SPECIMEN” accederemos a la fuente en detalle.

1.4.- Detalles de la fuente Google Fonts

Una vez hemos accedido a la fuente en concreto que queremos analizar nos aparecerán diferentes apartados interesantes.

i.- Nombre de la fuente: aparecerá en la parte superior izquierda de la pantalla

ii.- Characters: en este apartado se mostrarán todos los caracteres utilizando la fuente seleccionada.

iii.- Designer: creador de la fuente

iv.- Styles: en este apartado se indicarán el número de estilos o diseños que tiene esta fuente. Un selector para cambiar el tamaño de la previsualización de dicha fuente y el campo: “Type here to preview text” para escribir un título de texto personalizado y ver que tal queda utilizando cada uno de los estilos o diseños de dicha fuente.

v.- Usage: en el lateral derecho nos aparecerá este apartado informativo con un gráfico en el que se incluyen los países donde más se ha utilizado la fuente seleccionada. Debajo, nos indicará el número de sitios web que incluye la fuente.

Datos fuente de texto

vi.- Popular pairings with …: Este apartado, que se muestra en la parte inferior de la interface nos va a indicar un dato muy interesante. Ni más ni menos, que las fuentes más utilizadas para combinar con la fuente seleccionada.

Esto es muy interesante cuando vamos a usar varias fuentes en el sitio web (las categorías en las que se dividen las fuentes también nos pueden ayudar en este tema de buscar fuentes de texto que combinen bien)

A la derecha nos aparecerá un texto de ejemplo previsualizando las fuentes que elijamos en la parte derecha. De esta manera podremos ver cómo combina la fuente seleccionada con otras fuentes. Podemos cambiar que fuente se mostrará en el título y cual en el texto de párrafo.

Combinación de fuentes de texto

2.- Seleccionar fuente en plantilla Divi

En la plantilla Divi podemos utilizar fuentes de manera general para la web y específica.

i.- Ajustes generales de fuente: Desde “Divi > Personalizador de temas > Ajustes generales > Tipografía” se pueden seleccionar las fuentes a utilizar de manera general en títulos y textos tipo párrafo.

ii.- Ajustes específicos en plantilla: En cada uno de los menús, y otras partes de la plantilla Divi podremos establecer fuentes de texto específicas

iii.- Divi Builder: en cada uno de los diseños que creemos a través del Divi Builder, podremos establecer fuentes específicas de texto para cada módulo o elemento.

3.- Añadir fuentes a la plantilla WordPress

Si usas la plantilla Divi, no tendrás problemas en utilizar fuentes de Google. Pero es posible que utilices otra plantilla que no sea Divi y que no dispongas de las tipografías de Google Fonts.

En este post puedes ver cómo utilizar un plugin para añadir fuentes de Google a tu WordPress.