Dins el desenvolupament web utilitzant Tailwind CSS, les fonts personalitzades són un excel·lent recurs per generar varietat. Es tracta de qualsevol font que no estigui dins del conjunt predeterminat del framework, i es poden importar o utilitzar fonts web. Posteriorment, es referencien amb la configuració de Tailwind per a la seva correcta aplicació a diferents parts del projecte.
Hi ha diferents alternatives per començar a utilitzar fonts personalitzades a Tailwind CSS.En aquest article trobaràs cadascuna d'elles, així com consells per aprofitar-les millor i alternatives per treure-li el màxim profit. Configura de manera personalitzada els diferents elements del teu projecte web amb una interfície senzilla i potent.
Afegeix fonts personalitzades a Tailwind amb fitxers de font local
Si vols afegir un tipus de font personalitzada usant el fitxer font, és possible i Tailwind ho fa en pocs passos. Imagina que vols carregar una tipografia en format .woff. Seguiu aquests passos perquè el vostre projecte Tailwind pugui registrar les fonts personalitzades sense complicacions.
- El primer pas és afegir el fitxer de font a la carpeta public/fonts.
- Després incorpora la declaració @font-face al teu CSS Pots utilitzar un fitxer .css global i importar-lo; un bloc style is: global o un bloc style dins d'un disseny o element específic.
- Registra la font personalitzada i indica al navegador com trobar-la.
- Utilitzant el valor font-family de la declaració @font-face podeu aplicar l'estil a diferents elements en el vostre disseny.
Afegeix fonts personalitzades amb Fontsource
Una altra alternativa per a fonts personalitzades és Fontsource, que simplifica l'ús de Google Fonts i altres fonts de codi obert. El seu funcionament és intuïtiu i molt dinàmic. Amb aquests passos podràs incorporar ràpidament fonts personalitzades per al teu projecte web.
- Revisa el catàleg de Fontsource i tria la font que més t'agradi per afegir al teu projecte.
- Instal·la el paquet de la font seleccionada.
- Podeu trobar el nom específic del paquet des de la secció “Quick installation” a la pàgina de cadascuna de les fonts de Fountsource. Cerca escrivint @fountsource o @fountsource-variable seguit del nom de font.
- Importa el paquet de font al component que vols modificar. Generalment s'aplica a un component comú perquè la font estigui disponible a tot el lloc web.
- La importació afegeix directament les regles @font-face per a la configuració de la font.
- Utilitza el nom de la font i es podrà aplicar a qualsevol lloc que permeti treballar amb CSS al teu projecte.
- L'optimització de temps de renderitzat es pot assolir amb la càrrega prèvia de fonts que són essencials per al teu disseny.
Registre de fonts amb Tailwind
Les fonts personalitzades a Tailwind CSS es poden fer servir gràcies a la integració de Tailwind i funcionen amb els mètodes anteriorment esmentats. Pots incloure una declaració @font-face per a fonts locals o utilitzar l'estratègia d'importació des de Fountsource per instal·lar les fonts i registrar-les a cada projecte. El pas final de registre té les següents indicacions:
- Segueix els passos en les formes anteriors d'inclusió de fonts, però deixa incomplet l'últim pas sobre afegir font-family al CSS.
- Afegeix el nom de la tipografia al fitxer tailwind.config.mjs.
- Pots incorporar la font a estils serif i sans-serif entre d'altres. I configurar que determinades fonts estiguin disponibles per a la selecció i la utilització.
La importància de les fonts en el disseny web
Tailwind CSS és una excel·lent eina per facilitar el disseny del teu projecte web, i entre els recursos que utilitza hi ha les tipografies personalitzades. El tipus de font en una pàgina web és de gran importància, ja que brinda un primer acostament per a l'usuari, apropant elements, ressaltant-ne alguns i disminuint la visibilitat d'altres segons calgui.
Un consell molt repetit al món del disseny web és que “la primera impressió compta”. La tipografia és un element clau d'aquest primer apropament a una web, ja que farà de introducció i de percepció primària del lloc. Una font ben seleccionada pot ajudar a transmetre professionalisme, simplicitat o creativitat segons les necessitats que tinguis. Depenent del tipus de marca i missatge, la decisió d'una tipografia és la primera àncora del model comunicacional.
D'altra banda, una tipografia encertada per a la web facilita la lectura. Això és especialment important si analitzem el tipus dusuari de la pàgina, arriba des dun ordinador, un mòbil o una tablet? Algunes fonts es veuen millor en dispositius de pantalla vertical, altres en pantalla horitzontal.
Com es tria una tipografia correcta?
La selecció d'una tipografia per a projectes web depèn enterament de la identitat de marca. Has de seleccionar-ne una que ressoni i reflecteixi els valors del teu projecte. Una entesa profunda de la tipografia implica no només la part estètica, sinó la connexió amb l'audiència d'acord amb els objectius del projecte web. Els principals tips per triar una bona tipografia a Tailwind CSS.
Comprèn la identitat de marca
Reflecteix la identitat de la teva marca. Un projecte modern de tecnologia, per exemple, pot optar per tipografies minimalistes i modernes, sans serif amb simplicitat i innovació. En altres casos, una web amb més història potser prefereix una tipografia clàssica i de més serietat.
Elements tècnics
Els factors tècnics també poden influir a lhora de marcar el rendiment del teu lloc web. Des de la compatibilitat entre navegadors web fins a la utilització a la xarxa. No totes les fonts tenen el mateix renderitzat, i això afecta finalment laparença del lloc. Altres fonts, en ser molt pesades, fan que la càrrega de la web es torni lenta i tosca.
Tipografies i experiència d'usuari
En definitiva, la selecció d'una tipografia involucra nombrosos elements que fan a lexperiència de lusuari. Si està ben escollida, guiarà l'usuari entre els diferents elements i blocs de la pàgina. Per regla general, una tipografia serif és més recomanable en pàgines amb textos llargs i en impressions. Les tipografia sans serif, en canvi, són de traços lineals, bàsics i molt fàcils de seguir en blocs petits i llocs web. Ja sigui en ordinadors, mòbils o tauletes, es veuen molt millor i poden generar una imatge molt més versàtil.