Cómo personalizar la tipografía de WordPress usando CSS

Directamente, en WordPress puedes cambiar tanto el tamaño, como la tipografía de la fuente; así como el H1 como el H2, H3 y demás, de una manera muy sencilla, sin necesidad de plugins.

Pero cuando quieres hacer un cambio general, algunas veces el theme (sobre todo las plantillas gratuitas) tiene ciertas limitaciones en cuanto a “tipografía”.

Extensión de Google Chrome para cambiar tipografía

Para cambiar tipografía, tamaño, color y demás de letras de WordPress, utilizaremos una extensión de Google Chrome llamada Stylebot.

Será necesario instalarla para tenerla en tu Chrome y poder comenzar con el proceso de cambios de tipografías y demás en WordPress.

letras

En el borde superior observarás su logo una vez lo tengas instalado, el cual se caracteriza por ser una S blanca con fondo negro.

Cambiar tipografías de WordPress con la extensión Stylebot

Para comenzar, estando en tu WordPress, presiona sobre la extensión que acabas de instalar de Chrome, ubicada en el borde superior derecho para abrirla.

stylbal

Notarás que se abrirá una columna a la derecha, es un editor de CSS visual, el cual puedes usar y entender, aunque no tengas ni idea de código CSS.

El cual no se aplicará hasta que el código lo pegues a la web, aunque sí te dejará pre-visualizar cómo quedarían los cambios.

Detalles para cambiar fuentes y más

Primero de todo, pulsa en el selector (icono de puntero del mouse) y selecciona la parte o zona dónde quieras aplicar modificaciones.

Una vez seleccionado el item, puedes cambiar todo tipo de atributos: como la fuente, el tamaño, e incluso decoración, estilos, negritas, color, etc…

fuente

Una vez que tengas ejecutado todos los cambios deseados, seleccionamos Código, en la zona inferior de la extensión.

Observarás el resumen de todo lo que has hecho en formato código.

5

Aplicar los cambios a la págin web de forma permanente

Cuando quieras aplicar todos estos cambios realizados, copias todo ese bloque de código, luego vas hacia el WP-Admin de tu WordPress, hacia Apariencia, Perzonalizar para luego dirigirnos a CSS adicional.

personalizar

Todo el código que acabamos de copiar, debemos pegarlo arriba del todo. Seleccionas Publicar y se actualizarán los cambios.

Lo siguiente será borrar caché y actualizar la página para confirmar que ya se han aplicado los cambios.

publicar

Vídeotutorial de cómo cambiar tipografía mediante CSS (sin saber de código)

Efectivamente son muchos pasos, aunque sencillos cuando le “pillas el truco”, pero hay que hacer uso de códigos que generaremos a partir de los cambios que realicemos.

Por eso, te puede ser de utilidad ver el artículo en formato vídeo, ya que es totalmente práctico y, además, hay información complementaria y extra respecto a la del artículo. Te lo adjunto a continuación:

Te puede interesar...

Diferencias entre SHOPIFY vs WOOCOMMERCE (WordPress)

A continuación, te presento las diferencias entre las características que ofrece el CMS de Shopify vs el plugin de WooCommerce de WordPress ¿Cuál es mejor para montar tu tienda online? Diferencias entre Woocommerce vs Shopify en Las principales diferencias (ventajas/desventajas) entre el CMS de Shopify y el CMS de WordPress

Leer más »
portada

Cómo personalizar la tipografía de WordPress usando CSS

Directamente, en WordPress puedes cambiar tanto el tamaño, como la tipografía de la fuente; así como el H1 como el H2, H3 y demás, de una manera muy sencilla, sin necesidad de plugins. Pero cuando quieres hacer un cambio general, algunas veces el theme (sobre todo las plantillas gratuitas) tiene

Leer más »

3 mejores webs de compra-venta de redes sociales

En este artículo encontrarás mi top 3 de webs para compra-venta de activos digitales. Para poder ver ofertas y comprar diferentes tipos de redes sociales: Twitter, Instagram, Facebook, canales de YouTube, cuentas de TikTok, etc. A continuación, te presento opciones muy interesantes para que puedas analizar posibles oportunidades. Ranking de

Leer más »