Si has entrat en aquest post és que t’has cansat de la tipografia que ve per defecte al teu WordPress, i fas bé. Per destacar entre els milers de milions de webs que existeixen hem de ser diferents, així que el post d’avui va sobre com afegir fonts personalitzades al teu web de WordPress sense morir en l’intent. I ho fem amb els mètodes actuals, perquè des que vaig escriure la primera versió d’aquest article ha canviat bastant la manera de fer-ho.
Les fonts són una part important del disseny del nostre web i fins i tot ens poden ajudar a definir la nostra marca. Tot i que tampoc pensis que has d’utilitzar la tipografia del teu logotip per a tot el web. No. Deixeu de pensar això. La podeu utilitzar per destacar certes coses, però NO per a tot.
Quines opcions tens avui per canviar les fonts a WordPress
Hi ha diverses maneres, segons com estigui fet el teu web:
- Amb el teu maquetador visual (com Elementor): l’opció més senzilla si ja el fas servir. Veuràs com a l’apartat següent.
- Amb la Biblioteca de fonts de WordPress, si fas servir un tema de blocs (Editor de llocs).
- Amb un plugin que descarregui les Google Fonts al teu servidor.
- Pujant les teves pròpies fonts (per exemple, la tipografia de la teva marca).
1. Amb Elementor (i altres maquetadors)
Si el teu web està fet amb un maquetador visual com Elementor, pots definir les fonts globals de tot el web als Ajustos del lloc > Tipografia global: tries la font per a títols, textos i botons, i s’aplica a totes les pàgines. És el més ràpid i coherent, i a més et permet canviar-les en un sol lloc quan vulguis. Amb Elementor Pro també pots pujar fonts personalitzades.
2. Amb la Biblioteca de fonts de WordPress
Des de WordPress 6.5, els temes de blocs inclouen una Biblioteca de fonts. Des de l’Editor de llocs > Estils > Tipografia pots instal·lar fonts de Google Fonts o pujar les teves i aplicar-les a tot el web sense plugins. Un detall important: les fonts s’allotgen al teu propi servidor, cosa que ajuda amb la privacitat i la velocitat.
3. Allotjar les Google Fonts al teu propi servidor
La majoria de desenvolupadors fan servir Google Fonts: són fiables i, per descomptat, gratuïtes. Però avui és important saber que carregar-les directament des dels servidors de Google envia l’adreça IP del visitant a Google, i això ha generat problemes de compliment del RGPD a Europa (incloses sentències a Alemanya). La solució és allotjar-les al teu propi servidor:
- Amb un plugin com OMGF (Optimize My Google Fonts), que descarrega i serveix les fonts de manera local.
- Des de les opcions del teu maquetador o del teu plugin d’optimització (alguns inclouen la càrrega local de Google Fonts).
- Descarregant les fonts de Google Fonts i pujant-les al teu web en format WOFF2.
Pel que fa al plugin que feia servir a la versió anterior d’aquest post, Easy Google Fonts, fa temps que va deixar d’actualitzar-se regularment i no funciona bé amb els temes actuals, per la qual cosa ja no el recomano.
Bones pràctiques amb les fonts
- Màxim 2 tipografies: una per a títols i una altra per al text. Més fonts donen una mala primera impressió, un web desordenat i, el més important, alenteixen la càrrega.
- Carrega només els pesos que facis servir (regular i negreta, per exemple), no tota la família. Millor encara, fes servir fonts variables.
- Fes servir format WOFF2 i
font-display: swapperquè el text es vegi mentre es descarrega la font. - Cuida la llegibilitat: mida del text (mínim 16 px en mòbil), interlineat i bon contrast.
- Mesura l’impacte: ja ho vaig dir en el seu moment i no em cansaré de repetir-ho, la velocitat de càrrega és molt important. Repassa-la a com mesurar la velocitat de càrrega del teu web.
Preguntes freqüents
Puc fer servir fonts que no siguin de Google?
Sí. Pots pujar les teves pròpies fonts (revisant que la seva llicència permeti l’ús web) amb Elementor Pro, amb la Biblioteca de fonts de WordPress o amb plugins de fonts personalitzades.
Les fonts afecten la velocitat del meu web?
Sí. Com més fonts i pesos carreguis, més pesa la pàgina. Per això convé limitar-les.
És legal fer servir Google Fonts al meu web?
Sí, però per respectar la privacitat dels teus visitants el recomanable és servir-les des del teu propi servidor i no des de Google.
I fins aquí aquest petit tutorial sobre com afegir fonts personalitzades al nostre web de WordPress! Espero que us hagi ajudat. Com sempre, si teniu algun comentari el podeu deixar a continuació i compartir aquesta publicació a les vostres xarxes. I si teniu algun dubte sobre WordPress i voleu que parli més a fons sobre això, contacteu-me. Les vostres peticions són ordres per a mi.
