En aquesta guia, us explicarem com afegir noves fonts a WordPress.
Siguem realistes, a tots ens encanten els blocs i llocs web amb fonts sàviament triades. No només fan que tot el lloc sigui atractiu, sinó que també enganxen l'usuari amb el contingut.
No obstant això, l'elecció de les fonts de WordPress és limitada i depèn del tema que utilitzeu. El millor és que pots afegir fonts personalitzades a WordPress de manera manual o fent ús d'alguns plugins que veurem aquí.
Trieu la font a utilitzar en WordPress
Hi ha diversos llocs web des dels quals podeu obtenir fonts web gratuïtes. Per exemple, Google Font Service és un servei gratuït de fonts proporcionat per Google i té fonts en més de 135 idiomes. Edge Web Fonts, per altra banda, és un servei gratuït de fonts proporcionat per Adobe que compta amb la seva extensa col·lecció de fonts web. També podeu provar Typekit, una biblioteca gratuïta de milers de fonts web, juntament amb Fonts.com, que afirma proporcionar més de 150.000 fonts web i descriptori.
Ara que heu trobat la font que voleu utilitzar al vostre lloc web, és hora de verificar el vostre format. Hem de deixar clar que no totes les fonts que hi ha són compatibles amb els navegadors web. Però no et preocupis, encara que la font escollida no és compatible, encara la pots convertir a un format compatible.
És convenient, que abans de convertir fonts d'un format a un altre, fem una ullada ràpida als diferents formats de font.
Fonts Open Type o de tipus obert
Abreujades com a OTF, aquestes són les fonts web més utilitzades i són una marca registrada de Microsoft. Funcionen bé amb gairebé tots els principals navegadors.
Fonts True Type o de tipus veritable
També conegudes com a TTF, aquestes fonts van ser desenvolupades per Microsoft i Apple a la dècada de 1980 i s'usen àmpliament per als sistemes operatius Windows i Mac. Són compatibles amb els principals navegadors.
Fonts Web Open o de font oberta web
Les fonts WOFF s'utilitzen molt a les pàgines web i estan recomanades per W3C. Aquestes fonts són les més utilitzades en disseny web perquè són compatibles principalment amb tots els navegadors.
WOFF 2.0
Les fonts WOFF 2.0 tenen un avantatge sobre WOFF 1.0 per les seves millors capacitats de compressió. No són compatibles amb Safari i Internet Explorer, però funcionen bé amb Google Chrome, Firefox i Opera.
Fonts Embedded Open o de tipus obert incrustades
Aquest tipus de fonts OTF són compactes i s'utilitzen com a fonts incrustades en pàgines web i són compatibles amb tots els principals navegadors.
Si heu trobat la font que voleu utilitzar al vostre lloc web de WordPress, però no sabeu si és compatible amb tots els navegadors, utilitzeu l'eina Web Font Generator. Aquesta eina us permet convertir fàcilment qualsevol font a un format compatible amb la web:
- Accediu a l'eina Generador de fonts web.
- Premeu el botó Carregar fonts per carregar la vostra font i acceptar que les fonts són legalment adequades per a la incrustació web.
- Premeu el botó Descarregar i deseu el fitxer .zip a l'ordinador.
- Dins del fitxer .zip trobareu les fonts en format WOFF i WOFF 2.0 juntament amb els fitxers CSS i la pàgina HTML de demostració. Aquests formats de font són compatibles amb gairebé tots els navegadors.
Afegiu noves fonts a WordPress a través de plugins
Els plugins són probablement la forma més fàcil dafegir fonts en WordPress. Aquests són alguns dels complements més populars que s'enumeren a continuació:
Font WP Google
Podeu afegir fàcilment fonts al vostre lloc web de WordPress utilitzant el plugin WP Google Font per a fonts. Aquest plugin inclou automàticament el codi necessari per afegir les noves fonts al vostre lloc de WordPress. També ofereix la llibertat de fer servir fonts personalitzades en elements CSS específics per part de l'administrador de WordPress.
Simplement instal·leu aquest plugin des del directori oficial de plugins de WordPress i obriu la nova secció que es crearà al tauler de control de WordPress: Google Fonts. Apareixerà el Tauler de control de fonts de Google, és a dir, la pàgina de configuració. Aquí podeu seleccionar fonts i canviar diverses configuracions, com l'estil de font, els elements assignats, etc.
Usar qualsevol font
Si voleu afegir qualsevol font useu Any Font és un altre plugin a través del qual podeu afegir fonts al seu lloc web de WordPress.
Podeu instal·lar aquest connector des del directori oficial de connectors de WordPress. Quan es completi la instal·lació, aneu a la secció Usar qualsevol font i creeu una clau API gratuïta i premeu el botó Verificar.
Quan es completi la verificació, podreu carregar fonts en formats TTF, OTF, WFF. El complement també us permet assignar fonts a elements personalitzats.
Afegir noves fonts a WordPress a mà
Si no voleu sobrecarregar el vostre WordPress amb plugins, podeu afegir fonts manualment a WordPress. El procés és força simple: heu de carregar les fonts al vostre compte d'allotjament i editar el fitxer CSS del tema.
- Segueix aquestes instruccions de com afegir noves fonts a WordPress:
- Descarrega la font al teu ordinador.
- En general, trobaràs els fitxers de fonts en un fitxer .zip. Descomprimeix-los.
- Ara necessites carregar el fitxer de fonts (pots utilitzar el client FTP o l'Administrador de fitxers per a això) al directori wp-content / themes / your-theme / fonts (has de crear la carpeta de fonts tu mateix si no existeix). En el nostre exemple, carreguem la font AguafinaScript-Regular.ttf.
- Ara veuràs l'àrea administrativa de WordPress i obre Aparença -> Editor. Aneu al fitxer style.css. Desplaça't fins al final d'aquest fitxer i afegeix el codi següent (no oblidis canviar la família de fonts i els valors d'URL perquè coincideixin amb la seva font):
@font-face {
font-family: Aguafina Script-Regular;
src: url(https://www.b-fast.it/wp-content/themes/twentyseventeen/fonts/AguafinaScript-Regular.ttf);
pes del tipus de lletra: normal;
}
Premeu el botó Actualitza fitxer per desar els canvis.
El codi font-face carrega la font cada cop que un visitant entra al teu lloc web. Tot i això, la font encara no s'aplica a cap element. Per tant, no veuràs cap canvi al front-end. Per assignar la font a un element específic, heu d'editar el mateix fitxer style.css.
Per exemple, per assignar aquesta font al teu títol (h1) simplement escriviu
h1 {
font-family: Aguafina Script-Regular, Arial, sans-serif;
}
Conclusió
Espero que aquest tutorial us hagi ajudat a saber com afegir noves fonts a WordPress.
Per a aquells que no estiguin familiaritzats amb CSS, recomanem que utilitzin el mètode amb plugins, ja que és un mètode més simple i no requereix cap altre coneixement de codificació implícit.
