• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Agregar archivos de fuentes tipográficas en WordPress

Agregar archivos de fuentes tipográficas en WordPress

Agregar archivos de fuentes tipográficas en WordPress

[ 17 junio 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css herramientas

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto cómo usar los tipo de letra de Google Fonts en WordPress, sin embargo en algunos proyectos es posible que requieras agregar un tipo de letra diferente de manera manual usando directamente el archivo de fuente.

 

Resultado Final

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen:

Cambio de tipo de letra resultado

 

Descargar archivos de fuente o Tipografía

Existen varios sitios web desde donde puedes descargar archivos de fuentes, algunos de forma gratuita y otros de pago, por ejemplo: fontsquirrel, 1001freefonts, dafont, Adobe fonts, etc.

Usualmente obtendrás archivos .otf o.ttf, los cuales luego tendrás que convertir a woff y woff2
Ten en cuenta que no es recomendable usar muchos tipos de letra como parte de tu sitio web, ya que implica la carga adicional de archivos.

 

Tipos de archivos de fuente

Existen diferentes tipos de archivos de fuente, tal como vemos a continuación:

  • True Type Fonts (TTF): Fue desarrollada por Apple y Microsoft. Ha sido durante mucho tiempo el más común para fuentes en sistemas operativos Mac y Windows.
  • Open Type Fonts (OTF): Es la evolución del TTF. Fue creado por Adobe y Microsoft. Las fuentes OTF contienen los datos de pantalla y fuentes de impresora en un solo componente.
  • Embedded OpenType Fonts (EOF): Fueron diseñadas por Microsoft para ser utilizadas en la web con la finalidad de proteger el copyright que no hace TTF y OTF.
  • Web Open Font Format (WOFF): Básicamente es OTF o TTF pero con metadatos y compresión, además de estar apoyada con los principales navegadores. Fue creado por Mozilla, Microsoft y Opera Software para ser usada en la web.
  • Web Open Font Format 2.0 (WOFF2): Este formato ofrece hasta un 30% de compresión adicional en comparación con el formato WOFF, su uso es recomendado, aunque aún no todos los navegadores lo soportan

 

Convirtiendo fuentes al formato WOFF y WOFF2

Lamentablemente no todos los navegadores soportan los mismos tipos de archivo de fuente, por lo que, para que el tipo de letra se vea correctamente necesitamos convertir el archivo de fuente a un formato estándar como WOFF.

Para esto usaremos un servicio de conversión WebFont Generator

Conversión tipo de letra

  • Al ingresar a la url, usa la opción de Upload Fonts, sube el archivo de tipografía.
  • Una vez subido el archivo aparecerá un nuevo registro con fondo celeste en donde aparecerá el nombre de la fuente.
  • Acepta las condiciones y finalmente usa el botón de Download your kit.

 
Luego descargar y descomprimir el archivo .zip, veremos que tenemos como resultado varios archivos, lo que nos interesa son los archivos .woff y .woff2.

Resultado archivos woff y woff2

También nos será útil el archivo stylesheet.css ya que este archivo tiene el código CSS que usaremos para referenciar al nuevo tipo de letra.

 

Usando un nuevo tipo de Fuente en WordPress

Una vez tengas los archivos .woff y .woff2 entonces seguiremos los siguientes pasos:

 

1- Copiar los archivos a una ruta de tu theme

Puedes crear un tema hijo, en caso aún no lo tengas, y luego una carpeta fonts en donde colocaras los archivos .woff y woff2

Copiado de archivos en carpeta

 

2- Código para referenciar a los archivos de fuente

Luego que tienes los archivos de fuente copiados, entonces agregarás el código del archivo stylesheet.css en el archivo style.css de tu child theme.

En nuestro ejemplo para la fuente ‘Abril Fatface’, tendrás un código similar al siguiente:

@font-face {
    font-family: 'abril_fatfaceregular';
    src: url('fonts/abrilfatface-regular-webfont.woff2') format('woff2'),
         url('fonts/abrilfatface-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Nota que he agregado la carpeta fonts como parte de la ruta del archivo de fuente

 

3- Uso de la nueva fuente

Para usar la nueva fuente será necesario localizar los elementos HTML que queremos modificar, puedes usar el Inspector de código de tu navegador para localizar estos elementos.

Por ejemplo para cambiar las secciones del inicio del tema Storefront, podemos usar:

.section-title{
	font-family: abril_fatfaceregular;
}

 

Conclusión

Como has podido comprobar, el uso de un nuevo tipo de letra no debe estar limitado a lo que te ofrecen los servicios externos, puedes usar tus propios archivos de fuentes e incluirlos como parte de tu theme de manera manual y evitando el uso de plugins adicionales.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Google Fonts en WordPressAgregar Google Fonts en WordPress sin usar plugins
  • Inspector de código para modificar un theme WordPressUsar el Inspector de código para modificar un theme WordPress
  • Tabla de Contenidos en WordPress sin PluginsTabla de Contenidos en WordPress sin plugins
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Gerardo

    21 diciembre, 2020

    Hola puedes apoyarme,
    segui toda la cadena

    @font-face {
        font-family: 'candy_beansregular';
        src: url('fonts/candybeans.woff2') format('woff2'),
             url('fonts/candybeans.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    .section-title{
    	 font-family: 'candy_beansregular';
    }
    

    y bueno, no me percato de el cambio, es decir.
    El sitio que comienzo a administrar estaba originalmente con una fuente sans serif
    lo quiero cambiar por una fuente que me pidieron el sitio llevara “CandyBeans” me pasaron el archivo .otf
    ya lo converti a woff y woff2
    les hice su carpeta “fonts”
    guarde el style.css y a la hora de refrescar la pagina vuelvo a el inspector, y el area “titulo” que cambie para hacer las pruebas que corriera con normalidad.

    Me continua apareciendo con el antiguo “sans serif ”

    alguna idea tendras, de el porque no me cambia el tipo de fuente ?
    de antemano te lo agradezco mucho

    • Jhon Marreros Guzmán

      22 diciembre, 2020

      Hola, si la fuente esta correctamente generada y el archivo esta en la ruta correcta, entonces puede ser que el estilo que estes aplicando no tiene suficiente prioridad para mostrarse, tendrías que especificarlo más o usar !important. Envía la url de tu sitio para verificar.

  2. samuel

    25 mayo, 2021

    Buenas tardes Thon, muchas gracias por su divulgación lo primero de todo.

    He conseguido incluir el cambio de fuente en mi pagina wordpress a través del código CSS pero cuando voy a meterme a mi web desde Safari no salen los cambios. Sale la fuente anterior que estaba puesta en los ajustes estándar de Personalizar apariencia.

    Funciona perfectamente en Chrome pero ni caso en Safari..

    Muchas gracias de antemano Jhon,

    Atentamente

    Samuel

    • Jhon Marreros Guzmán

      26 mayo, 2021

      Has probado limpiando cache?, prueba igualmente en otro mac con safari.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

¿Cómo usar imágenes retina en WordPress?

Incluir Bootstrap en WordPress

Cambiar el logo en la versión móvil de tu sitio Web

SMTP en WordPress, configuración para envío de correos

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados