¿Puedo usar archivos de fuentes para PC en mi sitio wordpress?

• 10
  Oct

• Etiquetas: contenido, creatividad, diseño, navegación, navegadores, UX, web móvil, website, wordpress

Sabemos que los themes que decidimos activar en nuestros sitios wordpress ya traen ciertas fuentes cargadas, igual siempre está la opción de agregar alguna adicional a través de Google Font o repositorios parecidos, pero, ¿qué tal si ese tipo de letra que quieres usar lo tienes en tu computador, o te lo descargaste de algún sitio que lo que genera son archivos de fuentes para PC? ¿cómo llevas eso a tu página web wordpress?…¡averigüémoslo!

Comencemos con lo que no es posible… para poder usar ese tipo de letra que te gusta y tienes en tu computador, no es tan sencillo como subir el archivo de fuente a la carpeta de tu sitio web y ya se ve; para poder hacer eso tienes antes que convertir ese archivo que sólo es legible por una PC (generalmente .otf y .ttf) en un tipo de archivo legible por un navegador web (usualmente .woff, .woff2, .eot o .svg) para así poder usarlo en tu wordpress, ¿y cómo se hace eso? con un generador de fuentes web.

Como todo, hay varios generadores de fuentes web, pero en esta ocasión te vamos a hablar de uno en particular: Creative Fabrica, que te ofrece doble función: por un lado te brinda acceso a un abundante y moderno catálogo de fuentes, y por otro, te permite convertirlas en archivos legibles por navegadores, es decir, que podrás usarlas en tu sitio wordpress.

Una introducción a Creative Fabrica

Creative Fabrica es un mercado en línea que ofrece una amplia variedad de fuentes únicas:

Puedes descargar cualquier fuente gratuita que esté disponible para uso comercial. Igual, si deseas un diseño más exclusivo, puedes comprar tipografías de diseñadores especializados en la materia.

Además, -como te mencionamos- Creative Fabrica cuenta con generador de fuentes web, con el que podrás convertir cualquier tipo de letra en un formato compatible con la web. Con esta herramienta gratuita podrás convertir archivos .otf y .ttf básicos en fuentes para tu sitio wordpres.

Cómo usar un generador de fuentes web para incluir tipografías de PC en tu wordpress.

Ahora, veamos cómo mejorar el diseño de tu sitio con el generador de fuentes de Creative Fabrica. 

Paso 1: descarga o ubica una fuente para PC

Primero, deberás ubicar la fuente que deseas usar en tu sitio web. Sea que la tengas instalada en tu propia PC, ya la hayas descargado de algún repositorio de fuentes para PC, o comiences a ubicar la que te guste en sitios como Creative Fabrica.

Una vez que la ubiques, deberías tener un archivo en formato .otf y/o .ttf, siempre y cuando esa fuente que ubicaste sea para usar en PC.

Paso 2: sube tu archivo de fuente para PC a un generador de fuentes web

Las fuentes web, o fuentes seguras para la web, son fuentes que se pueden ajustar a diferentes navegadores y dispositivos. Con este tipo de tipografía puedes asegurarte que el texto de tu página web siempre se muestre correctamente. 

Si no conviertes una fuente a un formato compatible con la web, solo aparecerá correctamente si un usuario –por casualidad– la tiene instalada en su computadora. De lo contrario, el navegador utilizará una fuente genérica como Times New Roman como respaldo. Esto podría cambiar completamente la apariencia de tu sitio. Evítalo convirtiendo fácilmente esa fuente para PC en segura para la web, con el generador de fuentes web.

Desde el site de Creative Fabrica podrás acceder online a su generador de fuentes web y desde allí subir el archivo de fuente para PC, y recibir de vuelta la descarga de un archivo listo para usar en tu sitio wordpress: un .zip con formatos de fuentes web comunes como .woff, .woff2, .eot y .svg

Paso 3: sube la fuente convertida para web a los archivos de tu wordpress.

Bien sea vía FTP o directamente desde el Administrador de Archivos del cPanel, sube el .zip o los archivos de fuentes convertidas descomprimidos a la carpeta public_html > wp-content > themes > tema-activo >fonts en ocasiones la ubicación puede cambiar a public_html > wp-content > themes > tema-activo > css > fonts

La idea es que logres identificar la carpeta que guarda las fuentes en tu tema activo wordpress, y subas allí el archivo (descomprimido o no) que te arrojó el generador de fuentes web. Si preferiste subir el archivo .zip no olvides descomprimirlo desde el Administrador de Archivos del cPanel, una vez arriba.

Ahora debes ubicar el arhivo principal style.css de tu theme activo, debería estar en el directorio raiz de la carpeta de los archivos del theme, en algo como public_html > wp-content > themes > tema-activo, allí (en el archivo style.css) agrega este código base para poder cargar los archivos de fuente recientemente subidos:

@font-face {
    font-family: 'Anastasia';
    src: url('fonts/Anastasia.eot');
    src: url('fonts/Anastasia.eot?#iefix') format('embedded-opentype'),
         url('fonts/Anastasia.woff2') format('woff2'),
         url('fonts/Anastasia.woff') format('woff'),
         url('fonts/Anastasia.ttf')  format('truetype'),
         url('fonts/Anastasia.svg#Anastasia') format('svg');
}

En el código de arriba debes ajustar la url o ubicación de la carpeta donde subiste los archivos de fuentes web, y el nombre completo de cada archivo subido (incluyendo su extensión).

Ya lo que resta es hacer el llamado a la fuente nueva en los estilos donde desees usarla. Por ejemplo, puedes emplearla en tus encabezados H1 usando este código CSS:

.h1 site-title {
font-family: "New Font", Arial, sans-serif;
}

Listo, con esto ¡ya estarás usando una fuente inicialmente para PC en tu sitio wordpress!.

Entérate también sobre estos temas relacionados:

Cómo alojar fuentes de Google localmente en WordPress ¿Cómo agrego animaciones a mi sitio wordpress? ¿Cuál CMS usar para la página Web de mi empresa: WordPress, Joomla o Drupal? ¿Cómo corregir el frustrante error: “Maximum Execution Time Exceeded” en un sitio Web WordPress? Progressive Web App (PWA): tu sitio wordpress como una aplicación para dispositivos móviles.