La tipografía juega un papel crucial en el diseño web y el uso de ellas puede hacer que un sitio web se destaque. Sin embargo, depender de servicios externos puede tener implicaciones tanto en el rendimiento como en problemas de privacidad relacionados con el GDPR. En este post, exploraremos cómo self-host una tipografía y usarla en un proyecto SvelteKit con TailwindCSS. Aquí está el enlace al repositorio.

Por qué self-host una tipografía?

Hay un par de razones por la que uno puede optar por self-host las tipografía en una aplicación. Unos posibles escenarios es cuando la fuente que utiliza es de propiedad privada, el rendimiento y la confiabilidad de la entrega son una preocupación primordial, o quizás inquietudes y cumplimiento con la privacidad de los usuarios de tu sitio.

Cómo self-host la tipografía en tu proyecto.

Hay varias formas de tener los archivos de las tipografías. Cubriré dos métodos, uno usando fontsource, y el otro usando los archivos directamente desde el proyecto.

Asumiré que ya tienes un proyecto sveltekit configurado con tailwind, pero si no, sigue la guía en Tailwindcss.

Obteniendo la tipografía (fontsource)

Este es el método más simple, solo requiere instalar la dependencia. Para este ejemplo estoy usando una tipografía llamada oxanium. Al buscar una fuente, es posible que vea que existe la versión de tipografía base y también la versión variable. Lo óptimo a utilizar sería la versión variable, ya que comprende todas las variaciones en un solo archivo en lugar de varios archivos. En cualquier caso ambos tipos funcionan.

npm i -D @fontsource-variable/oxanium

Then, in our root +layout.svelte, we have to import it.

Obteniendo la tipografía (archivos)

Para este método necesitamos obtener los archivos. He descargado una fuente llamada chillax. Luego tenemos que colocar los archivos, idealmente, en el directorio static/fonts. Los archivos suelen tener formato .woff, .woff2 o .tff. Normalmente es necesario incluir diferentes versiones para fallas en casos de falta de compatibilidad con los navegadores.

A continuación, necesitamos un archivo css que le informe al navegador sobre los archivos, el peso, la fuente y otras cosas tipográficas.

Luego necesitamos importarlo en nuestro archivo app.css.

Asegúrate de que app.css esté incluido en +layout.svelte.

Configurando la tipografía en Tailwind

En nuestra configuración de tailwind, necesitamos extender la familia de tipografía para poder utilizarlas en nuestro sitio. Para agregar la tipografía como predeterminada (suponiendo que estemos usando la familia sans), agregamos el nombre de la fuente como el primero en la array. Es buena práctica tener tipografías de repuesto en caso de que haya algún problema con nuestros archivos.

Usando la tipografía

Ahora que hemos realizado la configuración, podemos usar libremente las tipografía dentro de nuestro sitio. Recuerda que configuramos una de las fuentes para que se use como predeterminada para la familia sans, por lo tanto, no es necesario especificar la familia de tipografía dentro de la clase de un HtmlElement.

Comentarios finales

Espero que este post cubra tus caso de uso típicos. Self-hosting tipografía y usarlas junto con SvelteKit y Tailwind CSS puede darte un mayor control sobre el rendimiento, la privacidad y el diseño de tu sitio web. Recuerda elegir fuentes que complementen tu diseño y cumplan con la licencia de uso.