Agregar archivos de fuentes tipográficas en WordPress

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

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:

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

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.

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

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:

Comentarios

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.