font-display: swap i fonts web a la web de la teva empresa: com evitar text invisible i accelerar la primera lectura

Obres la web de la teva empresa al mòbil i durant un segon no veus titulars ni botons: només un bloc gris o text invisible fins que acaba de carregar la font de Google. Aquest parpelleig es diu FOIT (Flash of Invisible Text) i el 2026 continua sent un dels detalls que més resta confiança a les webs corporatives, especialment després d'optimitzar imatges i Critical CSS.

La propietat CSS font-display: swap i una estratègia clara de fonts web (autoallotjades o de tercers) permeten mostrar text llegible de seguida amb una font de sistema i substituir-la per la corporativa quan estigui llesta. Aquest article explica com encaixa amb FCP, LCP i la tipografia de marca, quins valors usar i quins errors evitar.

Què és font-display i per què importa

Quan el navegador troba una regla @font-face, descarrega el fitxer (WOFF2, WOFF, etc.) abans de pintar el text amb aquella família — tret que indiquis un altre comportament. Sense font-display, molts navegadors amaguen el text fins que arriba la font o s'esgota un temps d'espera.

• swap: mostra text de seguida amb fallback i canvia quan carrega la font web (pot haver-hi un lleuger salt visual).
• optional: només usa la font web si arriba molt ràpid; en connexions lentes es queda el fallback (útil al mòbil).
• block: amaga text breument i després mostra la font (risc de FOIT).
• fallback: període curt invisible i després fallback si la font tarda.

En webs d'empresa, on el missatge i els CTA han de llegir-se a l'instant, swap o optional solen ser l'opció més equilibrada entre marca i rendiment.

Relació amb rendiment i Core Web Vitals

Les fonts no solen ser el LCP en si, però retarden el primer text visible i poden empitjorar el FCP si bloquegen el render. Combina-les amb preload de la variant crítica, subconjunts de caràcters i font-display: swap en cada @font-face.

Si el titular del hero és el LCP, assegura que el pes d'aquella variant sigui mínim i que el CSS crític inclogui el fallback amb mètriques similars per reduir CLS en fer swap.

Google Fonts i fonts de tercers

El paràmetre display=swap a la URL de Google Fonts activa swap als @font-face servits. Tot i així, cada família extra afegeix peticions i pes: limita variants (400, 600, 700) i idiomes al que realment fas servir.

Alternativa amb més control: descarregar els WOFF2, autoallotjar-los al teu domini i servir-los amb capçaleres de memòria cau llargues, alineat amb menys dependències de tercers.

Autoallotjar fonts (passos pràctics)

1. Identifica famílies i pesos a la home, serveis i blog (DevTools → Computed).
2. Genera o exporta WOFF2 (build del dissenyador o eines auxiliars).
3. Define @font-face amb font-display: swap, unicode-range si apliques subconjunts i font-weight explícit.
4. Preload només la variant de above-the-fold amb crossorigin.
5. Configura memòria cau al servidor o CDN per /fonts/*.

La documentació de web.dev sobre millors pràctiques de fonts recomana limitar famílies, usar WOFF2 i evitar pesos no usats.

Triar fallbacks que minimitzin el salt

El «flash» en canviar d'Arial a la teva font custom es redueix si el fallback té mètriques semblants. El CSS modern ofereix size-adjust i overrides d'ascens/descens al fallback local.

Revisa també la jerarquia tipogràfica perquè el crític inclogui els mateixos stacks de menú i cos de text.

Quines millores esperar (referències 2026)

• FOIT eliminat: l'usuari llegeix el titular en el primer frame útil.
• FCP: millores de 0,2–0,8 s al mòbil són habituals en passar a swap + preload selectiu.
• Pes: passar de 6 pesos a 2 en WOFF2 sol estalviar 200–400 KB en la primera visita.
• Privacitat: autoallotjar evita contactar dominis de fonts només per obrir la home.

Mesura a Lighthouse i a l'informe de Core Web Vitals abans i després del desplegament.

Errors freqüents amb fonts web

• Importar tota la família de Google Fonts amb 8 pesos que ningú usa.
• Oblidar crossorigin al preload de fonts.
• Usar font-display: block «perquè es veu més net» i perdre lectors en 3G.
• No definir fallback al CSS crític: el swap provoca salts de layout.
• Carregar fonts des d'un altre domini sense preconnect.

Checklist abans del proper desplegament

1. Audita Network: filtra «font» i anota pes total i ordre de càrrega.
2. Afegeix font-display: swap (o optional al cos de text) a cada @font-face.
3. Preload només la variant del hero o titular principal.
4. Ajusta el fallback amb size-adjust si el salt és visible.
5. Verifica llegibilitat i contrast després del swap en mòbil real.

Conclusió

font-display: swap és la manera més directa que la web de la teva empresa comuniqui des del primer segon, sense sacrificar la identitat visual quan la font corporativa acaba de carregar. Encaixa amb Critical CSS, subconjunts i menys pesos innecessaris. Si vols auditar fonts, autoallotjar-les i deixar el pipeline llest per marketing, a aatsoft podem integrar-ho al teu build sense fricció.