En este post vamos a ver como añadir las fuentes de google a cualquier plantilla a través del plugin gratuito Easy Google Fonts.
Antiguamente también era necesario usar este plugin para añadir fuentes de google a la plantilla Divi para WordPress (para que aparezcan en los módulos del Divi Builder). Pero, ahora ya no es necesario, ya que la plantilla Divi incluye las fuentes de Google por defecto.
DESCUENTOS DIVI
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
ÍNDICE: PONER FUENTES DE GOOGLE EN WORDPRESS
1.- PONER FUENTES DE GOOGLE EN WORDPRESS A TRAVÉS DEL PLUGIN EASY GOOGLE FONTS
Me he decidido a utilizar el plugin Easy Google Fonts para añadir fuentes a WordPress porque es el plugin que más actualizado he encontrado. De hecho tienes que llevar cuidado porque requiere del uso de la versión 4.7 de WordPress en adelante.
Con este plugin vamos a poder configurar diferentes fuentes de letras de google en diferentes tipos de texto.
Fácilmente podremos configurar las fuentes utilizadas en el texto de párrafo normal, y los títulos H1 a H6.
Dependiendo de la plantilla que utilices podrás utilizar un recurso que incluye el plugin para poder configurar otros tipos de textos diferentes al párrafo normal y los títulos H1 a H6. En el caso de la plantilla Divi, que es mi plantilla favorita y la que recomiendo, te adelanto que si permite el uso de este recurso que en el plugin denominan como “Font Control” o control de fuente.
Aquí tienes un enlace al plugin gratuito: Easy Google Fonts.
DESCUENTOS DIVI
2.- CONFIGURAR FUENTES DE TEXTO DE GOOGLE EN PÁRRAFOS Y TÍTULOS
En este apartado vamos a ver como configurar el plugin para editar el tipo de fuente utilizado en párrafos y títulos, que como antes he comentado es la parte más sencilla de configuración del plugin y en teoría válido para la inmensa mayoría de plantillas.
Lo primero que has de hacer es instalar el plugin Easy Google Fonts y activarlo (Recuerda leer los requerimientos sobre la versión de wordpress mínima necesitada)
Ahora ve a “Apariencia > Personalizar”. Si utilizas Divi, puedes ir a “Apariencia > Personalizar” o a “Divi > Personalizador de temas”.
Verás un ítem del menú lateral que dice “Typography”, haz clic sobre él y luego sobre el ítem “Default Typography”.
Verás una serie de botones:
Paragraphs: para elegir la fuente a utilizar en los párrafos normales.
Heading 1: Para elegir la fuente a utilizar en los títulos H1
Heading 2: Para elegir la fuente a utilizar en los títulos H2
Heading 3: Para elegir la fuente a utilizar en los títulos H3
Heading 4: Para elegir la fuente a utilizar en los títulos H4
Heading 5: Para elegir la fuente a utilizar en los títulos H5
Heading 6: Para elegir la fuente a utilizar en los títulos H6
Pantalla de configuración de fuente para párrafos y títulos desde H1 a H6
Haz clic sobre cualquier botón para despegar las diferentes opciones, verás que tienes 3 pestañas diferentes:
A.- STYLES: aquí podrás principalmente seleccionar la fuente de Google (FONT FAMILY) que quieres utilizar y el grosor y diseño de la misma (FONT WEIGHT / STYLE):
Script /Subset: Tipo de la fuente. Esto es un filtro de fuentes, si seleccionas “All Subsets” te aparecerán todas los tipos de fuentes posibles.
Font family: Selecciona la fuente que quieras (verás los cambios en tiempo real)
Font Weight /Style: aquí seleccionaras el grosor y diseño de la fuente elegida en Font family.
Text decoration: podrás elegir algún tipo de decoración para la fuente como el subrayado u otros.
Text Transform: esto producirá la transformación de todo el texto editado. Por ejemplo, si elegimos “Uppercase” todo el texto pasará a mayúsculas.
Podrás ver los cambios en tiempo real conforme modifiques las fuentes o algunas de sus características.
Opciones de personalización y diseño de la fuente con el plugin Easy Google Fonts
B.- APPARENCE : aquí podrás modificar las siguientes características de las fuentes de Google.
Font Color: Color de la fuente
Background Color: Color de fondo de la fuente
Font size: tamaño de la fuente de texto en Píxeles
Line Height: Altura de la línea de texto.
Letter Spacing: Espacio entre letras de la fuente.
C.- POSITIONING: estas opciones son menos habituales y seguramente menos usadas. Hacen referencia a la posición de las fuentes de texto. Principalmente aquí podrás establecer los márgenes de las fuentes así como el padding (margen interno) entre otros.
3.- PERSONALIZAR FUENTES DE OTROS ELEMENTOS DE LA WEB
Ahora vamos a ver como personalizar otros elementos de la web diferentes a los títulos H1-H6 y al texto tipo párrafo.
En primer lugar debemos comprobar si la plantilla que estás utilizando permite lo que en el plugin denominan como “custom control Font” (control de fuentes personalizado).
Para ello ve a “Apariencia > Personalizar”, luego haz clic en “Typography” y después en “Default Typography”. Si te aparece un texto que dice: “Your theme has typography support. You can create custom font controls on the google fonts screen in the settings section” (tu plantilla permite tipografía. Puedes crear controles de Fuentes personalizadas en la sección de configuración) significa que la plantilla permite controles de fuentes personalizadas.
Ya te adelanto que la plantilla Divi lo permite y que no tendrás ningún problema.
3.1.- PERSONALIZAR FUENTE DE LOS TÍTULOS DE LOS WIDGETS
Vamos a suponer ahora que por ejemplo queremos personalizar la fuente de los títulos de los widgets.
Lo primero que vamos a hacer es averiguar qué clase CSS gestiona los títulos de los widgets. Yo para esto utilizo la extensión Firebug del navegador Mozilla Firefox. Aunque hoy en día la mayoría de navegadores disponen de herramientas integradas para averiguar las clases CSS de cualquier elemento visualizado en la web.
A.- AVERIGUAR LA CLASE CSS
a.- Arrancar extensión: para utilizar Firebug hago clic en el icono que aparece en la barra superior de Firefox (Has de tener instalada la extensión). Aparecerá una barra de herramientas en la parte inferior de la web.
b.- Inspección: ahora debemos hacer clic en el icono de inspección de elementos (icono de rectángulo con flecha) y a continuación llevaremos el cursor hacia un título de widget. En la barra de herramientas de Firebug veremos que se subraya la clase utilizada. En el ejemplo vemos:
<h4 class=”widgettitle”>Comentarios recientes<h4>
Que indica que la clase CSS de los títulos de los widgets es: widgettitle
Averiguar la clase CSS de un elemento
B.- CONFIGURAR FUENTE
Para configurar la fuente de los títulos de los widgets iremos a “Ajustes > Google Fonts”.
Ahora veremos 3 pestañas: Edit Font controls, Manage Font Controls y Advanced.
En la pestaña “Edit Font Controls” escribiremos el nombre “Fuente titulos widgets” en el campo “Control Name” y a continuación haremos clic en el botón “Create Font Control”.
Nombre de la font control
Ahora en el campo “Add CSS Selectors” introduciremos la clase widgettitle precedida por un punto (que indica que es una clase).
Es decir pondremos:
.widgettitle
A continuación pulsaremos el botón “Save Font control”.
Nota: además de la clase widgettitle podríamos haber añadido otras clases CSS que quisiéramos también personalizar desde el mismo selector (es decir todas las clases tendrían el mismo diseño).
Si por el contrario queremos crear varios selectores independientes pues tendremos que crear varios “Font controls”.
Escribimos el nombre de la case CSS precidida por un punto
C.- PERSONALIZAR LA FUENTE
Para personalizar las fuentes configuradas iremos otra vez a “apariencia > personalizar” o a “Divi > Personalizador de temas” (en caso de usar la plantilla Divi).
Ahora haremos clic en “Typography” y después en “Theme Typography”.
A continuación ya podremos personalizar la fuente y diseño utilizado para los títulos de los widgets.
Personalizar fuente de texto de los títulos de los Widgets
4.- AÑADIR FUENTES DE GOOGLE AL DIVI BUILDER
Como ya habrás observado con el mecanismo que aporta este plugin de personalización de fuentes de Google a través de clases CSS se puede hacer casi cualquier personalización. Pero es cierto que no tenemos la comodidad de elegir directamente la fuente en los módulos del Divi Builder de nuestra plantilla Divi.
Para disfrutar de más de 700 fuentes puedes utilizar el plugin “Divi extended Google Fonts” que tiene un precio de 8,00 $.
Según indica el plugin se añadirán 700 fuentes a la parte del personalizador de Divi, así como a los módulos del Divi builder.
Aquí tienes un enlace al plugin: Divi Extended Google Fonts
Antes de comprarlo asegúrate de que el plugin es compatible con tu versión de WordPress y de Divi.
Plugin Divi Extended Google Fonts
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
Joaquín, el video y el post son fantasticos, pero me gustaría puntualizar algo: El plugin es más completo que las fuentes de google que incorpora DIVI, como en el caso de «LATO» que te deja elegir grosor…
Hola Victoria.
Gracias por tus comentarios
buenas, gracias por tu info en general, sabes de algún plugin que reconozca las fuentes que usa Divi de google y las autoaloje en el servidor para evitar de esta manera realizar este tipo de peticiones externas?
Hola Sergio.
No conozco ningún plugin, pero te dejo este post que habla sobre diferentes formas de mejorar la carga de las fuentes en WordPress:
How to Speed up Google Fonts in WordPress
Buenas tardes Joaquín,
En primer lugar enhorabuena por el artículo y el vídeo!
a mi tampoco me ha funcionado, tengo última versión de Divi instalada. En «Font Family» me salen las fuentes típicas «Standar Web Fonts», es decir, de la Arial a la Verdana.
Todas las fuentes de Google que te aparecen, sólo puedo verlas en «Cabecera y la navegación» no para Typography. He instalado y activado el plugin pero nada.
Tengo un montón de artículos creados con Arial y quiero cambiar a Roboto y no hay forma de predeterminar esa fuente para el «párrafo» 🙁
A ver si se te ocurre algo.
Gracias.
Saludos.
Alberto.
Hola Alberto,
Ya no es necesario usar este plugin. Las últimas versiones de la plantilla Divi ya incluye las fuentes de Google. De hecho incluye las fuentes: Roboto, Roboto Condensed, Roboto mono y Roboto slab.
En este post estoy intentando hacer una recopilación de las fuentes de texto de la plantilla Divi. Llevo unas cuentas, pero me quedan aún muchas por añadir.
Un saludo
Hola. Qué tal? Como siempre un post perfectamente estructurado y explicado para que el común de los mortales lo entendamos sin problemas. Un aplauso y bien sonoro y no es peloteo, sólo es la realidad.
A pesar de lo que acabo de decir, te quería preguntar sobre una duda que tengo y te agradecería tu respuesta:
A día de hoy y desde hace ya unos cuantos meses, Divi y en mi caso Extra, incluye un montón de fuentes de Google pero precisamente ahí está mi duda:
¿Incluye las fuentes, es decir los archivos o sólo las busca automáticamente en Google? Lo digo porque cualquier web de control de velocidad (pagespeed, gtmetrix, etc) me dicen que la web se ralentiza precisamente por esto, por lo que pienso que se siguen buscando fuera pero quería una opinión más profesional.
Muchas gracias de antemano.
Saludos. Victor.
Hola Victor,
Lo primero, agradecerte tus palabras muy sinceramente.
Efectivamente, desde hace un tiempo Divi tiene la posibilidad de utilizar un montón de fuentes de Google.
Precisamente, estoy escribiendo un post a modo de biblioteca de todas las fuentes que incluye Divi, y viendo el código de esta página y otras que tengo, compruebo que sólo se cargan los CSS de las fuentes que se está utilizando en la página.
Es decir, que si en una página estás utilizando la Raleway, pues esa será la que se cargará cuando se visualice la web y no todas las demás, como era lo lógico de esperar, para que no se ralentice la web.
Hola otra vez.
Gracias por la explicación.
Entonces no quedará más remedio que meter las fuentes que uses en tu hosting, para que no se ralentice por poco que sea, buscándolas fuera.
¿Qué opinión tienes sobre esta posibilidad?
Muchas gracias de nuevo.
Saludos. Victor
Mi opinión personal es que no merece la pena,
creo que hay otras cosas mucho más importantes como activar una caché, comprimir archivos, minificar CSS y HTML,
pero si encuentras info de como hacerlo me parece bien
Lo miraré…
Muchas gracias de nuevo.
Saludos. Victor.
Hola Joaquín, muchas gracias por tus tutoriales, te felicito. Solo recomendaría poner botones para compartir tus artículos en redes sociales, porque no los veo por ningún lugar.
Hola Andrés,
los quité hace tiempo porque los que tenía me consumían un montón de recursos. Pero eso fue hace ya mucho tiempo, y te tomo la palabra y voy a buscar un plugin adecuado para ello.
gracias
Hola, muchas gracias por la información. He estado viendo tutoriales y todos indican como personalizar la fuente de los títulos de los widgets, pero en ningún lado encontré como cambiar la fuente de los menús por ejemplo. He intentado hacerlo investigando el CSS de cada elemento, aunque sin éxito. Es esto posible? Como se hace? Muchas gracias. Saludos desde Argentina!
Buenas,
el tipo de fuente del menú depende totalmente de la plantilla que estás utilizando,
en el caso de Divi se hace desde «Divi > Personalizador de temas > cabecera y navegación > Barra de menú principal > Fuente»
Saludos desde España!!
Genial, yo uso Divi y no sabia como introcucir algunas de las fuentes que uso en logos y ofertas para que quedase uniforme y con las mismas caracteristicas que la tipografía que ya utlizaba de antes
Muy bien explicado y buena aportación para toda la comunidad que usa este tipo de plataformas. Genial!!!
Gracias Alejandro
Un saludo
Joaquin, el post está super claro y muy fácil, pero no se que estoy haciendo mal, porque he instalado el plugin y cuando voy a typografy solo me aparecen las fuentes que trae wordpress…tengo el wordpress 4.7.2
gracias !
Hola Zoe,
a ver si alguien le ha pasado y nos puede echar una mano. Por que a mí no se me ocurre ahora mismo porque no te aparecen las fuentes de Google Fonts.
Un saludo
Muchas gracias. Me ha sido de gran ayuda.