Det er nemt at bruge Google Fonts i WordPress. Det er en gratis fortegnelse over over 800 webfonte, du kan bruge på dit websted. Google Fonts-tjenesten er en topbedømt gratis tjeneste, der bruges af millioner af WordPress-websteder til at forbedre deres websteds udseende og brugervenlighed. Sådan bruger du Google Fonts på WordPress uden at gå på kompromis med webstedets ydeevne og forbedre dine PageSpeed- scorer.
Metode 1: Host Google Fonts på din WordPress-server
Trin 1: Vælg en Google-skrifttype
Brug af færre Google Fonts vil reducere antallet af anmodninger (færre skrifttyper = færre anmodninger).
Vælg skrifttypevægte omhyggeligt – Antallet af skrifttypevægte, du bruger, vil også påvirke den hastighed, hvormed din side indlæses. For at sikre, at Google Fonts kun indlæser de tykkelser, du har brug for, skal du fjerne markeringen fra de andre, så kun de konsekvenser, du har brug for, pakkes.
Trin 2: Download skrifttypen
Download af skrifttypen er andet trin i processen. Det er vigtigt at bemærke, at Google automatisk downloader alle skrifttypevægte, så det er ikke nødvendigt at vælge skrifttypevægte på dette tidspunkt. I stedet skal du vælge skrifttypevægte i trin tre.
Trin 3: Konverter skrifttyper til webskrifttyper
Klik på knappen "Tilføj skrifttyper" på deres hjemmeside, vælg kun de skrifttyper, du vil bruge på din hjemmeside, og upload dem. Det er en roboto-regular.ttf-fil og en roboto-bold.ttf-fil, så begge vægte er inkluderet. Da WOFF og WOFF2 dækker alle vigtige browsere, skal du lade indstillingerne være, som de er. Klik på knappen "Konverter" for at starte konverteringsprocessen.
Trin 4: Download konverterede skrifttypefiler
Så snart skrifttyperne er blevet konverteret, kan du downloade dem. Da to skrifttyper er blevet downloadet til vores computer, vil vi have i alt 4 skrifttypefiler i zip-filen (da vi downloadede to skrifttyper, vil vi have fire skrifttypefiler i zip-filen).
Trin 5: Upload skrifttypefiler til WordPress-filer
Sørg for, at webfontfilerne uploades via FTP eller cPanel , helst i mappen wp-content/uploads, for at undgå at de overskrives af tema- og kerneopdateringer. Vi har uploadet skrifttyperne til en mappe med navnet "fonts" (så de er adskilt fra andre filer). Du burde kunne downloade skrifttyperne, når du har åbnet linkene i din browser, så du kan bekræfte, at de er blevet uploadet.
Trin 6: Tilføj brugerdefineret skrifttype til CSS
Efter at have downloadet zip-filen, tilføjer vi stylesheet.css CSS i filen. CSS-koden nedenfor forbinder dine skrifttyper med din eksisterende CSS og gør dem tilgængelige.
Du kan placere CSS-koden i functions.php eller starte din style.css-fil. En ekstern CSS-fil eller WordPress' wp_enqueue_style-funktion kan bruges i CSS-koden. I standard style.css-filen i temaet indsætter vi den. Erstat eventuelle relative URL'er med absolutte URL'er ved at kopiere/indsætte koden i stylesheet'et.
Standard-URL'er for tema i stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Skift til:
src: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') format('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') format('woff');
For nemt at bruge skrifttypen i den aktuelle HTML, skal du oprette en brugerdefineret klasse. CSS-klasserne roboto_font og roboto_bold_font .
.roboto_font {
skrifttypefamilie: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
skrifttypefamilie: “Roboto”, “Arial”, sans-serif;
skriftvægt: fed;
}
Trin 7: Indstil standardskrifttypen
For at gøre denne skrifttype til standardskrifttypen på din hjemmeside, skal du inkludere CSS-koden i din style.css-fil.
Du skal muligvis foretage fejlfinding eller redigere skrifttypen for at erstatte eksisterende skrifttypefamilieegenskaber.
Det næste trin er at uploade stylesheet.css-filen, som du har fået i din fil med navnet stylesheet.css, og tilføje CSS'en. CSS-koden nedenfor vil få dine skrifttyper til at fungere med din eksisterende CSS og være klar til brug, så snart du indtaster den. Du kan bruge et eksternt stylesheet eller WordPress-funktionen wp_enqueue_style til at sætte stylesheets i kø.
Metode 2: Forudindlæs webfonte – Optimering over fold
Hvis du bruger Google Fonts, skal du muligvis se det typografiark, der er udarbejdet af Google og sendt til dit WordPress-websted fra Googles servere. Når du bruger udviklerværktøjet fra Google Chrome til at inspicere dit websted, kan du få et glimt af processen bag kulisserne. Der er en mulighed for, at du kan se to poster for Google Fonts i Source.
Se venligst billedet, der er vedhæftet her.
Når du klikker på fonts.googleapis , vil du se, at det stylesheet, som du har oprettet URL'en til, vises på den åbne side. Derudover foretages der et kald til den specifikke fontfil for hver font-face-deklaration.
Dette indikerer, at brugeren skal besøge fonts.gstatic.com for at få den nødvendige tykkelse for skrifttypen, hvis der bruges en anden skrifttykkelse. Dette trin kan forlænge den tid, det tager for din WordPress-side at indlæse.
Tilgå derfor functions.php-filen til dit nuværende tema, og indtast følgende PHP-kode i den funktion, der er ansvarlig for at administrere skrifttyper.
funktion twentyeleven_resource_hints( $urls, $relation_type ) {
hvis (wp_style_is('rumi-fonts', 'queue') && 'preconnect' === $relation_type) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'krydsende oprindelse'
);
}
returner $urls;
}
add_filter( 'wp_resource_hints', 'twenty-eleven_resource_hints', 10, 2 );
Metode 3: Optimer Google Fonts WordPress ved hjælp af plugin
Plugins, som det er tilfældet med de fleste WordPress-relaterede opgaver, gør det meget nemmere at optimere Google Fonts. Derudover tager de sig af softwareaspektet for dig, så du ikke behøver at bekymre dig om, hvor koden skal placeres i systemet.
Hvis du har Google Fonts installeret på din WordPress-hjemmeside og kører en performancetest ved hjælp af PageSpeed Insights eller GTmettrix, vil du få følgende fejlmeddelelse: fonts.googleapis.com.
Det sker, fordi Google Fonts ikke er kompatible med WordPress-platformen. Det indikerer, at dit WordPress-websted skal have sine Google Fonts optimeret.
Et gratis plugin kan bruges til at rette det samme. Det er – OMGF | Host Google Fonts Locally
Efter installationen er afsluttet, vil plugin'et straks begynde at skifte WordPress wp en queue script()Google Fonts-metoden til wp head()-funktionen. Dette plugin gør alt selv.
Find flere lignende artikler på Seahawk Media .
