Ús de Google Fonts en el disseny web: Guia definitiva

Sector

Disseny web

Parlem de

Disseny web

Google Fonts s’ha convertit en un recurs essencial per a dissenyadors web gràcies a la seva àmplia selecció de tipografies gratuïtes, fàcils d’integrar i optimitzades per al web

En el món del disseny web, la tipografia és una eina fonamental per comunicar la personalitat i el missatge d’un projecte. L’elecció adequada d’una font afecta l’estètica, la llegibilitat i l’experiència de l’usuari.

Google Fonts s’ha convertit en un recurs essencial per a dissenyadors web gràcies a la seva àmplia selecció de tipografies gratuïtes, fàcils d’integrar i optimitzades per al web. A més, l’ús de fonts de Google pot aportar beneficis al SEO del teu projecte.

Avantatges de Google Fonts per a dissenyadors web

Gratuïtat total: Ideal per a dissenyadors web que treballen amb pressupostos ajustats o que busquen solucions assequibles.
Gran varietat tipogràfica: Amb més de 1.400 opcions, permet adaptar-se a qualsevol estil de disseny web, des de corporatiu fins a creatiu.
Fàcil integració: Els dissenyadors web poden afegir fonts al seu projecte en qüestió de segons, sense necessitat de coneixements avançats.
Optimització per al web i SEO: Fonts dissenyades per carregar ràpidament i allotjades en una xarxa de distribució de contingut (CDN) optimitzada.
Possibilitat de descarregar-les i pujar-les al server de la web, que és el que és recomanable.
Compatibilitat garantida: Assegura que la tipografia es mostri correctament en tots els navegadors moderns i molts antics.
Alfabets de tot el món. El catàleg de tipografies de Google té molt en compte l'abast global de la vostra oferta i ofereixen famílies tipogràfiques amb caràcters i tipus d'escriptura diferents dels occidentals.
Ampli catàleg de fonts variables. Les fonts web ofereixen una gran quantitat de possibilitats en UI, sense haver de cenyir-te als pesos clàssics predefinits.

Per aprofundir en com la tipografia afecta el disseny web, pots consultar aquest article de La Teva Web sobre el disseny web i la tipografia.

La velocitat de càrrega i el seu impacte en el disseny web

Com impacta la velocitat de càrrega

Experiència de l’usuari: Fonts pesades poden provocar retards en la visualització de la pàgina. Les fonts web variables milloren la càrrega en reduir el nombre de fitxers necessaris.
SEO: Google utilitza la velocitat de càrrega com a factor de classificació.
Rendiment mòbil: Fonts mal optimitzades poden ser especialment problemàtiques en dispositius mòbils.
CLS (Cumulative Layout Shift): Fonts que no es carreguen a temps poden causar desplaçaments visuals.

Com minimitzar l’impacte de les fonts en la velocitat de càrrega?

Carrega les fonts al teu server. Reduir les crides fora del teu server sempre és una bona idea.
Si les carregues per CDN selecciona només les variants necessàries:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Utilitza la propietat display=swap:
Càrrega asíncrona: Configura les fonts perquè es carreguin en segon pla.
Serveix les fonts des del servidor local: Considera allotjar fonts específiques al teu servidor.
Fes servir fonts variables si pots. Un sol arxiu per printar el mateix.

Per aprofundir, consulta la guia de Google Developers sobre optimització web.

Com integrar Google Fonts en un projecte de disseny web

A WordPress

Mitjançant un plugin: Utilitza un plugin com Easy Google Fonts.
Manualment al CSS:

@font-face

font-family: 'Barlow'

src: url('../fonts/Barlow-Italic.woff2') format('woff2'), url('../fonts/Barlow-Italic.woff') format('woff')

font-weight: normal

font-style: italic

font-display: swap

A PrestaShop

Si les carregues per CDN afegeix codi al CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {

font-family: 'Roboto', sans-serif;

}

A Shopify

Modificant el fitxer theme.liquid

Millors pràctiques per al disseny web amb Google Fonts

Evita sobrecarregar de fonts: Limita’t a 2-3 fonts per projecte.
Prioritza la llegibilitat: Fonts com Roboto són ideals per a textos llargs.
Selecciona només les variants necessàries.
Combina fonts harmoniosament: Per exemple, Playfair Display amb Lato.
Testa el rendiment: Fes proves amb eines com Google PageSpeed Insights.

Links d’interès

Sobre l'autor/a

Iván Cuellar — Dissenyador web

Amb una infinitat de dissenys realitzats a La Teva Web, no només busco realitzar webs “boniques”. Sempre aportem als projectes dels nostres clients una visió centrada en les seves necessitats i en l'usuari. Sense deixar de banda les tendències de disseny web, que evolucionen cada any.