Formatos de archivos de fuentes: ¿para qué sirven?
Cuando compras una fuente, normalmente recibes un par de archivos diferentes. Esto se debe a que los distintos navegadores (por ejemplo, Internet Explorer, Safari, Chrome) utilizan distintos formatos de archivo de fuente para mostrar el texto en un sitio web.
Los tipos de archivos más comunes que obtendrá son WOFF y WOFF2. WOFF2 es una versión más nueva y comprimida de WOFF. Cuanto más comprimido esté el archivo, más rápido se cargará el sitio web. Otros formatos de archivos de fuentes para la web son EOT y SVG. Son obsoletos.
Para la edición de escritorio (utilizando una fuente en Canva, Illustrator, Figma, etc.), se utilizan archivos OTF o TTF. OTF es mejor que TTF porque a menudo incluye características Open Type (OTF). Las características OpenType son, por ejemplo, caracteres alternativos, ligaduras y fracciones.
Cuando compras una fuente de Mojomox, puedes seleccionar "OTF" o "WOFF/2" en el menú desplegable. Si planeas usar la fuente en un software de diseño (Illustrator, Figma, Canva, etc.) Y en un sitio web, deberás comprar ambas: OTF y WOFF/2.
Solo para sitios web, comprar el formato WOFF/2 es suficiente.
Descomprimir la carpeta de fuentes
Después de comprar una fuente en formato WOFF/2, recibirás un enlace para descargar una carpeta ZIP. Después de la descarga, haz doble clic o clic derecho en la carpeta para descomprimirla. Ahora tendrás dos archivos, uno WOFF y otro WOFF2.
Cómo agregar una fuente personalizada a un tema de Wordpress
Para Wordpress, puedes usar un complemento para agregar fuentes personalizadas o puedes agregar código manualmente a los archivos de tema de Wordpress.
Opción 1: utilizar una fuente personalizada a través de un complemento
Si prefieres usar complementos, lee más sobre ello aquí en la página de soporte de Wordpress: https://wordpress.com/support/custom-fonts/#upload-custom-fonts
Opción 2: utilizar una fuente personalizada mediante un fragmento de código manual
Si prefieres el método manual, debes agregar tres cosas:
1) Sube los archivos de fuentes (WOFF y WOFF2) a tu directorio de Wordpress (a veces hay una carpeta de fuentes; pero cualquier carpeta funciona, solo necesitarás obtener el enlace a ella)
2) En tu style.css (o cualquier otro archivo CSS que puedas tener), agrega el código @font-face (detalles en el enlace a continuación)
3) Asignar la fuente a HTML (por ejemplo, el cuerpo o solo los títulos)
Puede encontrar capturas de pantalla detalladas con ejemplos de los tres puntos anteriores aquí: https://www.hostinger.com/tutorials/how-to-add-custom-fonts-to-wordpress#How_to_Manually_Add_Fonts_to_WordPress
¿Tienes preguntas? Envíame un correo electrónico a saskia@mojomox.com con un enlace a tu sitio y te ayudaré con el código.
