[icon name="fa-wordpress"]

Instalar WordPress

Guía de Instalación

[icon name="fa-heartbeat"]

Optimizar WordPress

Optimización y Velocidad

[icon name="fa-lock"]

Seguridad de WordPress

Guía de Protección

Añadir Fuente de Texto en WordPress con Tema Hijo (Child Theme)

Las fuentes o tipografías en WordPress, o cualquier sitio web en internet, son un recurso muy decisivo en el aspecto y la estética del contenido, además de la legibilidad por supuesto, y por tanto en la captación de atención de los usuarios. Por eso, es de vital importancia elegir las fuentes más atractivas. Hoy te mostraremos cómo añadir fuente de texto en WordPress en un tema hijo, así que, empecemos.

Crear un Tema Hijo (Child Theme)

Un tema hijo en WordPress es un concepto bastante sencillo, pero muy efectivo para mejorar la productividad, y conservar los cambios que realizas sobre el tema principal de tu sitio web.

En esta ocasión no nos vamos a detallar mucho en las ventajas y características del tema hijo de WordPress. Para que tengas más información detallada te ofrecemos aquí el tutorial de cómo crear un tema hijo.

Si no eres un fan de «ensuciarte» las manos con código, o no te sientes cómodo editando archivos, te recomendamos crear un child theme con un plugin.

Añadir Fuente de Texto en WordPress

Después de seguir las instrucciones de cómo crear un tema secundario en tu sitio de WordPress (si aún no lo tienes), lo que veremos ahora es cómo agregar otra fuente de texto en WordPress.

Para que un tema hijo esté funcional, debes activarlo a partir de la asección Apariencia » Temas en el panel de administración de tu sitio web.

Usaremos @font-face para agregar la fuente texto en WordPress. Para usar este método, su fuente personalizada debe estar en un formato adecuado de fuente de web (webfont).

Si tienes una fuente y quieres convertirla a una fuente de web para usarla en tu sitio web, Fontsquirrel te ofrece una herramienta para convertir fuentes de texto a tipografía para tu WordPress.

Te podría interesar leer:  Cómo Optimizar Experiencia de Usuario en WordPress

Nuestra fuente de demostración que usamos en este tutorial es Arima, una fuente de texto atractiva, que puedes descargar de forma gratuita.

Crear Carpeta para Fuentes

Una vez tengas la fuente de texto preparada, lo siguiente que tienes que hacer es, crear una carpeta con el nombre fonts, o cualquier nombre descriptivo, y subres los archivos de esa fuente en la carpeta creada.

@font-face {
    font-family: 'arima_koshibold';
    src: url('arimakoshi-bold-webfont.woff2') format('woff2'),
         url('arimakoshi-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

Después de convertir la fuente en webfont con la herramienta de Fontsquirrel, en la carpeta que descargas encontrarás un archivo .css que contiene un código que te permite visualizar la fuente de texto en WordPress de forma correcta.

Te diriges al archivo style.css de el tema hijo de WordPress, para insertar las líneas de código en la parte superior, justo después del bloque de comentario con los detalles del tema.

.site-title {
    font-family: 'arima_koshibold', Georgia;
}

Ahora lo único que falta es, añadir la fuente en cualquier elemento o bloque que desees en el archivo style.css usando el respectivo ID o clase para aplicar la fuente en el texto seleccionado.

Aplicar un fuente personalizada en la cabecera de WordPress

Este es el resultado final después de aplicar la fuente de texto en WordPress, en el texto de la cabecera del tema hijo (child theme).

Esto es todo. Te invitamos a nuestra página en Facebook, o seguirnos por Twitter, para obtener los tutoriales y noticias de WordPress.

Deja un comentario

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar