Tots sabem les limitacions quant a tipografies dins el món web. Tot i que s’ha evolucionat molt i ara podem posar-hi qualsevol mena de tipografia, anem a veure com fer-ho a mà sense perdre la paciència.
També cal recordar que les tipografies, igual que les fotografies, textos, etc., drets d’autoria. És per això que sempre farem servir tipografies comprades, de lliure distribució o, perquè no!, fetes per nosaltres mateixos.
Hi ha mòduls com el de Google Fonts, Typekit, FontSquirrel o fonts.com que faciliten molt la tasca. Però a més de tenir la limitació d’oferir únicament les seves pròpies fonts, carrega el nostre WordPress.com d’una forma innecessària.
També penso que si tenim la facilitat de posar moltes fonts, la web acaba sent un “desfile” irracional de tipografies sense cap sentit. Així que millor dissenyar primer bé quines tipografies volem utilitzar i després importar-les al nostre Theme per utilitzar-les, de forma automàtica, a cada part del disseny mitjançant programació d’estils CSS3.
Pas a pas amb CSS3 @font-face
La forma més directe d’afegir una tipografia al nostre WordPress és utilitzant el mètode CSS3 @font-face. Aquest sistema possibilita utilitzar qualsevol topografia al teu web.
Primer, cal descarregar la topografia desitjada en el format web (.woff2). Si no trobes la teva tipografia en aquest format utilitza FontSquirrel Webfont generator per fer la conversió de forma gratuïta.
Un cop tinguem la nostra tipografia en el format correcte, l’haurem de “pujar” al nostre servidor, on tenim el nostre web creat amb WordPress. La ubicació més recomanable és utilitzar el directori “fonts” dins el vostre Theme fill.
Per això pots utilitzar un client FTP o el Panell de control del vostre proveïdor d’allotjament.
Un cop la font estigui al seu lloc, caldrà carregar-la a la fulla CSS del vostre Theme utilitzant l’ordre CSS3 @font-face d’una forma similar a:
@font-face {
font-family: Arvo;
src: url(https://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}No oblideu de canviar l’URL de la tipografia, i també el nom, amb els del vostre servidor
Ara, dins el mateix full CSS, podrem assignar la tipografia a qualsevol estil CSS amb l’ordre Font-family com a l’exemple
.h1 site-title {
font-family: "Arvo", Arial, sans-serif;
}