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.
ÍNDICE GOOGLE FONTS
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:
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.
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola! Hay alguna forma de ver todas las fuentes previsualizadas de Divi? Porque son tantas que previsualizarlas al momento de la selección se hace medio engorroso.
hola mi cliente me pide la fuente NEXA, que si esta en google fonts, pero no está en divi…no se si deberia subirla como fuente externa o hay algo que me falta activar. tengo las google fonts activadas en los ajustes de divi
Perdon ya vi que se encuentra pero para comprarla. gracias igual
Buenas Paula.
Me alegro que lo hayas resuelto.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquín, pongamos que sólo vas a usar 2 o 3 fuentes y no quiero que la web se ralentice con las consultas a Google. ¿Es posible subir las fuentes concretas al tema y deshabilitar así Google Font de Divi?
Gracias
Buenas.
Mira estos posts a ver si te valen:
How to add google fonts
Añadir fuentes Google a WordPress
Hola, puesto que son todas las de google font, en su página se pueden filtrar y combinar para decidir las que más gusten.
Saludos
Buenas,
Efectivamente, de hecho voy a modificar el post por uno en el que se explique cómo buscar fuentes por Google fonts
Buenas,
ya está modificado el post