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.
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.
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;
}
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.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Hola puedes apoyarme,
segui toda la cadena
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
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.
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
Has probado limpiando cache?, prueba igualmente en otro mac con safari.