Seleccionar página

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

 

En los últimos tiempos la plantilla Divi ha ido incorporando un montón de nuevas fuentes de texto: En este post puedes ver como buscar fuentes en Google Fonts: biblioteca de fuentes de Divi / Divi Fonts

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES


VER CURSOS

 

 

 

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”.

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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

 

Fuentes de google para párrafos y títulos de wordpress

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.

 

diseño y elección de fuente con el plugin para wordpress Easy Google Fonts

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.

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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.

 

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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

 

conocer la clase de un elemento de wordpress

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”.

 

poner nombre al control de fuente

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”.

 

clase seleccionada en easy google fonts

Escribimos el nombre de la case CSS precidida por un punto

 

Si quieres MÁS sobre WORDPRESS, BLOGS, CREACIÓN DE PÁGINAS WEB, TIENDAS ONLINE, DISEÑO WEB Y SEO, APÚNTATE a MI ACADEMIA ONLINE: cursotiendaonline.com
IR A MI ACADEMIA

 

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.

 

personalizando fuente de google en el título 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 para wordpress

Plugin Divi Extended Google Fonts

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO SEGURIDAD Y ACTUALIZACIONES WORDPRESS (9 Clases)
3.- CURSO DIVI (33 Clases)
4.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
5.- CURSO MEMBERSHIP SITE (14 Clases)
6.- CURSO ELEMENTOR (14 Clases)
7.- CURSO ASTRA PRO (17 Clases)
8.- CURSO BLOOM + MAILCHIMP (7 Clases)
9.- CURSO SEO (19 Clases)
10.- CURSO BLOG WORDPRESS (32 Clases)
11.- CURSO WOOCOMMERCE (39 Clases)
12.- CURSO FLATSOME WORDPRESS (36 Clases)
13.- CURSO COLORES WEB (9 Clases)
14.- CURSO ANALYTICS (10 Clases)
15.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
16.- ETC. ETC...(Más de 30 cursos)
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

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.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com