{"id":10120,"date":"2026-05-13T11:57:41","date_gmt":"2026-05-13T10:57:41","guid":{"rendered":"https:\/\/josepgonzalez.com\/?p=10120"},"modified":"2026-10-06T16:43:09","modified_gmt":"2026-10-06T15:43:09","slug":"afegir-noves-fonts-wordpress","status":"publish","type":"post","link":"https:\/\/josepgonzalez.com\/ca\/afegir-noves-fonts-wordpress\/","title":{"rendered":"Com afegir noves fonts a WordPress"},"content":{"rendered":"<p>Si has entrat en aquest post \u00e9s que t&#8217;has cansat de la tipografia que ve per defecte al teu WordPress, i fas b\u00e9. Per destacar entre els milers de milions de webs que existeixen hem de ser diferents, aix\u00ed que el post d&#8217;avui va sobre <strong>com afegir fonts personalitzades al teu web de WordPress<\/strong> sense morir en l&#8217;intent. I ho fem amb els m\u00e8todes actuals, perqu\u00e8 des que vaig escriure la primera versi\u00f3 d&#8217;aquest article ha canviat bastant la manera de fer-ho.<\/p>\n<p>Les fonts s\u00f3n 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&#8217;utilitzar la tipografia del teu logotip per a tot el web. No. Deixeu de pensar aix\u00f2. La podeu utilitzar per destacar certes coses, per\u00f2 NO per a tot.<\/p>\n<h2>Quines opcions tens avui per canviar les fonts a WordPress<\/h2>\n<p>Hi ha diverses maneres, segons com estigui fet el teu web:<\/p>\n<ul>\n<li><strong>Amb el teu maquetador visual<\/strong> (com Elementor): l&#8217;opci\u00f3 m\u00e9s senzilla si ja el fas servir. Veur\u00e0s com a l&#8217;apartat seg\u00fcent.<\/li>\n<li><strong>Amb la Biblioteca de fonts de WordPress<\/strong>, si fas servir un tema de blocs (Editor de llocs).<\/li>\n<li><strong>Amb un plugin<\/strong> que descarregui les Google Fonts al teu servidor.<\/li>\n<li><strong>Pujant les teves pr\u00f2pies fonts<\/strong> (per exemple, la tipografia de la teva marca).<\/li>\n<\/ul>\n<h2>1. Amb Elementor (i altres maquetadors)<\/h2>\n<p>Si el teu web est\u00e0 fet amb <a href=\"https:\/\/josepgonzalez.com\/ca\/que-es-un-maquetador-visual\/\">un maquetador visual com Elementor<\/a>, pots definir les fonts globals de tot el web als <strong>Ajustos del lloc &gt; Tipografia global<\/strong>: tries la font per a t\u00edtols, textos i botons, i s&#8217;aplica a totes les p\u00e0gines. \u00c9s el m\u00e9s r\u00e0pid i coherent, i a m\u00e9s et permet canviar-les en un sol lloc quan vulguis. Amb Elementor Pro tamb\u00e9 pots pujar <strong>fonts personalitzades<\/strong>.<\/p>\n<h2>2. Amb la Biblioteca de fonts de WordPress<\/h2>\n<p>Des de WordPress 6.5, els temes de blocs inclouen una <strong>Biblioteca de fonts<\/strong>. Des de l&#8217;<strong>Editor de llocs &gt; Estils &gt; Tipografia<\/strong> pots instal\u00b7lar fonts de Google Fonts o pujar les teves i aplicar-les a tot el web sense plugins. Un detall important: les fonts s&#8217;allotgen al teu propi servidor, cosa que ajuda amb la privacitat i la velocitat.<\/p>\n<h2>3. Allotjar les Google Fonts al teu propi servidor<\/h2>\n<p>La majoria de desenvolupadors fan servir <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google Fonts<\/strong><\/a>: s\u00f3n fiables i, per descomptat, gratu\u00eftes. Per\u00f2 avui \u00e9s important saber que <strong>carregar-les directament des dels servidors de Google<\/strong> envia l&#8217;adre\u00e7a IP del visitant a Google, i aix\u00f2 ha generat problemes de compliment del RGPD a Europa (incloses sent\u00e8ncies a Alemanya). La soluci\u00f3 \u00e9s <strong>allotjar-les al teu propi servidor<\/strong>:<\/p>\n<ul>\n<li>Amb un plugin com <strong>OMGF<\/strong> (Optimize My Google Fonts), que descarrega i serveix les fonts de manera local.<\/li>\n<li>Des de les opcions del teu maquetador o del teu plugin d&#8217;optimitzaci\u00f3 (alguns inclouen la c\u00e0rrega local de Google Fonts).<\/li>\n<li>Descarregant les fonts de Google Fonts i pujant-les al teu web en format <strong>WOFF2<\/strong>.<\/li>\n<\/ul>\n<p>Pel que fa al plugin que feia servir a la versi\u00f3 anterior d&#8217;aquest post, <em>Easy Google Fonts<\/em>, fa temps que va deixar d&#8217;actualitzar-se regularment i no funciona b\u00e9 amb els temes actuals, per la qual cosa ja no el recomano.<\/p>\n<h2>Bones pr\u00e0ctiques amb les fonts<\/h2>\n<ul>\n<li><strong>M\u00e0xim 2 tipografies:<\/strong> una per a t\u00edtols i una altra per al text. M\u00e9s fonts donen una mala primera impressi\u00f3, un web desordenat i, el m\u00e9s important, alenteixen la c\u00e0rrega.<\/li>\n<li><strong>Carrega nom\u00e9s els pesos que facis servir<\/strong> (regular i negreta, per exemple), no tota la fam\u00edlia. Millor encara, fes servir <em>fonts variables<\/em>.<\/li>\n<li><strong>Fes servir format WOFF2 i <code>font-display: swap<\/code><\/strong> perqu\u00e8 el text es vegi mentre es descarrega la font.<\/li>\n<li><strong>Cuida la llegibilitat:<\/strong> mida del text (m\u00ednim 16 px en m\u00f2bil), interlineat i bon contrast.<\/li>\n<li><strong>Mesura l&#8217;impacte:<\/strong> ja ho vaig dir en el seu moment i no em cansar\u00e9 de repetir-ho, la velocitat de c\u00e0rrega \u00e9s molt important. Repassa-la a <a href=\"https:\/\/josepgonzalez.com\/ca\/mesurar-velocitat-carrega-web\/\">com mesurar la velocitat de c\u00e0rrega del teu web<\/a>.<\/li>\n<\/ul>\n<h2>Preguntes freq\u00fcents<\/h2>\n<h3>Puc fer servir fonts que no siguin de Google?<\/h3>\n<p>S\u00ed. Pots pujar les teves pr\u00f2pies fonts (revisant que la seva llic\u00e8ncia permeti l&#8217;\u00fas web) amb Elementor Pro, amb la Biblioteca de fonts de WordPress o amb plugins de fonts personalitzades.<\/p>\n<h3>Les fonts afecten la velocitat del meu web?<\/h3>\n<p>S\u00ed. Com m\u00e9s fonts i pesos carreguis, m\u00e9s pesa la p\u00e0gina. Per aix\u00f2 conv\u00e9 limitar-les.<\/p>\n<h3>\u00c9s legal fer servir Google Fonts al meu web?<\/h3>\n<p>S\u00ed, per\u00f2 per respectar la privacitat dels teus visitants el recomanable \u00e9s servir-les des del teu propi servidor i no des de Google.<\/p>\n<p>I fins aqu\u00ed aquest petit tutorial sobre <strong>com afegir fonts personalitzades al nostre web de WordPress<\/strong>! Espero que us hagi ajudat. Com sempre, si teniu algun comentari el podeu deixar a continuaci\u00f3 i compartir aquesta publicaci\u00f3 a les vostres xarxes. I si teniu algun dubte sobre <a href=\"https:\/\/josepgonzalez.com\/ca\/que-es-wordpress-claus-exit-cms\/\">WordPress<\/a> i voleu que parli m\u00e9s a fons sobre aix\u00f2, contacteu-me. Les vostres peticions s\u00f3n ordres per a mi.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si has entrat en aquest post \u00e9s que t&#8217;has cansat de la tipografia que ve per defecte al teu WordPress, i fas b\u00e9. Per destacar entre els milers de milions de webs que existeixen hem de ser diferents, aix\u00ed que el post d&#8217;avui va sobre com afegir fonts personalitzades al teu web de WordPress sense [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-10120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-ca"],"_links":{"self":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/comments?post=10120"}],"version-history":[{"count":2,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10120\/revisions"}],"predecessor-version":[{"id":10239,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/posts\/10120\/revisions\/10239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/media\/10140"}],"wp:attachment":[{"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/media?parent=10120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/categories?post=10120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/josepgonzalez.com\/ca\/wp-json\/wp\/v2\/tags?post=10120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}