Hur man lägger till Googles webbteckensnitt i WordPress-teman på det “rätta” sättet

Google-teckensnitt är en fantastisk gratis resurs för webbdesigners. I WPBv4 har vi börjat använda en populär Google Font-kombination: Oswald och Lora. Några av våra användare har frågat oss hur man lägger till Googles webbteckensnitt i WordPress-teman. Om du kommer ihåg visade vi hur du lägger till Google-teckensnitt i WordPress Post Editor. I den här artikeln kommer vi att visa dig hur du lägger till Google Web Fonts i dina WordPress teman Rätt väg, optimerad för prestanda.


Hitta Googles webbsnitt som du gillar

Det första du behöver göra är att hitta ett Google-teckensnitt som du gillar. Gå vidare till Google-teckensnitt och bläddra igenom biblioteket. När du hittar det teckensnitt du vill, klicka på ”Quick-use” knapp.

Snabbanvända teckensnitt från Google Teckensnitt

När du klickar på snabbanvändningsknappen kommer du till en ny sida. Rulla ner tills du ser användningsinstruktionsrutan med kod som du kan lägga till på din webbplats.

Googles inbäddningskod för teckensnitt

Du kommer att se att det finns tre olika flikar för att lägga till teckensnittet på din webbplats. Den första är den vanliga och rekommenderade metoden för att lägga till Google-teckensnitt på din webbplats. Den andra fliken använder @import CSS-metoden, och den sista fliken använder JavaScript-metoden.

Vi kommer att visa dig hur du använder var och en av dessa metoder och vad som finns för- och nackdelar.

Videohandledning

Prenumerera på WPBeginner

Om du inte gillar videon eller behöver fler instruktioner fortsätter du att läsa.

Lägga till Googles webbteckensnitt i WordPress-teman

Vi har mest sett folk som använder de två första metoderna.

Det enklaste sättet skulle vara att öppna ditt tema style.css arkivera och klistra in typsnittskoden som du fick på fliken @import, så här:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Du kan också kombinera flera teckensnittbegäranden till en. Så här skulle du göra det:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Den här metoden är superlätt men det är inte det bästa sättet att lägga till Google-teckensnitt på din WordPress-webbplats. Med hjälp av @import-metoden blockeras parallella nedladdningar, vilket innebär att webbläsaren väntar på att den importerade filen slutförs nedladdning innan den börjar ladda ner resten av innehåll.

Om du MÅSTE använda @import, ska du åtminstone kombinera flera förfrågningar till en.

Prestationsoptimerad metod för att lägga till Googles webbsnitt

Det bästa sättet att lägga till Google-teckensnitt är att använda standardmetoden som använder länkmetoden istället för importmetoden. Ta helt enkelt din font-URL som du fick från steg 1. Om du lägger till flera teckensnitt kan du kombinera de två teckensnitten med en | karaktär. Placera sedan koden i ditt temas huvudavsnitt.

Du kommer troligen att behöva redigera din header.php-fil och klistra in följande kod ovanför huvudstilen. Exemplet skulle se ut så här:

I princip är målet att lägga till teckensnittförfrågan så tidigt som möjligt. Enligt Google Web Fonts-bloggen, om det finns en skripttagg före @ font-face-deklarationen, kommer Internet Explorer inte att göra någonting på sidan förrän fontfilen har laddats ner.

När du har gjort det kan du helt enkelt börja använda den i ditt temas CSS-fil så här:

h1 {
font-familj: ‘Oswald’, Helvetica, Arial, serif;
}

Nu finns det många temaramar och barntema där ute. Det rekommenderas INTE att ändra filerna för ditt överordnade temat speciellt om du använder ett temaramverk eftersom dina ändringar kommer att åsidosättas nästa gång du uppdaterar det ramverket. Du måste använda krokar och filter som presenteras för dig av det överordnade temat eller ramverket för att lägga till Google-teckensnitt ordentligt i ditt barntema..

Korrekt markera Google-teckensnitt i WordPress

Ett annat sätt att lägga till Google-teckensnitt till din WordPress-webbplats är genom att markera teckensnittet i ditt temas funktioner.php-fil eller en webbplatsspecifik plugin.

funktion wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Glöm inte att ersätta fontlänken med din egen.

Laddar Google-teckensnitt med JavaScript

För den här metoden måste du kopiera koden på fliken JavaScript i avsnittet om användningsinstruktioner för Google-teckensnitt. Du kan klistra in den här koden i ditt tema eller underordens tema.php-fil för ditt barn omedelbart efter taggen.

Vårt sista tips om att använda Google Web Fonts på din webbplats skulle vara att inte ladda typsnitt du inte kommer att använda. Om du till exempel bara vill ha djärv och normal vikt lägger du inte till alla andra stilar.

Vi hoppas att den här artikeln hjälpte dig att lägga till Google Web Fonts i dina WordPress-teman på rätt sätt, så att din webbplats kan laddas snabbt. Du kanske också vill kolla in vår guide om hur du lägger till Typekit-teckensnitt i WordPress.

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