Det är enkelt att använda Google Fonts i WordPress. Det är en gratiskatalog med över 800 webbteckensnitt som du kan använda på din webbplats. Google Fonts-tjänsten är en topprankad gratistjänst som används av miljontals WordPress-webbplatser för att förbättra deras webbplats utseende och användbarhet. Så här använder du Google Fonts på WordPress utan att kompromissa med webbplatsens prestanda och förbättra dina PageSpeed- poäng.
Metod 1: Värd Google Fonts på din WordPress-server
Steg 1: Välj ett Google-teckensnitt
Att använda färre Google Fonts minskar antalet förfrågningar (färre teckensnitt = färre förfrågningar).
Välj teckensnittsvikter noggrant – Antalet teckensnittsvikter du använder påverkar också hur snabbt sidan laddas. För att säkerställa att Google Fonts bara laddar de vikter du behöver, avmarkera de andra så att endast de konsekvenser du behöver packas.
Steg 2: Ladda ner teckensnittet
Nedladdning av typsnittet är det andra steget i processen. Det är viktigt att notera att Google automatiskt laddar ner alla typsnittsvikter, så det är inte nödvändigt att välja typsnittsvikter i detta skede. Istället behövs valet av typsnittsvikter i steg tre.
Steg 3: Konvertera teckensnitt till webbteckensnitt
Klicka på knappen Lägg till teckensnitt på deras webbplats, välj endast de teckensnitt du kommer att använda på din webbplats och ladda upp dem. Det är en roboto-regular.ttf-fil och en roboto-bold.ttf-fil, så båda vikterna ingår. Eftersom WOFF och WOFF2 täcker alla viktiga webbläsare, lämna inställningarna som de är. Klicka på knappen Konvertera för att starta konverteringsprocessen.
Steg 4: Ladda ner konverterade typsnittsfiler
Så snart typsnitten har konverterats kan du ladda ner dem. Eftersom två typsnitt har laddats ner till vår dator kommer vi att ha totalt fyra typsnittsfiler i zip-filen (eftersom vi laddade ner två typsnitt kommer vi att ha fyra typsnittsfiler i zip-filen).
Steg 5: Ladda upp typsnittsfiler till WordPress-filer
Se till att webbfontfilerna laddas upp via FTP eller cPanel , helst i mappen wp-content/uploads, för att undvika att de skrivs över av tema- och kärnuppdateringar. Vi laddade upp fonterna till en "fonts"-mapp (så att de skulle vara separerade från andra filer). Du bör kunna ladda ner fonterna efter att du har öppnat länkarna i din webbläsare, så att du kan bekräfta att de har laddats upp.
Steg 6: Lägg till anpassat teckensnitt i CSS
Efter att vi har laddat ner zip-filen lägger vi till stylesheet.css CSS i filen. CSS-koden nedan kopplar dina typsnitt till din befintliga CSS och gör dem tillgängliga.
Du kan placera CSS-koden i functions.php eller starta din style.css-fil. En extern CSS-fil eller WordPress wp_enqueue_style-funktion kan användas i CSS-koden. I temats standardfil style.css klistrar vi in den. Ersätt eventuella relativa URL:er med absoluta URL:er genom att kopiera/klistra in koden i stilarket.
Standard-URL:er för tema i stylesheet.css:
src: url('Roboto-Bold.woff2') format('woff2'),
url('Roboto-Bold.woff') format('woff');
Ändra till:
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');
För att enkelt använda teckensnittet i den aktuella HTML-koden, skapa en anpassad klass. CSS-klasserna roboto_font och roboto_bold_font .
.roboto_font {
typsnittsfamilj: "Roboto", "Arial", sans-serif; }
.roboto_bold_font {
typsnittsfamilj: ”Roboto”, ”Arial”, sans-serif;
teckenstorlek: fet;
}
Steg 7: Ställ in standardteckensnittet
För att göra det här typsnittet till standardtypsnittet på din webbplats måste du inkludera CSS-koden i din style.css-fil.
Du kan behöva felsöka eller redigera teckensnittet för att ersätta befintliga teckensnittsfamiljsegenskaper.
Nästa steg är att ladda upp stylesheet.css-filen som du har hämtat i filen med namnet stylesheet.css och lägga till CSS-koden. CSS-koden nedan gör att dina typsnitt fungerar med din befintliga CSS och är redo att användas så snart du anger den. Du kan använda ett externt stylesheet eller WordPress-funktionen wp_enqueue_style för att köa stylesheets.
Metod 2: Förladda webbteckensnitt – Optimering ovanför vikningen
Om du använder Google Fonts kan du behöva använda stilarket som Google har utarbetat och skickat till din WordPress-webbplats från Googles servrar. När du använder utvecklarverktyget som erbjuds av Google Chrome för att inspektera din webbplats kan du få en glimt av processen bakom kulisserna. Det finns en möjlighet att du kan se två poster för Google Fonts i källkoden.
Se bilden som har bifogats här.
När du klickar på fonts.googleapis ser du att stilmallen som du skapade URL:en för visas på den öppna sidan. Dessutom görs ett anrop till den specifika typsnittsfilen för varje typsnittsdeklaration.
Detta indikerar att användaren måste besöka fonts.gstatic.com för att få den nödvändiga vikten för typsnittet om en annan typsnittsvikt används. Detta steg kan förlänga tiden det tar för din WordPress-sida att laddas.
Gå därför till filen functions.php för ditt nuvarande tema och ange följande PHP-kod i funktionen som ansvarar för att hantera teckensnitt.
function twentyeleven_resource_hints( $urls, $relation_type ) {
om (wp_style_is('rumi-fonts', 'queue') && 'preconnect' === $relation_type) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'ursprungskorsning'
);
}
returnera $urls;
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
Metod 3: Optimera Google Fonts WordPress med hjälp av plugin
Plugins, precis som med de flesta WordPress-relaterade uppgifter, gör det mycket enklare att optimera Google Fonts. Dessutom tar de hand om programvaruaspekten åt dig, så du behöver inte oroa dig för var koden ska placeras i systemet.
Om du har Google Fonts installerat på din WordPress-webbplats och kör ett prestandatest med PageSpeed Insights eller GTmettrix får du följande felmeddelande: fonts.googleapis.com.
Det beror på att Google Fonts inte är kompatibla med WordPress-plattformen. Det indikerar att din WordPress-webbplats behöver optimera sina Google Fonts.
Ett gratis plugin kan användas för att fixa detsamma. Det är – OMGF | Hosta Google Fonts lokalt
Efter att installationen är klar kommer pluginet omedelbart att börja växla WordPress wp en queue script()Google Fonts-metoden till wp head()-funktionen. Detta plugin gör allt på egen hand.
Hitta fler sådana artiklar på Seahawk Media .
