Com carregar fonts de Google localment a WordPress: un element d’optimització que es troba a GTmetrix, Pingdom i Google PageSpeed ​​Insights

Si el vostre lloc de WordPress té Google Font errors a GTmetrix/Pingdom, Carregant fonts de Google localment hauríeu de solucionar-les.


No podeu controlar recursos i scripts externs, cosa que els fa impossibles de comprimir, minificar o optimitzar. Això pot afectar greument la velocitat de WordPress. Un dels recursos externs més comuns són els tipus de lletra de Google. Si ja heu configurat un complement de memòria cau com WP Rocket o WP Fastest Cache, podeu començar a notar recursos externs com ara tipus de lletra que afecten els graus i els temps de càrrega. És aquí on entra en joc la càrrega de fonts Google. Això permet al vostre complement de caché comprimir tots els recursos relacionats amb les vostres fonts personalitzades.

Obteniu una còpia de seguretat completa del vostre lloc (o, com a mínim, dels fitxers que esteu editant) abans de fer canvis.

Google-Fonts-GTmetrix

Pas 1: trieu un tipus de lletra de Google

En aquest exemple, farem servir Tipus de lletra Roboto amb dos pesos de lletra: regular (400) i negreta (700).

Selecció de Google-Fonts

Utilitzeu menys fonts de Google – mantenir els vostres tipus de lletra de Google al mínim (menys tipus de lletra = menys sol·licituds).

Sigueu selectius amb pesos de tipus de lletra – el nombre de pesos també afecta els temps de càrrega. Si només necessiteu la versió en negreta, desmarqueu els altres pesos de manera que els tipus de lletra de Google només carreguin els que necessiteu.

Pas 2: descarregueu el tipus de lletra

Baixeu els tipus de lletra quan estigueu llestos. Google descarregarà automàticament tots els pesos de la lletra, de manera que no es requereix la selecció dels pesos de tipus de lletra en aquest pas i es requereix al pas 3.

Descàrrega de Google-Fonts

Pas 3: Convertiu els tipus de lletra en fonts web

A continuació, convertirem aquests fitxers de lletra (.ttf) en fitxers de lletra web. Faré servir Transfonter. Vés al seu lloc, fes clic Afegiu tipus de lletra, aleshores pengeu només els tipus de lletra que utilitzeu al vostre lloc web. Estic fent servir Roboto-Regular.ttf i Roboto-Bold.ttf de manera que tinc pesos regulars i atrevits. Deixeu els paràmetres de manera predeterminada, ja que WOFF i WOFF2 cobreixen tots els navegadors principals. Ara feu clic a convertir.

Conversió Transfonter-Google-Font-Font

Seleccioneu només els tipus de tipus de lletra que utilitzeu al vostre lloc web …

Selecció de conversions de Google Fonts

Pas 4: descarregueu fitxers de font convertits

Una vegada convertits els tipus de lletra, podeu descarregar-los. Al fitxer zip, cada font inclourà els formats WOFF i WOFF2 (ja que hem descarregat dos tipus de lletra, tindrem un total de 4 fitxers de tipus de lletra).

WOFF-Google-Font-Conversion

Pas 5: pengeu fitxers de lletra a fitxers de WordPress

Carregueu fitxers de fonts web a través de FTP o cPanel, idealment a la secció wp-content / càrregues carpeta perquè les actualitzacions del tema i del nucli no les anul·lin. Vaig crear una carpeta “fonts” i les vaig penjar allà (per separar-les d’altres fitxers). Per confirmar que es van penjar correctament i que teniu els enllaços correctes, obriu els enllaços al vostre navegador i els tipus de lletra haurien de començar a descarregar.

Exemple:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Substitueix seu lloc web.com amb el vostre propi lloc web (i HTTPS si feu servir SSL). L’ideal és provar els 4 enllaços i assegurar-vos que teniu els URL correctes (i també us assegureu de desar-los en algun lloc).

Pas 6: Afegir font personalitzada a CSS

A continuació, afegirem el CSS que teniu al fitxer zip descarregat anomenat stylesheet.css. Aquest és el codi CSS que connectarà els vostres tipus de lletra amb el vostre CSS existent i els farà llestos per utilitzar.

On col·locar el codi CSS és subjectiu, però podeu utilitzar un full d’estils extern o el WordPress ” wp_enqueue_style funció a funcions.php o al començament de la vostra estil.css fitxer (o personalitzat.css si en teniu). Ho enganxaré al fitxer style.css per defecte del tema. Copieu / enganxeu el codi al full d’estils i canvieu els URL relatius a URL absoluts.

URL per defecte a stylesheet.css:
src: format url (“Roboto-Bold.woff2”) (format “woff2”),
format url (“Roboto-Bold.woff”) (“woff”);

Canvieu-los a:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff ‘) (‘ woff ‘);

Bàsicament, només heu d’incloure l’URL de la carpeta abans del nom del fitxer.

Això és opcional, però si ho prefereixes, crea una classe personalitzada per utilitzar fàcilment el tipus de lletra en HTML existent. Aquí vam nomenar les nostres classes roboto_font i roboto_bold_font. Per fer-ho, afegiu-ho al fitxer style.css (després del codi anterior):

.roboto_font {

font-family: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;

lletra-pes: negreta;

}

Pas 7: Prova el tipus de lletra

Ara creeu una pàgina de prova i poseu el codi següent a la secció Editor de text

Prova

Prova de tipus de lletra personalitzada

Prova de tipus de lletra personalitzada

Prova de Google-Fonts

Vista prèvia de la pàgina. Si ho vau fer correctament, hauríeu de veure el nou tipus de lletra personalitzat. El primer títol és el tipus de lletra predeterminat del vostre lloc web, el segon i el tercer són els tipus de lletra Google Fonts que hem afegit:

Local-Google-Fonts

Pas 8: configureu el tipus de lletra per defecte

Per a que aquest sigui el tipus de lletra predeterminat del vostre lloc web, afegiu aquest CSS al fitxer style.css:

cos {

font-family: “Roboto”, “Arial”, sans-serif;

}

Ves amb compte! Si ja teniu un tipus de lletra personalitzat, és possible que no aparegui correctament i requereixi depurar o editar les propietats de la família de fonts existents i substituir-les per aquesta.

Pas 9: tingueu sempre els retrobadors de tipus de lletra

És una mala pràctica aplicar un Google Font com a família de tipus de lletra. En lloc d’això, haureu d’especificar diversos tipus de lletra inclosos els tipus de lletra comuns com Arial, Times New Roman per tal que el navegador pugui tornar a aquests tipus de lletra en cas que el tipus de lletra no es carregui o triga més a carregar-se..

Sense caiguda:
font-family: “Roboto”;

Amb tipus de lletra fallback:
font-family: “Roboto”, Arial, sans-serif;

Ara, en cas que no carregueu els vostres tipus de lletra de Google, el navegador tornarà a aparèixer al tipus de lletra Arial o al tipus de font sans-serif predeterminat del sistema i no causarà cap problema amb la representació del tipus de lletra..

Torneu a provar el lloc web (a GTmetrix)

No heu de veure cap error de tipus de lletra de Google …

Nou-GTmetrix-Report.png

Teniu preguntes? Llanceu-me una línia.

Preguntes freqüents

&# x2705; Com accelereu els tipus de lletra de Google?

Combinar fonts de Google, allotjar-les localment, connectar-les i preconfigurar-les, pot ajudar a millorar els temps de càrrega. Comproveu la cascada GTmetrix per obtenir un punt de referència dels vostres tipus de lletra i, a continuació, torneu-ho a provar després d’optimitzar-lo.

&# x2705; Com convertir els tipus de lletra als fitxers de lletra web?

Utilitzem Transfonter.

&# x2705; Què passa amb els tipus de lletra personalitzats Elementor?

Els tipus de lletra personalitzats Elementor també poden allotjar fonts de Google localment i estan integrades a Elementor Pro. Podeu utilitzar-ho per carregar els vostres fitxers de lletra.

&# x2705; Quins plugins ajuden a optimitzar els tipus de lletra?

WP Rocket, OMGF, Autoptimize i Perfmatters poden ajudar-vos a optimitzar els tipus de lletra.

&# x2705; Què passa amb la preconfiguració i la preconnexió de tipus de lletra?

Aquests poden accelerar els tipus de lletra ajudant els navegadors a anticipar-los millor. Utilitzem el complement Perfmatters de Kinsta per preconfigurar i preconfigurar tipus de lletra, però també podeu utilitzar WP Rocket o el complement de recursos de recursos prèviament a la festa..

Salutacions,
Usama

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map